Profile Software Services

Nx para tu Monorepo

  • Ricardo Roldán

    • Tradicionalmente, los equipos de software organizan cada proyecto en su propio repositorio, este enfoque que tiene sus ventajas, está cambiando por el enfoque opuesto, un único repositorio que contiene el código fuente de múltiples proyectos. Este modelo se conoce como Monorepo y ha ganado popularidad gracias a herramientas como Nx Monorepo.

    ¿ Qué es un monorepo ?

    Un único repositorio donde unificamos múltiples proyectos que podrían ser independientes en su despliegue o ejecución. Todos coexisten en una base de código unificada compartiendo dependencias y configuraciones.

    ¿Qué es Nx?

    Es un conjunto de herramientas de gestión para construir, probar y desplegar múltiples aplicaciones y librerías en un mismo repositorio. Nx Monorepo hace posible que trabajar con grandes bases de código y múltiples equipos sea mucho más manejable y productivo.

    Construido de una manera modular, un núcleo que puedes instalar con una funcionalidad básica y puedes añadir plugins opcionalmente muy específicos.

    Entorno de Desarrollo:

    Herramientas Nx monorepo

    Nx Monorepo

    Ejemplo práctico de Nx Monorepo

    Entramos ahora en la parte práctica vamos a crear un nuevo workspace:

    npx create-nx-workspace

    Este comando usa la última versión estable v21.1.2
    Un asistente nos guiará a través del proceso, debemos indicar el nombre del workspace y varias opciones por defecto para su creación.

    Una vez generado el repositorio instalamos complementos en nuestro IDE, que nos ayudan a gestionar nuestro monorepo como la Nx Console, la integración con IA de Cursor con el contexto Nx y el MCP server nx-mcp.

    Utilizando las herramientas configuradas para utilizar la IA, en este caso Nx MCP server vamos a crear en nuestro repositorio un nuevo proyecto React Typescript usando Vitest y Playwright para test.

    use mcp tool for create demo-app a React TypeScript application

test Vitest and Playwright

    Nos va indicando los pasos y nosotros decidimos la ejecución del paso. Finalmente revisaremos en el último paso las opciones seleccionadas y pulsaremos el botón de Generar.

    Una vez generada la aplicación podemos usar la herramienta Nx Console para ejecutar comandos pare la revisión estática de código que ya viene preconfigurado o lanzar los test unitarios.

    Nx optimiza el rendimiento en CI/CD con Task Caching detectando automáticamente cuándo una tarea, una compilación o una prueba se ha ejecutado previamente y puede reutilizar el resultado de la caché, acelerando las builds y ejecuciones de tests unitarios.

    npx nx lint demo-app && npx nx test demo-app

    Resultado de la ejecución de los comandos lint y test previamente cacheados.

    Nx gestiona las dependencias unificando su configuración en un único lugar no teniendo que configurar dichas dependencias por cada aplicación.

    // package.json app

{

  "name": "@nx-repository/demo-app",

  "version": "0.0.1",

  "private": true,

  "nx": {

    "name": "demo-app"

  }

}

    Tiene una especial relevancia unificar la configuración de los analizadores estáticos de código como por ejemplo ESLint, en un solo sitio del Nx monorepo, de esta forma garantizamos que todo nuestro código cumple con las reglas establecidas y evitamos fallos que se podrían producir al tener múltiples configuraciones en cada proyecto.

    // eslint.config.mjs (app)

import nx from "@nx/eslint-plugin";

import baseConfig from "../../eslint.config.mjs";

export default [

  ...baseConfig,

  ...nx.configs["flat/react"],

  {

    files: [

      "**/!*.ts",

      "**/!*.tsx",

      "**/!*.js",

      "**/!*.jsx"

    ],

    // Add or modify ESLint rules for these files

    rules: {}

  }

];

    Finalmente con el comando preview podemos visualizar la aplicación demo generada en un navegador.

    A medida que va creciendo el código en las organizaciones optimizar los ciclos de CI/CD y unificar dependencias se ha convertido en un camino crítico que debemos optimizar para mejorar nuestra productividad.

    Enlaces de interés para aprender más sobre Nx Monorepo

    Salir de la versión móvil