React Router 7 Template

A modern, production-ready template for building full-stack React applications using React Router with comprehensive development tooling.

Features

• 🚀 Server-side rendering
• ⚡️ Hot Module Replacement (HMR)
• 📦 Asset bundling and optimization
• 🔄 Data loading and mutations
• 🔒 TypeScript by default
• 🎉 TailwindCSS v4 for styling
• 🧪 Vitest for unit testing
• 🎭 Playwright for E2E testing
• ✨ Biome for linting and formatting
• 💅 Prettier for code formatting
• 🔍 Knip for unused code detection
• ⚙️ GitHub Actions CI/CD pipeline
• 📖 React Router docs

Getting Started

Installation

Install the dependencies:

pnpm install

Development

Start the development server with HMR:

pnpm dev

Your application will be available at http://localhost:5173.

Development Commands

Code Quality

# Run linting (Biome)
pnpm lint

# Fix linting issues
pnpm lint:fix

# Check code formatting (Prettier)
pnpm prettier:check

# Fix code formatting
pnpm prettier:fix

# Fix all issues (lint + format + typecheck + knip)
pnpm fix

# Detect unused dependencies and code
pnpm knip

Testing

# Run all tests (unit + E2E)
pnpm test

# Run unit tests (Vitest)
pnpm test:unit

# Run unit tests in watch mode
pnpm test:unit:watch

# Run E2E tests (Playwright)
pnpm test:e2e

# Run E2E tests in UI mode
pnpm test:e2e:ui

# Debug E2E tests
pnpm test:e2e:debug

TypeScript

# Type checking
pnpm typecheck

Verification

# Run all quality checks and tests
pnpm verify

Building for Production

Create a production build:

pnpm build

Preview Production Build

Build and preview the production build locally:

pnpm preview

This will build the application and start the production server.

Deployment

Docker Deployment

To build and run using Docker:

docker build -t my-app .

# Run the container
docker run -p 3000:3000 my-app

The containerized application can be deployed to any platform that supports Docker, including:

• AWS ECS
• Google Cloud Run
• Azure Container Apps
• Digital Ocean App Platform
• Fly.io
• Railway

DIY Deployment

If you're familiar with deploying Node applications, the built-in app server is production-ready.

Make sure to deploy the output of npm run build

├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

Continuous Integration

This template includes a GitHub Actions CI/CD pipeline that automatically:

• Runs linting checks (Biome)
• Runs code formatting checks (Prettier)
• Performs type checking (TypeScript)
• Executes unit tests (Vitest)
• Executes E2E tests (Playwright)
• Checks for unused code (Knip)
• Builds the application

The CI pipeline runs on every push and pull request to ensure code quality.

Styling

This template comes with Tailwind CSS v4 already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

Tech Stack

• Framework: React Router 7
• Language: TypeScript
• Styling: TailwindCSS v4
• Testing: Vitest (unit) + Playwright (E2E)
• Linting: Biome
• Formatting: Prettier
• Unused Code Detection: Knip
• CI/CD: GitHub Actions

---

Built with ❤️ using React Router.