Turborepo Config Template

turborepo.md

Crear un monorepo con configuraciones compartidas, una aplicación Next.js, Prisma ORM con PostgreSQL y despliegue en Vercel implica el uso de herramientas como Turborepo o pnpm workspaces para gestionar el repositorio y Vercel/Prisma para la base de datos y el despliegue.  Aquí tienes una guía completa paso a paso:

I. Configuración Inicial del Monorepo

Utilizaremos Turborepo y pnpm workspaces como base para el monorepo. 

1. Instalar pnpm (si no lo tienes):

npm install -g pnpm

2. Crear el monorepo con Turborepo:

npx create-turbo@latest nombre-de-tu-monorepo
cd nombre-de-tu-monorepo

Sigue las indicaciones, seleccionando pnpm como gestor de paquetes. Esto creará una estructura básica con carpetas apps y packages y configuraciones iniciales.

3. Configurar Workspaces en pnpm-workspace.yaml(si no existe):

Asegúrate de que tu archivo pnpm-workspace.yamlen la raíz se vea así:yaml


packages:
   - "apps/*"
   - "packages/*"

II. Creación de Paquetes Compartidos

Crearemos paquetes para configuraciones compartidas (ESLint, TypeScript) y para la lógica de la base de datos con Prisma. 

A. Paquete de Base de Datos (@repo/db) 

1. Crear el paquete database:bash

mkdir -p packages/db
cd packages/db
pnpm init

2. Configurar package.json de @repo/db:

Añade un nombre de paquete con ámbito (scope), por ejemplo, @repo/db:

{
   "name": "@repo/db",
   "version": "0.0.0",
   "scripts": {
      "db:generate": "prisma generate",
      "db:migrate": "prisma migrate dev",
      "db:push": "prisma db push",
      "db:studio": "prisma studio"
   },
   "devDependencies": {
      "prisma": "latest"
   },
   "exports": {
      ".": "./src/client.ts"
   }
}

3. Inicializar Prisma en el paquete db:bash


pnpm install prisma --save-dev
npx prisma init --datasource-provider postgresql

Esto creará prisma/schema.prisma y un archivo .env en packages/db.

4. Definir un cliente Prisma singleton y exportarlo:

Crea un archivo src/client.ts en packages/dbpara exportar una instancia del cliente Prisma, lo cual ayuda con la conexión en entornos serverless de Vercel

// packages/db/src/client.ts
import { PrismaClient } from '@prisma/client';

const globalForPrisma = global as unknown as {
   prisma: PrismaClient | undefined;
};

export const prisma =
   globalForPrisma.prisma ??
   new PrismaClient({
   log: ['query'],
});

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

Elimina o ignora el .env de esta carpeta, ya que las variables de entorno serán gestionadas por Vercel y el archivo .env raíz. 

B. Paquetes de Configuración Compartida (@repo/eslint-config, @repo/typescript-config) Turborepo ya incluye estos paquetes por defecto al crearlo. Puedes personalizarlos según tus necesidades. La idea es que las aplicaciones (apps/*) extiendan estas configuraciones en sus respectivos package.json y tsconfig.json. 

III. Configuración de la Aplicación Next.js

Ahora configuraremos la aplicación Next.js dentro del monorepo.

1. Crear la aplicación Next.js (si no existe):

cd apps/web
npx create-next-app@latest .

Acepta las opciones por defecto (TypeScript, ESLint, App Router, etc.).

2. Instalar el paquete @repo/db en la aplicación web:

cd apps/web
pnpm add @repo/db

Esto añade "@repo/db": "workspace:*" a las dependencias de apps/web/package.json.

3. Configurar Next.js para transpilar paquetes del monorepo:

En apps/web/next.config.js, usa la opción transpilePackages para que Next.js pueda procesar los paquetes compartidos:

/** @type {import('next').NextConfig} */
const nextConfig = {
    transpilePackages: ["@repo/db", "@repo/ui", "...otros-paquetes"], // Añade tus paquetes
};

module.exports = nextConfig;

4. Usar Prisma en Next.js:

Ahora puedes importar y usar prisma en tus componentes o API routes.

// apps/web/app/page.tsx (Ejemplo de uso en un Server Component)
import { prisma } from '@repo/db/client';

export default async function Page() {
    const posts = await prisma.post.findMany(); // Asegúrate de tener el modelo Post en tu schema.prisma
	
	return (
		<div>
			<h1>Posts</h1>
			<ul>
				{posts.map((post) => (
					<li key={post.id}>{post.title}</li>
				))}
			</ul>
		</div>
	);
}

IV. Configuración y Despliegue en Vercel 

1. Crear la Base de Datos Postgres en Vercel:

* Sube tu monorepo a GitHub/GitLab/Bitbucket.
* Ve a tu dashboard de Vercel y crea un nuevo proyecto, importando tu repositorio.
* En la pestaña Storage del proyecto Vercel, haz clic en Connect Database.
* Selecciona Postgres y sigue los pasos para crear e integrar la base de datos.
* Vercel añadirá automáticamente la variable de entorno DATABASE_URL a tu proyecto.

2. Configuración Local de la Base de Datos:

* Instala la CLI de Vercel globalmente: npm i -g vercel@latest.
* Loguéate con vercel login.
* En la raíz de tu monorepo, ejecuta vercel linkpara vincular tu proyecto local con el de Vercel.
* Descarga las variables de entorno de Vercel a un archivo .env local: vercel env pull .env. Esto te dará la DATABASE_URL localmente.

3. Ejecutar Migraciones y Generar Cliente Prisma:

* Con la DATABASE_URL en tu .env raíz, vuelve a packages/db.
* Ejecuta las migraciones (primero define tu schema.prisma):

pnpm --filter @repo/db db:migrate --name init

* Genera el cliente Prisma localmente:

pnpm --filter @repo/db db:generate

* Puedes usar `pnpm --filter @repo/db db:studio` para ver los datos localmente.

4. Configuración de Despliegue en Vercel:

* En la configuración del proyecto en Vercel, en la sección Build & Development Settings, ajusta la configuración del monorepo.
* Root Directory: Configura la carpeta raíz como apps/web (o donde esté tu app Next.js principal).
* Install Command: pnpm install
* Build Command: pnpm exec turbo build o next build (si usas transpilePackages, next build debería bastar).
* Development Command: next dev

5. Asegurar la Generación de Prisma en el Despliegue:

Asegúrate de que el comando de build de tu app Next.js ejecute prisma generate para el paquete db antes de construir la aplicación. Turborepo maneja esto mediante dependencias de tareas si configuras el turbo.json de la raíz:

{
	"tasks": {
		"db:generate": {
			"outputs": ["node_modules/.prisma-client"] // Define salidas para caching
		},
		"build": {
			"dependsOn": ["^build", "db:generate"],
			"outputs": ["dist/", ".next/"]
		}
	}
}

Esto garantiza que el cliente Prisma esté generado antes de que la aplicación Next.js intente compilar.  ¡Con estos pasos, tendrás un monorepo funcional con Next.js, Prisma y PostgreSQL, listo para desplegar en Vercel!