Flutter + .NET WebAPI Monorepo Template

A production-ready mono-repo template with Flutter Web SPA frontend and .NET WebAPI backend.

Features

• Flutter Web frontend with hot-reload development
• .NET 10 WebAPI backend with OpenAPI/Swagger
• Single server deployment - .NET serves both SPA and API
• Docker support - Multi-stage build for containerization
• Makefile automation - Simple commands for build/dev/deploy

Structure

├── frontend/              # Flutter Web SPA
│   ├── lib/
│   │   ├── main.dart
│   │   ├── models/        # Data models
│   │   └── services/      # API services (dio)
│   └── pubspec.yaml
├── backend/               # .NET WebAPI
│   ├── MyApp.Api.slnx
│   └── src/MyApp.Api/
│       ├── Program.cs     # API endpoints + SPA config
│       └── wwwroot/       # Built Flutter app (generated)
├── _docs/                 # Documentation
├── Makefile               # Build automation
├── Dockerfile             # Multi-stage Docker build
└── docker-compose.yml

Quick Start

Prerequisites

• Flutter SDK 3.8+
• .NET SDK 10.0+
• Docker (optional)

Install Dependencies

make restore

Development (2 terminals)

# Terminal 1: Start .NET API server
make dev-back

# Terminal 2: Start Flutter dev server
make dev-front

• Flutter app: http://localhost:3000
• API endpoint: http://localhost:5069/api/weatherforecast
• Swagger UI: http://localhost:5069/swagger

Production Build

# Build Flutter → copy to wwwroot → build .NET
make build

# Run production server
make run-back

Visit http://localhost:5069

Docker Deployment

# Build Docker image
make docker-build

# Run container
make docker-run

Visit http://localhost:8080

Available Commands

Command	Description
make help	Show all commands
make restore	Install all dependencies
make build	Production build (frontend + backend)
make build-front	Build Flutter web only
make build-back	Build .NET API only
make run-back	Run production server
make dev-front	Flutter dev with hot-reload
make dev-back	.NET watch mode
make clean	Clean build artifacts
make docker-build	Build Docker image
make docker-run	Run Docker container
make docker-stop	Stop Docker container

Architecture

Development Mode

Flutter (:3000) ──CORS──> .NET API (:5069)

Two separate servers for independent hot-reload.

Production Mode

Browser ──> .NET Kestrel (:5069 or :80)
            ├── /api/*  → API endpoints
            └── /*      → Flutter SPA (wwwroot/)

Single server serves both SPA and API.

Documentation

• How to Setup From Scratch - Step-by-step guide to create this structure
• Architecture - Request flow and deployment diagrams

Tech Stack

Layer	Technology	Version
Frontend	Flutter Web	3.8+
HTTP Client	dio	5.4+
Backend	ASP.NET Core	10.0
API Docs	OpenAPI + Swagger	-
Container	Docker	-

License

MIT