NestJS React Monorepo Template

Template de monorepo con NestJS (backend) y React + Vite (frontend) usando pnpm workspaces y Turborepo para gestión eficiente de dependencias y tareas paralelas.

🏗️ Estructura del Proyecto

nestjs-react-monorepo-template/
├── apps/
│   ├── api/              # Backend NestJS + Prisma + SQLite
│   └── client/           # Frontend React + Vite + Tailwind CSS
├── package.json          # Scripts principales del monorepo
├── turbo.json           # Configuración de Turborepo
└── pnpm-workspace.yaml  # Configuración de workspaces

📋 Requisitos Previos

• Node.js: >=18
• pnpm: >=8 (requerido, no usar npm ni yarn)

# Instalar pnpm si no lo tienes
npm install -g pnpm@latest

🚀 Instalación y Configuración

1. Clonar e instalar dependencias

git clone <tu-repositorio>
cd nestjs-react-monorepo-template
pnpm install

2. Configurar variables de entorno

# Copiar el archivo de ejemplo
cp .env.example .env

# Editar las variables según tu configuración

Variables principales:

NODE_ENV=development
PORT=3000                                    # Puerto del backend
DATABASE_URL="file:./dev.db"               # Base de datos SQLite
FRONTEND_URL=http://localhost:5173          # URL del frontend
JWT_SECRET=your_super_secret_jwt_key_here   # Cambiar en producción

3. Configurar base de datos

# Generar cliente de Prisma
pnpm prisma:generate

# Aplicar migraciones a la base de datos
pnpm prisma:push

# (Opcional) Abrir Prisma Studio para ver la BD
pnpm prisma:studio

🔧 Comandos de Desarrollo

Desarrollo completo (recomendado)

# Inicia API (puerto 3000) y Client (puerto 5173) en paralelo
pnpm dev

Desarrollo individual

# Solo backend
pnpm --filter=api dev

# Solo frontend  
pnpm --filter=client dev

URLs de desarrollo

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000
• Swagger Docs: http://localhost:3000/api (si ENABLE_SWAGGER=true)
• Prisma Studio: http://localhost:5555

🏗️ Construcción y Producción

# Construir todas las aplicaciones
pnpm build

# Construir para producción (optimizado)
pnpm build:prod

# Vista previa del build completo
pnpm preview:full

# Solo iniciar el backend en producción
pnpm start

# Solo servir el frontend built
pnpm serve:client

🗄️ Comandos de Base de Datos (Prisma)

# Desarrollo
pnpm prisma:generate          # Generar cliente Prisma
pnpm prisma:push              # Sincronizar schema con BD (desarrollo)
pnpm prisma:studio            # Abrir Prisma Studio

# Migraciones
pnpm prisma:migrate           # Crear nueva migración
pnpm prisma:migrate:deploy    # Aplicar migraciones (producción)
pnpm prisma:migrate:status    # Ver estado de migraciones
pnpm prisma:migrate:reset     # Resetear BD y aplicar migraciones

# Utilidades
pnpm prisma:format            # Formatear schema.prisma
pnpm prisma:validate          # Validar schema
pnpm prisma:seed              # Ejecutar seeds

🧪 Testing y Calidad

# Ejecutar todos los tests
pnpm test

# Linting en todas las apps
pnpm lint

# Formateo de código
pnpm format

# Limpiar builds
pnpm clean

Tests individuales

# Backend tests
pnpm --filter=api test
pnpm --filter=api test:watch
pnpm --filter=api test:e2e

# Frontend tests
pnpm --filter=client test

📦 Gestión de Dependencias

Dependencias compartidas (herramientas de desarrollo)

# Instalar en el root para todo el monorepo
pnpm add -D <package>        # DevDependency compartida
pnpm add <package>           # Dependency compartida

Dependencias específicas

# Solo para el backend
pnpm add --filter=api <package>

# Solo para el frontend
pnpm add --filter=client <package>

# Para múltiples apps
pnpm add --filter=api --filter=client <package>

🔧 Stack Tecnológico

Backend (API)

• Framework: NestJS 10
• Base de datos: SQLite + Prisma ORM
• Documentación: Swagger/OpenAPI
• Testing: Jest
• Validación: class-validator + class-transformer

Frontend (Client)

• Framework: React 19 + TypeScript
• Build: Vite 7
• Routing: React Router 7
• Styling: Tailwind CSS 4
• Components: Radix UI + Lucide Icons
• Testing: Vitest

Herramientas de Desarrollo

• Monorepo: pnpm workspaces + Turborepo
• Linting: ESLint
• Formatting: Prettier
• Type checking: TypeScript

🚢 Despliegue

Producción completa

# Aplicar migraciones + Build + Start
pnpm deploy:prod

Docker (próximamente)

# TODO: Añadir Dockerfiles y docker-compose

📁 Estructura de Archivos Detallada

apps/
├── api/                     # Backend NestJS
│   ├── src/
│   │   ├── modules/         # Módulos de la aplicación
│   │   ├── common/          # Utilidades compartidas
│   │   │   ├── dto/         # DTOs base
│   │   │   ├── interfaces/  # Interfaces TypeScript
│   │   │   ├── services/    # Servicios compartidos
│   │   │   └── utils/       # Utilidades
│   │   └── main.ts
│   ├── prisma/
│   │   └── schema.prisma    # Schema de base de datos
│   └── test/                # Tests E2E
└── client/                  # Frontend React
    ├── src/
    │   ├── components/      # Componentes React
    │   │   └── ui/          # Componentes UI base
    │   ├── pages/           # Páginas de la aplicación
    │   ├── routes/          # Configuración de rutas
    │   ├── hooks/           # Custom hooks
    │   └── lib/             # Utilidades
    └── public/              # Assets estáticos

🤝 Contribución

1. Usa conventional commits para los mensajes:

   feat: nueva funcionalidad
   fix: corrección de bug
   change: cambios que no son feat ni fix
   docs: cambios en documentación

2. Instala dependencias en el workspace correcto según las reglas del monorepo

3. Ejecuta pnpm lint y pnpm test antes de hacer commit

📄 Licencia

MIT License

---

🆘 Troubleshooting

Error: "Cannot find module '@prisma/client'"

pnpm prisma:generate

Error: "Port 3000 already in use"

# Cambiar PORT en .env o matar el proceso
lsof -ti:3000 | xargs kill -9  # macOS/Linux
netstat -ano | findstr :3000   # Windows

Error: "pnpm command not found"

npm install -g pnpm@latest

Dependencias desactualizadas

# Ver qué está desactualizado
pnpm outdated

# Actualizar todas las dependencias
pnpm update --recursive

nestjs-react-monorepo-template