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

Contenido del curso

Fundamentos del Monorepo con Nx

Creación de Estructura del Monorepo

Desarrollo de Funcionalidades

Calidad y Optimización

Herramientas Avanzadas de NX

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:52

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

Curso de Monorepositorios con NX

Clase 5 de 17

Clase 5 / 17

Recursos

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.

Fundamentos del Monorepo con Nx

Monorepo con Nx para Angular y Node

Monorepo con Nx: ventajas y cuándo usarlo

Instalación de entorno de desarrollo para Angular y Nx

Creación de workspace Nx con GitHub y Nx Cloud

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

Creación de Estructura del Monorepo

Creación de aplicaciones Angular en monorepo Nx

Librerías compartidas en Nx: Angular y TypeScript para múltiples apps

Integración de Node.js en monorepos con Nx

Componentes compartidos en monorepo Angular

Desarrollo de Funcionalidades

Servidor Node.js en memoria con NX y Postman

App Angular con componentes compartidos en NX

Dos apps Angular compartiendo componentes en Nx

Calidad y Optimización

Tests unitarios en monorepo con Nx

Análisis estático con Linter en proyectos Nx y Angular 17

Cómo conectar tu monorepo a Nx Cloud

Herramientas Avanzadas de NX

Tags y constraints en monorepos con Nx

GitHub Actions con Nx en tu monorepo

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

Progreso del curso

Fundamentos del Monorepo con Nx

Creación de Estructura del Monorepo

Desarrollo de Funcionalidades

Calidad y Optimización

Herramientas Avanzadas de NX

Recursos

Recursos