Creando un monorepo para una aplicación Node JS (NestJS + Angular)

En entornos empresariales, es común crear un repositorio de código en Git para la web, y al menos uno más cuando se trabaja con un monolito. Si hablamos de microservicios, el backend podría estar dividido en varios repositorios independientes.

Una alternativa interesante son los monorepos, que permiten gestionar múltiples proyectos o servicios dentro de un solo repositorio.

En mi caso, estoy trabajando en una aplicación personal para gestionar mis redes sociales y he decidido crearla como un monorepo. Ya que tengo experiencia con Angular, aprovecharé la oportunidad para explorar NestJS en el backend, en lugar de optar por una solución basada únicamente en Node.js.

Escoger un framework para gestionar monorepos

Existen varias alternativas a considerar cuando se trata de gestionar monorepos. Cada opción tiene sus ventajas e inconvenientes, por lo que la elección dependerá de los requisitos específicos del proyecto. Algunas de las soluciones más populares son:

1. Nx: Es una de las opciones más completas y populares. Está basado en un sistema de plugins que permite añadir la generación de código para diferentes frameworks, como Angular, React y NestJS, facilitando la integración y gestión de múltiples tecnologías dentro de un mismo repositorio.

2. Lerna: Especialmente útil para la publicación de paquetes NPM de manera sencilla. Sin embargo, para la creación de proyectos, Lerna requiere configuración adicional y puede no ser tan optimizado para proyectos más complejos o con múltiples tecnologías.

3. Rush.js: Destaca por su robustez en la gestión de grandes repositorios, siendo ideal para equipos grandes o proyectos de gran escala. Se enfoca en optimizar los flujos de trabajo y reducir la complejidad al escalar monorepos. Aunque es más personalizable, requiere más trabajo manual, especialmente cuando se trata de compartir código entre repositorios o gestionar dependencias de manera avanzada.

En este caso elegiré Nx el ser el que más soporte tiene por la comunidad.

Fuente: npm-compare.com

Instalación Nx

Para instalar Nx es necesario cumplir los siguientes requisitos:

• Node JS: Puede usarse el paquete de instalación oficial o bien utilizar gestores como NVM.
• Git. Para subir el código generado a nuestro repositorio de código: Github, Gitlab, Bitbucket, etc.

Una vez instalado Node JS podemos utilizar nuestro gestor de paquetes favorito para instalar Nx. En este caso usaré NPM:

npm install -g create-nx-workspace

Creando el workspace

El primer paso es crear el workspace. En la práctica será el directorio que contendrá el proyecto. Simplemente ejecutamos el comando:

npx create-nx-workspace mymonorepo --preset=empty

 NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Which CI provider would you like to use? · skip

✔ Would you like remote caching to make your build faster? · skip

 NX   Creating your v20.3.0 workspace.

✔ Installing dependencies with npm

✔ Successfully created the workspace: mymonorepo.

 NX   Unable to resolve empty:preset.

The "empty" package does not support Nx generators.

Pass --verbose to see the stacktrace.

 NX   Failed to apply preset: empty

Podemos ignorar el warning. Ahora entramos en el directorio que hemos creado. En este caso 

cd mymonorepo

Añadimos los plugins de Angular y Nest.

npm i @nx/angular @nx/nest --save-dev


Ahora ya podemos crear el frontend y el backend:


nx generate @nx/angular:app frontend

 NX  Generating @nx/angular:application

✔ Which stylesheet format would you like to use? · scss

✔ Which unit test runner would you like to use? · jest

✔ Which E2E test runner would you like to use? · playwright

✔ Which bundler do you want to use to build the application? · esbuild

✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) · false

 NX   👀 View Details of frontend

Run "nx show project frontend" to view details about this project.

nx generate @nx/angular:app frontend

 NX  Generating @nx/nest:application

✔ Which linter would you like to use? · eslint

✔ Which unit test runner would you like to use? · jest

 NX   👀 View Details of backend-e2e

Run "nx show project backend-e2e" to view details about this project.

 NX   👀 View Details of backend

Run "nx show project backend" to view details about this project.

Listo ya tenemos el mororepo con dos aplicaciones Angular y NestJS.

Para ejecutar ambas aplicaciones en modo de desarrollo:

• Frontend: nx serve frontend
• Backend: nx serve backend

 

Recursos adicionales

• Documentación oficial de Nx: https://nx.dev/

Siguiendo estos pasos, podrás crear un monorepo funcional con Angular y NestJS, lo que te permitirá gestionar de manera eficiente proyectos complejos y compartir código entre el frontend y el backend. Recuerda consultar la documentación oficial de Nx para obtener información más detallada y opciones de configuración avanzadas.