Comenzando con Nx para la Gestión de Monorepos

Gestionar múltiples proyectos relacionados puede volverse complejo rápidamente. A medida que tu base de código crece, necesitas herramientas que ayuden a mantener la consistencia, compartir código de manera eficiente y optimizar los tiempos de compilación. Nx es una solución poderosa diseñada específicamente para estos desafíos.

Esta guía te mostrará cómo configurar y usar Nx para gestionar un monorepo de manera efectiva. Aprenderás los conceptos fundamentales, crearás un espacio de trabajo básico y entenderás cómo las características inteligentes de Nx pueden mejorar dramáticamente tu flujo de trabajo de desarrollo.

¿Qué es un Monorepo?

Un monorepo es una estrategia de control de versiones donde múltiples proyectos se almacenan en un solo repositorio. A diferencia de tener repositorios separados para cada proyecto (polyrepo), un monorepo contiene todos los proyectos relacionados en un solo lugar.

Beneficios de los Monorepos

• Compartir código - Reutiliza código entre proyectos sin gestión compleja de paquetes
• Cambios atómicos - Actualiza múltiples proyectos en un solo commit
• Herramientas consistentes - Aplica los mismos estándares de desarrollo en todos los proyectos
• Dependencias simplificadas - Gestiona las relaciones de proyectos en un solo lugar
• Releases coordinados - Sincroniza actualizaciones entre proyectos interdependientes

Sin embargo, los monorepos introducen desafíos como gestionar dependencias de compilación y escalar a medida que tu base de código crece. Aquí es donde entra Nx.

¿Qué es Nx?

Nx es un sistema de compilación extensible diseñado específicamente para la gestión de monorepos. Originalmente desarrollado para aplicaciones Angular, Nx ahora soporta múltiples frameworks frontend y backend incluyendo React, Vue, Node.js y más.

Características Clave de Nx

• Caché inteligente - Evita recompilar código sin cambios
• Gráfico de dependencias - Visualiza las relaciones entre proyectos
• Comandos affected - Solo compila y prueba lo que está impactado por tus cambios
• Generadores de código - Crea estructuras de proyecto consistentes
• Plugins extensibles - Soporta varios frameworks y herramientas

Configurando tu Primer Espacio de Trabajo Nx

Vamos a crear un espacio de trabajo Nx básico con una aplicación React y una biblioteca compartida.

Prerrequisitos

• Node.js (v14 o posterior)
• npm o yarn

Creando un Espacio de Trabajo Nx

# Instalar la CLI de Nx globalmente (opcional)
npm install -g nx

# Crear un nuevo espacio de trabajo
npx create-nx-workspace@latest my-workspace

Durante la configuración, se te pedirá que elijas:

1. Qué stack usar (selecciona “React”)
2. Nombre de la aplicación (ej. “web-app”)
3. Formato de estilos (CSS, SCSS, etc.)
4. Configuración de Nx Cloud (opcional pero recomendado para proyectos de equipo)

Esto crea un espacio de trabajo con la siguiente estructura:

my-workspace/
├── apps/
│   └── web-app/
├── libs/
├── nx.json
├── package.json
└── tsconfig.base.json

Entendiendo la Estructura del Espacio de Trabajo

• apps/ - Contiene tus aplicaciones (frontend, backend, móvil)
• libs/ - Contiene bibliotecas de código compartido usadas entre aplicaciones
• nx.json - Configura el comportamiento de Nx y plugins
• package.json - Gestiona las dependencias para todo el espacio de trabajo

Agregando Proyectos a tu Espacio de Trabajo

Ahora vamos a agregar una biblioteca de UI compartida y ver cómo Nx gestiona las dependencias.

Creando una Biblioteca Compartida

nx g @nx/react:lib ui-components

Esto crea una biblioteca en libs/ui-components/ que puede ser importada por cualquier aplicación en tu espacio de trabajo.

Creando un Componente en la Biblioteca

nx g @nx/react:component button --project=ui-components --export

Esto genera un componente Button en tu biblioteca de UI y lo exporta para uso en otros proyectos.

Usando la Biblioteca en tu Aplicación

Edita tu aplicación para usar el nuevo componente:

// apps/web-app/src/app/app.tsx
import { Button } from '@my-workspace/ui-components';

export function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Button>Click me</Button>
    </div>
  );
}

Ejecutando Tareas con Nx

Nx proporciona una forma unificada de ejecutar tareas en todos tus proyectos.

Comandos Comunes

# Iniciar el servidor de desarrollo
nx serve web-app

# Compilar la aplicación
nx build web-app

# Ejecutar pruebas
nx test web-app

# Hacer lint del código
nx lint web-app

Ejecutando Tareas para Todos los Proyectos

nx run-many --target=build --all

Aprovechando las Características Inteligentes de Nx

El poder de Nx se hace evidente a medida que tu espacio de trabajo crece. Exploremos sus características más valiosas.

Visualizando Dependencias de Proyectos

nx graph

Esto abre una visualización interactiva de las dependencias de tus proyectos, ayudándote a entender la arquitectura de tu monorepo.

Entendiendo Proyectos Afectados

Cuando haces cambios, Nx puede determinar qué proyectos están afectados:

nx affected:graph

Esto muestra solo los proyectos impactados por tus cambios recientes.

Compilando Solo lo que Cambió

nx affected --target=build

Esto compila solo los proyectos afectados por tus cambios, ahorrando tiempo significativo en pipelines de CI/CD.

Caché para Velocidad

Nx automáticamente cachea los resultados de las tareas. Si ejecutas la misma tarea con las mismas entradas, Nx usa el resultado cacheado en lugar de ejecutarla nuevamente:

# Primera ejecución (ejecuta la tarea)
nx build web-app

# Segunda ejecución (usa caché)
nx build web-app

Configuración del Espacio de Trabajo Nx

El archivo nx.json controla cómo se comporta Nx. Aquí hay una configuración básica:

{
  "npmScope": "my-workspace",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

Configuraciones clave:

• npmScope - El prefijo para importar bibliotecas
• affected.defaultBase - La rama de git contra la cual comparar
• cacheableOperations - Tareas que deben ser cacheadas
• dependsOn - Dependencias de tareas (ej. compilar bibliotecas antes que aplicaciones)

Ejemplo del Mundo Real: Aplicación Full-Stack

Vamos a crear un ejemplo más completo con un frontend React y un backend Node.js:

# Crear una app React
nx g @nx/react:app client

# Crear una API Node.js
nx g @nx/node:app api

# Crear una biblioteca de tipos compartidos
nx g @nx/js:lib shared-types

Esto te da un espacio de trabajo con:

1. Una aplicación cliente React
2. Un servidor API Node.js
3. Una biblioteca compartida para tipos comunes

Puedes ejecutar ambas aplicaciones simultáneamente:

nx run-many --target=serve --projects=api,client --parallel

Conclusión

Nx hace que la gestión de monorepos sea sencilla y eficiente. Al manejar la complejidad de las dependencias de proyectos y la optimización de compilación, te permite enfocarte en escribir código en lugar de gestionar la estructura de tu repositorio. Comienza con una configuración simple como se muestra en esta guía, y expande a medida que tu proyecto crezca.

Preguntas Frecuentes