Configuración fácil de ESLint, Cypress, Storybook y Prettier en proyectos Angular con Nx

Como entusiasta de Angular, suelo crear soluciones compuestas por múltiples proyectos, como aplicaciones y librerías. El CLI de Angular es una herramienta clave para gestionar estos proyectos mediante los workspaces de Angular.

A menudo uso Angular junto con otras herramientas, entre ellas:

ESLint: ayuda con el análisis estático de código.
Prettier: simplifica el formateo de código.
Jest y Cypress: permiten ejecutar pruebas de componentes y pruebas end-to-end (E2E).
Storybook: ayuda a desarrollar componentes aislados, lo cual es muy útil para pruebas y documentación.

Estas herramientas son fundamentales en mis proyectos para asegurar la calidad y agilizar el desarrollo, haciéndolo seguro y sencillo.

Como uso Angular CLI, voy a mostrar el proceso para configurar estas herramientas en un proyecto pequeño y analizar cuánto trabajo implica:

El escenario

Estoy creando una solución para una aplicación de la NBA que tiene dos módulos, Players y Teams, además de una librería de componentes de interfaz llamada NBA UI.

Al usar Angular CLI, necesito dar los siguientes pasos en mis proyectos:

Crear el workspace: sirve para almacenar múltiples proyectos.
Crear la aplicación: la app principal en Angular.
Crear la librería: una librería de UI.

ng new --create-application=false nba 
ng generate application nba-web 
ng generate library nba-ui --prefix nba

Bien, ya creamos los proyectos. Ahora tenemos que configurar las herramientas tanto para el proyecto web como para nba-ui.

Para no hacer el artículo demasiado largo, haré esta configuración solo para nba-web:

Configurar ESLint, Prettier, Jest, Cypress y Storybook

ESLint

Angular ESLint incluye schematics para facilitar la instalación:

ng add @angular-eslint/schematics

Lee más sobre cómo configurar ESLint en Angular

Prettier

Requiere instalar el paquete de Prettier y agregar algunos archivos de configuración:

npm install prettier --save-dev

Agrega los archivos .prettierrc.json y .prettierignore en la raíz con reglas básicas, y configura la tarea de npm dentro de package.json.

Lee más sobre cómo configurar Prettier en Angular

Jest

De forma parecida a Prettier, tenemos que instalar el paquete y crear algunos archivos de configuración.

npm install jest jest-preset-angular --save-dev

Crea un archivo setup-jest.ts en la raíz e importa jest-preset-angular:

import 'jest-preset-angular';

Edita el package.json para agregar la configuración de Jest y actualizar el script que ejecuta las pruebas:

"scripts": {
    "test": "jest"
  }
{
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/setup-jest.ts"
  }
}

Lee más sobre cómo integrar Jest en Angular

Cypress

Aquí el proceso es más sencillo porque, después de instalar el paquete, podemos abrir un asistente con los pasos de configuración.

Instalamos Cypress en el proyecto nba-web con el siguiente comando:

npm install cypress -D

Y abrimos Cypress:

npx cypress open

Seguimos el asistente de configuración y elegimos el tipo de pruebas que queremos usar, ya sean pruebas end-to-end (E2E) o pruebas de componentes.

Lee más sobre cómo instalar Cypress en Angular

Storybook

Al igual que con Cypress, el paquete se encarga de la configuración, así que solo necesitas ejecutar este comando:

npx storybook@latest init

Lee más sobre Storybook en Angular

Bien, apenas empezamos con el proyecto nba-web y todavía nos falta la librería nba-ui. ¿Qué pasa si mañana queremos dividir nuestro proyecto o agregar más aplicaciones a nuestro workspace y sumarles las mismas herramientas?

Demasiado trabajo manual, ¿verdad? Por suerte, podemos manejar todas estas configuraciones de forma simple usando Nx.

¿Qué es Nx?

Es un sistema de compilación y gestión de monorepos que nos simplifica la vida al trabajar con proyectos independientes o monorepos sin complicaciones.

Ayuda a configurar de forma rápida y sencilla herramientas como Cypress, Jest, Storybook, ESLint y muchas más en nuestras aplicaciones. Nx ofrece plugins para varios frameworks, pero en este caso me enfocaré en Angular.

Conoce más sobre los paquetes de Nx

La mejor forma de entender Nx y ver lo fácil que resulta trabajar con él es repetir los mismos pasos anteriores, pero apoyándonos en sus comandos. Vamos a empezar.

Configurar el workspace

Nx ofrece un comando para crear el workspace con opciones para React, Node o Angular.

Para crear el espacio de trabajo, ejecutamos el comando npx create-nx-workspace@latest, que nos pide elegir las opciones iniciales:

El nombre de nuestro workspace: nba
¿Qué tecnología usar?: Angular
¿Qué tipo de workspace?: ¿una aplicación única (standalone) o múltiples proyectos? Como queremos una aplicación de Angular junto a una librería de UI, elegimos integrated.
Luego pregunta sobre la configuración de nuestra app de Angular, similar a lo que hace Angular CLI, incluyendo si queremos que sea una aplicación basada en componentes standalone (sin módulos).

Nx también permite habilitar caché distribuida para acelerar nuestros procesos de build y CI, la cual es gratuita para proyectos de código abierto.

Crea tu workspace ejecutando el siguiente comando: npx create-nx-workspace@latest

El resultado es un workspace listo con Angular, Cypress, ESLint y Prettier usando un solo comando.

Crear la librería

Nx ofrece una variedad de comandos para crear librerías, aplicaciones, generar componentes y más.

Entra al directorio nba y crea la librería usando @nx/angular con el parámetro lib y el nombre de la librería:

cd nba
nx g @nx/angular:lib nba-ui

El resultado es una librería configurada con ESLint y Jest sin ningún esfuerzo adicional.

¿Y qué pasa con Storybook?

Nx cuenta con una lista de paquetes para configurar herramientas en nuestros proyectos con un solo comando, como por ejemplo Storybook.

Vamos a configurar Storybook sin dolores de cabeza ejecutando el comando de configuración de Nx en la librería nba-ui:

nx g @nx/angular:storybook-configuration nba-ui

El asistente nos preguntará si queremos configurar Cypress para ejecutar pruebas contra la instancia de Storybook o si queremos generar las historias de nuestros componentes automáticamente, lo que ahorra muchísimo tiempo.

Veamos cómo Nx nos ayuda a ahorrar tiempo generando historias.

Primero, crea un componente de navegación y uno de botón usando Nx, de forma similar a angular/cli, usando el flag --standalone y especificando el proyecto:

nx g @nx/angular:component navigation --standalone --project nba-ui 
>  NX  Generating @nx/angular:component
CREATE libs/nba-ui/src/lib/navigation/navigation.component.scss
CREATE libs/nba-ui/src/lib/navigation/navigation.component.html
CREATE libs/nba-ui/src/lib/navigation/navigation.component.spec.ts
CREATE libs/nba-ui/src/lib/navigation/navigation.component.ts
dany ~/Desktop/nba [main] $

Abre el archivo navigation.component.html y agrega el siguiente template:

<nav>
  <a *ngFor="let navItem of navOptions">{{navItem}}</a>
</nav>

Para aplicar los cambios deseados, abre tu archivo navigation.component.ts y agrega el siguiente código:

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
 
@Component({
  selector: 'nba-navigation',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
})
export class NavigationComponent {
 
  @Input() navOptions = [ 'home', 'about']
}

Edita el archivo navigation.component.scss y agrega la siguiente regla de CSS:

nav {
  display: flex;
  gap: 1rem
}

Listo, ya tenemos el componente preparado. Ahora vamos a pedirle a Nx que nos ayude a crear las historias para nuestro componente en Storybook.

Ejecuta el siguiente comando: nx generate @nx/angular:stories --name=nba-ui

nx generate @nx/angular:stories --name=nba-ui
 
>  NX  Generating @nx/angular:stories
 
✔ Do you want to generate Cypress specs as well? (y/N) · true
CREATE libs/nba-ui/src/lib/button/button.component.stories.ts
CREATE apps/nba-ui-e2e/src/e2e/button/button.component.cy.ts
dany ~/Desktop/nba [main] $ nx storybook nba-ui

Ejecutamos Storybook con el comando nx storybook nba-ui para ver el resultado final:

nx storybook nba-ui                            
 
> nx run nba-ui:storybook
 
info => Starting manager..
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using angular browser target options from "nba-ui:build-storybook"
info => Using angular project with "tsConfig:/Users/dany/Desktop/nba/libs/nba-ui/.storybook/tsconfig.json"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
<i> [webpack-dev-middleware] wait until bundle finished: /apple-touch-icon-precomposed.png
╭────────────────────────────────────────────────╮
│                                                │
│   Storybook 7.1.0 for angular started          │
│   102 ms for manager and 8.36 s for preview    │
│                                                │
│    Local:            http://localhost:4400/    │
│    On your network:  http://localhost:4400/    │
│                                                │
╰────────────────────────────────────────────────╯

Así de fácil tenemos todos nuestros proyectos configurados con ESLint, Prettier, pruebas en Jest, Cypress y Storybook sin problemas.

Comandos de Nx

Ya vimos cómo crear aplicaciones, librerías, generar componentes y configurar plugins.

Nx tiene un conjunto muy potente de comandos. Veamos algunos más:

Por ejemplo, si queremos ejecutar el linter en nuestra librería nba-ui, usamos el comando nx run nba-ui:lint:

dany ~/Desktop/backup/nba [main] $ nx run nba-ui:lint
> nx run nba-ui:lint
Linting "nba-ui"...
All files pass linting.
 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 
 >  NX   Successfully ran target lint for project nba-ui (962ms)
dany ~/Desktop/backup/nba [main] $

¿Pero qué pasa si quieres ejecutar el linter en más de un proyecto? Necesitamos especificar la tarea con --target (en nuestro caso 'lint') y los proyectos con --projects:

dany ~/Desktop/nba [main] $ nx run-many --target=lint --projects=nba-ui,nba-web 
 
    ✔  nx run nba-ui:lint (689ms)
    ✔  nx run nba-web:lint (715ms)
 
 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 
 
 >  NX   Successfully ran target lint for 2 projects (737ms)

También puedes ejecutar el linter en todos los proyectos a la vez usando el flag --all:

dany ~/Desktop/nba [main] $ nx run-many --target=lint --all                    
 
    ✔  nx run nba-ui:lint  [existing outputs match the cache, left as is]
    ✔  nx run nba-web:lint  [existing outputs match the cache, left as is]
    ✔  nx run nba-ui-e2e:lint (579ms)
    ✔  nx run nba-web-e2e:lint (586ms)
 
 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 
 
 >  NX   Successfully ran target lint for 4 projects (616ms)
 
   Nx read the output from the cache instead of running the command for 2 out of 4 tasks.d/my-lib

¿Notaste el mensaje en la salida anterior que dice "existing outputs match the cache, left as is"?

Nx utiliza la caché para acelerar nuestras tareas. Si quieres evitar la caché de Nx y forzar la ejecución, puedes usar el flag --skip-nx-cache:

 
   dany ~/Desktop/nba [main] $ nx run-many --target=lint --all --sky-nx-cache
 
    ✔  nx run nba-web-e2e:lint (611ms)
    ✔  nx run nba-ui:lint (736ms)
    ✔  nx run nba-web:lint (767ms)
    ✔  nx run nba-ui-e2e:lint (567ms)
 
 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 
 
 >  NX   Successfully ran target lint for 4 projects (1s)
 
         With additional flags:
           --sky-nx-cache=true

Por último, Nx ofrece una forma visual de ver las dependencias del proyecto y cómo se relacionan entre sí.

Por ejemplo, si usamos la librería nba-ui dentro de la aplicación nba-web, se genera una relación. ¿Cómo podemos visualizarla?

Nx cuenta con el comando nx graph, que muestra de forma gráfica y clara cómo se conectan los proyectos:

Si quieres seguir aprendiendo más sobre Nx, te recomiendo revisar la documentación oficial, ya que cuenta con muchísima información útil. También te recomiendo consultar los siguientes recursos:

The Angular Developer's Nx Handbook de Lars Gyrup Brink Nielsen: este libro es una excelente guía para desarrolladores de Angular que buscan sacar el máximo provecho de Nx en sus proyectos.
Setting up Nx Mono-repo de Santosh 🔥 por Santosh Yadav: un gran video con instrucciones paso a paso para configurar un monorepo con Nx.

Resumen

En este artículo vimos cómo configurar de forma rápida y sencilla las herramientas más utilizadas en nuestros proyectos de Angular gracias a Nx. También vimos cómo visualizar el grafo de dependencias para entender con claridad la relación entre las distintas librerías y aplicaciones.

Además, repasamos la potencia de los comandos de Nx para compilar, validar y ejecutar tareas en proyectos individuales o múltiples usando el sistema de caché, lo que reduce drásticamente los tiempos de espera y mejora nuestro flujo de trabajo diario.

Al usar Nx puedes simplificar tu proceso de desarrollo, mejorar la colaboración en equipo y crear aplicaciones más ordenadas y mantenibles.

Código fuente