SolidJS + ASP.NET Core BFF Demo

A demonstration application showcasing SolidJS frontend integrated with ASP.NET Core backend using the Backend-for-Frontend (BFF) pattern.

Features

This demo application includes three classic examples:

1. Weather Service - Displays a 5-day weather forecast
2. Todo List - Full CRUD operations for managing todos
3. Bookstore - Book catalog with search, filter, and management capabilities

Architecture

• Frontend: SolidJS with TypeScript, built with Vite
• Backend: ASP.NET Core 9.0 Minimal APIs
• Pattern: Backend-for-Frontend (BFF) - all API calls go through the ASP.NET Core backend
• Project Structure: Single project containing both frontend and backend code

Prerequisites

• .NET 9.0 SDK
• Node.js 18+
• Visual Studio 2022 or VS Code

Project Structure

/
├── client-app/           # SolidJS frontend application
│   ├── src/
│   │   ├── api/         # API client and type definitions
│   │   ├── components/  # SolidJS components
│   │   ├── App.tsx      # Main app component
│   │   └── index.tsx    # Entry point
│   └── vite.config.ts   # Vite configuration
├── Models/              # C# data models
├── Services/            # BFF service layer
├── wwwroot/            # Built frontend assets (generated)
├── Program.cs          # ASP.NET Core configuration and API endpoints
└── SolidJsDemo.csproj  # .NET project file

Development Setup

Option 1: Using Visual Studio

1. Open SolidJsDemo.sln in Visual Studio 2022
2. Build the solution to restore .NET packages
3. Open a terminal in the client-app directory and run:

   npm install
   npm run dev

4. Run the backend by pressing F5 or using the Run button
5. The frontend will be available at http://localhost:5173
6. The backend API will be available at http://localhost:5000

Option 2: Using VS Code

1. Open the repository folder in VS Code

2. Install dependencies:

   # Install .NET packages
   dotnet restore
   
   # Install Node packages
   cd client-app
   npm install
   cd ..

3. Run the backend:

   dotnet run

4. In a separate terminal, run the frontend development server:

   cd client-app
   npm run dev

5. The frontend will be available at http://localhost:5173

6. The backend API will be available at http://localhost:5000

Production Build

To build for production:

# Build the frontend
cd client-app
npm run build
cd ..

# Build the backend
dotnet build -c Release

# Run the production build
dotnet run -c Release

The production build serves the SolidJS app from the wwwroot directory, making it a single deployable application accessible at http://localhost:5000.

API Endpoints

All API endpoints are prefixed with /api:

Weather

• GET /api/weather - Get 5-day weather forecast

Todos

• GET /api/todos - Get all todos
• GET /api/todos/{id} - Get a specific todo
• POST /api/todos - Create a new todo
• PUT /api/todos/{id} - Update a todo
• DELETE /api/todos/{id} - Delete a todo

Books

• GET /api/books - Get all books (supports ?query= and ?genre= filters)
• GET /api/books/{id} - Get a specific book
• POST /api/books - Create a new book
• PUT /api/books/{id} - Update a book
• DELETE /api/books/{id} - Delete a book
• GET /api/books/genres - Get all available genres

Technology Stack

Frontend

• SolidJS - Reactive UI framework
• TypeScript - Type-safe JavaScript
• Vite - Fast build tool and dev server
• CSS - Custom styling with modern CSS features

Backend

• ASP.NET Core 9.0 - Web framework
• Minimal APIs - Lightweight HTTP API endpoints
• OpenAPI - API documentation

BFF Pattern Implementation

The Backend-for-Frontend pattern is implemented as follows:

1. Frontend API Client (client-app/src/api/client.ts) - Makes HTTP calls to /api/* endpoints
2. ASP.NET Core BFF Layer (Program.cs) - Exposes API endpoints and handles routing
3. Service Layer (Services/) - Business logic and data management
4. Models (Models/) - Shared data structures

This pattern provides:

• Security through server-side API management
• Simplified frontend code
• Centralized data transformation
• Better separation of concerns

Development Notes

Hot Module Replacement (HMR)

The Vite dev server supports HMR - changes to frontend code will automatically update in the browser without a full page reload.

CORS Configuration

In development mode, the backend is configured to allow CORS requests from http://localhost:5173 (the Vite dev server).

API Proxying

The Vite dev server is configured to proxy /api requests to http://localhost:5000, allowing seamless development without CORS issues.

License

This is a demonstration project for educational purposes.