Modern Monorepo Template

A full-stack TypeScript monorepo template with React 19, React Router v7, Vite, TailwindCSS and NestJS.

Features

• 🚀 Modern Stack: React 19 + Vite + TailwindCSS
• ⚡ Full-stack: Frontend (SPA/SSR) + Backend (NestJS)
• 📦 Monorepo: Managed by TurboRepo with pnpm workspaces
• 🛠 Developer Experience: ESLint + Prettier + Husky
• 🔄 CI/CD Ready: Changesets for versioning and publishing

Tech Stack

Frontend

• React 19
• React Router v7
• Vite
• TailwindCSS
• TypeScript

Backend

• NestJS
• TypeScript

Tooling

• pnpm workspaces
• TurboRepo
• ESLint + Prettier
• Husky (Git hooks)
• Changesets (Version management)

Getting Started

Prerequisites

• Node.js >=20.12.0
• pnpm

Installation

pnpm install

Development

# Start all apps in development mode
pnpm dev

Production Build

pnpm build:prod

Project Structure

modern-monorepo-template/
├── apps/
│   ├── be/        # NestJS backend
│   ├── spa/       # SPA frontend (Vite)
│   └── ssr/       # SSR frontend (Vite)
├── packages/      # Shared packages
├── docs/          # Documentation
├── .eslintrc.js   # ESLint config
├── .prettierrc    # Prettier config
├── package.json   # Root package
└── turbo.json     # TurboRepo config

Application Details

SPA Frontend

• Development server: http://localhost:5173
• Build command: pnpm build:prod in spa directory

SSR Frontend

• Development server: http://localhost:5174
• Production server: http://localhost:3001
• Build command: pnpm build:prod in ssr directory

Backend API

• Development server: http://localhost:3000
• Production server: http://localhost:3000 (when deployed with PM2)

Deployment

1. Build production artifacts:

pnpm build:prod

2. Start with PM2:

pnpm pm2

Code Quality

• ESLint for static analysis
• Prettier for code formatting
• Husky for pre-commit hooks
• Conventional Commits for commit messages

Version Management

This project uses Changesets for version management:

1. Create changeset:

pnpm changeset

2. Version packages:

pnpm version

3. Publish:

pnpm release

License

ISC