Domina los Monorepos con Nx

¡Bienvenido/a a la serie de blogs "Domina los Monorepos con Nx"! Una guía práctica y progresiva para construir, escalar y desplegar monorepositorios modernos con Nx y Angular. A lo largo de tres partes, te llevaremos desde los conceptos básicos hasta la configuración de un pipeline de CI/CD profesional.

• Parte 1: Introducción práctica a Nx y la arquitectura Monorepo.

• Parte 2: Arquitectura y librerías compartidas (Enterprise Patterns).

• Parte 3: Integración continua, tests y despliegue.

¡Empecemos!

📝 Parte 1: Por qué usar Nx (y no mil repos separados) — Crea tu primer monorepo paso a paso

¿Alguna vez has tenido que actualizar una dependencia en diez repositorios diferentes? ¿O copiar y pegar un componente de un proyecto a otro, solo para que ambos se desincronicen a las pocas semanas? Si la respuesta es sí, estás en el lugar correcto. En esta primera parte, descubriremos cómo los monorepos y herramientas como Nx resuelven estos problemas de raíz.

1. ¿Qué es un monorepo y por qué deberías usarlo?

Un monorepo (del griego mono, "único", y repo, "repositorio") es una estrategia de desarrollo donde el código de múltiples proyectos se almacena en un único repositorio de control de versiones.

Monorepo vs. Multirepo

• Multirepo (el enfoque tradicional): Cada aplicación, librería o servicio tiene su propio repositorio. Es simple al principio, pero puede volverse un caos a medida que los proyectos crecen y necesitan compartir código.

• Monorepo: Todo vive junto. Esto no significa que sea un solo proyecto gigante y monolítico. Al contrario, es un conjunto de proyectos independientes y bien definidos que conviven en un mismo espacio.

Beneficios clave de un Monorepo

• Reutilización de código atómica: Compartir componentes, servicios o utilidades entre proyectos es tan simple como un import. No más paquetes NPM privados o submódulos de Git.

• Consistencia en el ecosistema: Una única versión de las dependencias (como Angular o RxJS) para todos los proyectos, lo que elimina el "infierno de las dependencias". Las herramientas de linting y formateo son consistentes en todo el workspace.

• CI/CD unificado y más inteligente: En lugar de mantener pipelines separados para cada repo, tienes uno centralizado. Herramientas como Nx pueden detectar qué proyectos han sido afectados por un cambio y solo ejecutar tests y builds para ellos, ahorrando tiempo y recursos computacionales.

• Refactorización a gran escala: ¿Necesitas cambiar el nombre de una función en una librería compartida? Tu IDE puede encontrar y actualizar todas sus usages a través de todas las aplicaciones del monorepo en una sola operación.

Grandes empresas como Google, Meta (Facebook), y Airbnb utilizan monorepos para gestionar la complejidad de sus enormes bases de código. Con Nx, esta estrategia está al alcance de cualquier equipo.

2. Instalación y setup del workspace Nx

Vamos a crear nuestro primer monorepo. Asegúrate de tener Node.js (LTS) instalado y abre tu terminal.

Ejecuta el siguiente comando para iniciar el asistente de creación de Nx:

npx create-nx-workspace@latest

El asistente te hará algunas preguntas. Para este tutorial, elige:

1. Where would you like to create your workspace? my-org (o el nombre que prefieras).

2. Which stack do you want to use? angular.

3. What feature would you like to add? none (o la que necesites, pero para empezar none está bien).

4. Default stylesheet format? scss (o tu preferencia).

5. Enable distributed caching to make your CI faster? No (lo veremos en la Parte 3).

Una vez que termine, tendrás una estructura de carpetas como esta:

my-org/
├── apps/              # Aquí vivirán tus aplicaciones (Angular, NestJS, etc.)
├── libs/              # Aquí vivirán tus librerías compartidas
├── tools/             # Herramientas de scripting y configuración
├── nx.json            # Configuración principal de Nx
├── package.json       # Dependencias y scripts de npm
└── tsconfig.base.json # Configuración base de TypeScript

Archivos de configuración clave

• nx.json: El corazón de Nx. Define los "targets" por defecto (como build, test), las dependencias entre proyectos, y la configuración de caché.

• project.json: Cada proyecto (aplicación o librería) dentro de apps/ y libs/ tiene su propio project.json. Este archivo describe cómo construir, testear, y servir ese proyecto específico.

3. Creación de aplicaciones Angular dentro del monorepo

Nx ya nos ha creado una aplicación por defecto, pero crear una nueva es muy fácil. Usemos un generador de Nx para añadir una segunda aplicación.

# Navega dentro del workspace
cd my-org

# Genera una nueva aplicación Angular llamada "admin-portal"
nx g @nx/angular:app admin-portal

Nx se encargará de crear todos los archivos necesarios dentro de apps/admin-portal y actualizará la configuración. Una de las grandes ventajas es que todas las dependencias se gestionan en el package.json raíz. No hay un node_modules por cada aplicación, ¡solo uno para todo el workspace!

4. Configuración básica de ejecución

Nx utiliza un sistema de "targets" para ejecutar tareas. Los targets más comunes son serve, build, test, y lint. La sintaxis es simple: nx <target> <project-name>.

# Servir la aplicación principal en modo desarrollo
nx serve my-org

# Construir el portal de administración para producción
nx build admin-portal --configuration=production

# Ejecutar los tests unitarios de la app principal
nx test my-org

# Ejecutar el linter en todos los proyectos
nx run-many --target=lint --all

5. Primer vistazo a “affected” y caching inteligente

Aquí es donde Nx brilla. Imagina que haces un cambio en una librería compartida. ¿Cómo sabes qué aplicaciones tienes que volver a testear y construir? Nx lo sabe por ti.

El comando affected solo ejecuta tareas en los proyectos que han sido afectados por tus cambios desde la última confirmación en Git (o comparado con otra rama).

1. Haz un cambio en un archivo de la app my-org, por ejemplo, en apps/my-org/src/app/app.component.ts.

2. Ahora, ejecuta este comando:

nx affected:build

Nx analizará el grafo de dependencias, verá que solo my-org ha cambiado, y construirá únicamente ese proyecto. Si no has cambiado nada, ¡no construirá nada! Esto es increíblemente potente para la Integración Continua (CI).

🎯 Objetivo cumplido:
¡Felicidades! Ahora tienes un monorepo Nx funcional con una aplicación Angular base. Has aprendido a crear proyectos, ejecutar tareas y has tenido un primer vistazo al poder de los comandos affected.

En la Parte 2, daremos un paso más allá y diseñaremos una arquitectura escalable al estilo enterprise, creando librerías compartidas para la UI, el acceso a datos y más. ¡No te la pierdas!