Introduccion a Turborepo - Gestion de Monorepo

Lo que aprenderas en este tutorial

✓ Configuracion de Turborepo
✓ Estructura de workspaces
✓ Configuracion de pipelines
✓ Uso del cache
✓ Cache remoto

Step 1: Creacion del proyecto

npx create-turbo@latest my-monorepo
cd my-monorepo

Step 2: Estructura de directorios

my-monorepo/
├── apps/
│   ├── web/          # Aplicacion Next.js
│   └── docs/         # Sitio de documentacion
├── packages/
│   ├── ui/           # Componentes UI compartidos
│   ├── config/       # Configuracion compartida
│   └── tsconfig/     # Configuracion TypeScript
├── turbo.json
└── package.json

Step 3: package.json raiz

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "^2.0.0"
  }
}

Step 4: Configuracion turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

Step 5: Paquetes compartidos

// packages/ui/package.json
{
  "name": "@repo/ui",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "exports": {
    ".": "./index.tsx",
    "./button": "./button.tsx"
  }
}

// packages/ui/button.tsx
export function Button({ children, onClick }: {
  children: React.ReactNode;
  onClick?: () => void;
}) {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
}

Step 6: Uso en aplicaciones

// apps/web/package.json
{
  "name": "web",
  "dependencies": {
    "@repo/ui": "workspace:*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui/button';

export default function Home() {
  return <Button>Click me</Button>;
}

Step 7: Ejecucion de comandos

# Construir todos los paquetes
turbo build

# Solo paquetes especificos
turbo build --filter=web

# Incluyendo dependencias
turbo build --filter=web...

# Servidor de desarrollo
turbo dev

# Limpiar cache
turbo clean

Step 8: Cache remoto

# Cache remoto de Vercel
npx turbo login
npx turbo link

# Configurar mediante variables de entorno
TURBO_TEAM=your-team
TURBO_TOKEN=your-token

Mejores practicas

✓ Dependencias comunes en la raiz
✓ tsconfig por cada paquete
✓ Paquetes internos con workspace:*
✓ Maximizar el uso del cache

Resumen

Turborepo es una herramienta de build rapida para monorepos. Reduce significativamente el tiempo de construccion mediante cache y ejecucion paralela.