Configuración básica del workspace de Nx con Angular

Domina el workspace de Nx desde cero: entiende su estructura monorepo, configura dependencias compartidas y añade Angular con soporte de Nx Console en Visual Studio Code. Conocer estas bases acelera el desarrollo, simplifica la CI con GitHub Actions y reduce código repetido.

¿Cómo se organiza el workspace de Nx?

La raíz del proyecto reúne carpetas y archivos clave para trabajar con múltiples aplicaciones y bibliotecas en un mismo repositorio. La lógica monorepo reduce duplicaciones y centraliza configuración.

¿Qué contiene la carpeta packages?

• Todas las aplicaciones viven en packages.
• Soporta Angular, backend Node.js y otras tecnologías.
• Incluye UI shared y bibliotecas reutilizables.
• Facilita escalar proyectos en un único workspace.

¿Qué papel cumplen .github y GitHub Actions?

• .github guarda la configuración de integración continua.
• Permite disparar GitHub Actions para tareas automatizadas.
• Asegura pipelines consistentes para todas las apps del monorepo.

¿Para qué sirve .nx y qué hay en nx.json?

• .nx mantiene el cache y metadatos para ejecuciones rápidas.
• Acelera comandos gracias al almacenamiento de resultados previos.
• nx.json define la configuración general del workspace.

¿Por qué usar un package.json compartido?

• Un único package.json para todas las aplicaciones.
• Centraliza dependencias y scripts de ejecución.
• Reduce duplicación y simplifica el mantenimiento.
• Escala mejor: a más apps, más ahorro de código.

¿Cómo agregar Angular y usar Nx Console en Visual Studio Code?

El workspace inicia vacío. Para que Nx entienda Angular se agrega su soporte y se instala el plugin Nx Console, lo que habilita una interfaz visual para crear, ejecutar y hacer build de proyectos.

¿Qué comando se usa para añadir Angular a Nx?

• Abre la terminal desde View o con Ctrl+Ñ.
• Ejecuta el comando para agregar la dependencia de Nx para Angular.

npx nx add

• Acepta la instalación del plugin sugerido.
• Verás Nx Angular en las dev dependencies y Nx Console instalado.

¿Qué aporta Nx Console para gestionar proyectos?

• Muestra todos los proyectos del workspace en una vista unificada.
• Permite crearlos, habilitarlos y ejecutar tareas con clics.
• Facilita build y despliegue a la cloud sin salir del editor.
• Acelera el flujo en Visual Studio Code con formularios guiados.

¿Qué señales confirman la integración correcta?

• Aparición de Nx Angular en las dev dependencies del proyecto.
• Nx Console visible en extensions y panel lateral.
• El workspace aún sin proyectos, listo para crearlos desde la consola o el plugin.

¿Qué habilidades y conceptos clave debes dominar?

Comprender estos elementos te prepara para crecer en monorepos con Nx y Angular:

• Workspace monorepo: una sola raíz para apps y libs.
• packages: ubicación estándar de aplicaciones y bibliotecas.
• .github + GitHub Actions: CI automatizada por repositorio.
• .nx: cache para acelerar comandos y tareas.
• nx.json: configuración centralizada del workspace.
• package.json compartido: dependencias y scripts comunes.
• npx nx add: comando para añadir soporte de Angular.
• Nx Angular: integración para que Nx entienda proyectos Angular.
• Nx Console: plugin en Visual Studio Code para gestionar proyectos.
• Atajo de teclado: abrir terminal con Ctrl+Ñ para ejecutar comandos.

¿Te gustaría ver cómo crear tu primer proyecto Angular dentro de Nx o cómo estructurar tus bibliotecas compartidas? Deja tus preguntas y experiencias en los comentarios.