React + Vite + TypeScript + Tailwind CSS project template with ServiceStack .NET backend

.NET 10 React Static Template

A modern full-stack .NET 10.0 + React Vite project template that combines the power of ServiceStack with React Vite static site generation and React 19. It provides a production-ready foundation for building scalable web applications with integrated authentication, database management, and background job processing.

react-static.react-templates.net

Live Demo View Source

Quick Start

npx create-net react-static MyProject

Getting Started

Run Server .NET Project (automatically starts both .NET and Vite React dev servers):

cd MyProject
dotnet watch

Architecture

Hybrid Development Approach

Development Mode:

ASP.NET Core proxies requests to Vite dev server (running on port 5173)
Hot Module Replacement (HMR) support for instant UI updates
WebSocket proxying for Vite HMR functionality

Production Mode:

Vite React app is statically exported to /dist
Static files served directly from ASP.NET Core's /wwwroot
No separate Node.js server required in production

Core Technologies

Frontend

React 19 - A JavaScript library for building user interfaces
Vite 7 - Next Generation Frontend Tooling
Tailwind CSS v4 - CSS-first configuration with @tailwindcss/vite plugin
TypeScript 5 - JavaScript with syntax for types
Vitest - Modern testing framework
ServiceStack React Components - Pre-built UI components

.NET Frontend (Integrated + Optional)

Razor Pages - For Identity Auth UI (/Identity routes)

Backend (.NET 10.0)

ServiceStack 10.x - High-performance web services framework
ASP.NET Core Identity - Complete authentication & authorization system
Entity Framework Core - For Identity data management
OrmLite - ServiceStack's fast, lightweight Typed ORM for application data
SQLite - Default database (easily upgradable to PostgreSQL/SQL Server/MySQL)

Major Features

1. Authentication & Authorization

ASP.NET Core Identity integration with role-based access control
Custom user sessions with additional claims
Admin users feature for user management at /admin-ui/users
Email confirmation workflow (configurable SMTP)
Razor Pages for Identity UI (/Identity routes)
Credentials-based authentication

2. AutoQuery CRUD

Declarative API development with minimal code
Complete Auth-protected CRUD operations (see Bookings example at /bookings-auto)
Automatic audit trails (created/modified/deleted tracking)
Built-in validation and authorization
Type-safe TypeScript DTOs auto-generated from C# models

3. Background Jobs

BackgroundsJobFeature for async task processing
Command pattern for job execution
Email sending via background jobs
Recurring job scheduling support
Upgradable to DatabaseJobsFeature for enterprise RDBMS

4. Developer Experience

Admin UI at /admin-ui for App management
Health checks at /up endpoint
Modular startup configuration pattern
Code-first migrations with OrmLite
Docker support with container publishing
Kamal deployment configuration included

5. Production Features

Static asset caching with intelligent cache invalidation
Clean URLs without .html extensions
HTTPS redirection and HSTS
Data protection with persistent keys
Health monitoring
Database developer page for EF Core errors

Project Structure

├── MyApp/                      # .NET Backend
│   ├── Configure.*.cs          # Modular AppHost configuration
│   ├── Migrations/             # EF Core & OrmLite migrations
│   ├── Program.cs              # Application entry point
│   └── wwwroot/                # Static files (production build)
│
├── MyApp.Client/               # React Frontend
│   ├── src/
│   │   ├── components/         # React components
│   │   ├── lib/
│   │   │   ├── dtos.ts         # Auto-generated TypeScript DTOs
│   │   │   ├── gateway.ts      # ServiceStack API client
│   │   │   └── utils.ts        # Utility functions
│   │   ├── styles/
│   │   │   └── index.css       # Tailwind CSS styles
│   │   ├── App.tsx             # Main App component
│   │   └── main.tsx            # Application entry point
│   ├── vite.config.ts          # Vite configuration
│   └── package.json            # NPM dependencies
│
├── MyApp.ServiceInterface/     # Service implementations
├── MyApp.ServiceModel/         # DTOs & API definitions
├── MyApp.Tests/                # Integration & unit tests
└── config/
│   └── deploy.yml              # Kamal deployment configuration
│──.github/                     # GitHub Actions workflows
└── workflows/
    ├── build.yml               # CI build and test
    ├── build-container.yml     # Container image build
    └── release.yml             # Production deployment with Kamal

Development Workflow

For detailed information on the development workflow, including starting development servers, generating TypeScript DTOs, database migrations, and testing, see:

Development Workflow Documentation

Configuration

For detailed configuration information, including app settings, SMTP email setup, and upgrading to enterprise databases (PostgreSQL/SQL Server/MySQL), see:

Configuration Documentation

Deployment

For deployment instructions, including Docker + Kamal setup and GitHub Actions configuration, see:

Deployment Documentation

Ideal Use Cases

SaaS applications requiring authentication
Admin dashboards with CRUD operations
Content-driven sites with dynamic APIs
Applications needing background job processing
Projects requiring both SSG benefits and API capabilities
Teams wanting type-safety across full stack

React Static