Se establece la arquitectura base del proyecto Nebula ERP mediante la implementación de un monorepositorio utilizando Nx y Angular. Esta etapa es fundamental para asegurar la escalabilidad, el rendimiento y la mantenibilidad del código a lo largo del ciclo de desarrollo.
Para comenzar con el desarrollo de Nebula ERP, utilizaremos Nx, una herramienta que nos permite gestionar múltiples aplicaciones y librerías en un solo repositorio de manera eficiente.
El siguiente comando descarga las herramientas necesarias y genera la estructura de carpetas. Usamos el flag --preset=angular-monorepo para que Nx configure todo específicamente para un entorno Angular desde el inicio.
npx create-nx-workspace@latest nebula-erp --preset=angular-monorepo
Una vez creada la carpeta nebula-erp, debemos movernos dentro de ella para ejecutar comandos locales.
cd nebula-erp
Aunque el paso 1 suele instalar las dependencias base, ejecutamos npm install para asegurar que todas las librerías estén correctamente vinculadas.
npm install
npx nx serve nebula-shell
Dependencias esenciales para el proyecto Nebula ERP.
npm install @angular/material
@angular/cdk
npm install rxjs
npm install chart.js
npm install -D @types/node
npm install -D @typescript-eslint/eslint-plugin
npm install -D prettier
npm install -D vitest @vitest/ui
npm install -D @playwright/test
El archivo app.config.ts actúa como el punto central de configuración para la aplicación. En este módulo se definen los proveedores globales (services), las rutas principales y las configuraciones de inicialización necesarias antes de que la aplicación sea renderizada en el navegador.
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: \[
provideBrowserGlobalErrorListeners(),
provideRouter(appRoutes),
provideHttpClient( withInterceptors(\[\]) ), \
],
};
El archivo app.routes.ts define el mapa de navegación de la aplicación. En este módulo se establecen las relaciones entre las URL del navegador y los componentes que deben renderizarse.
import { Route } from '@angular/router';
export const appRoutes: Route\[\] = \[
{ path: '', redirectTo: 'login', pathMatch: 'full', },
{ path: 'login', loadChildren: () => import('@nebula/login').then(m => m.LOGIN\_ROUTES), },
{ path: 'layout', loadChildren: () => import('@nebula/layout').then(m => m.LAYOUT\_ROUTES), },
{ path: '\*\*', redirectTo: 'login', }
\];
El archivo app.component.ts define el componente raíz de la aplicación. Actúa como el contenedor principal que se carga inicialmente y alberga los elementos de estructura global.
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
imports: \[RouterModule\],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: \['./app.component.scss'\],
})
export class AppComponent { protected title = 'nebula-shell'; }
Esta sección detalla la estrategia de aseguramiento de calidad del proyecto. El testing se divide en dos niveles principales para garantizar la estabilidad y funcionalidad de la aplicación.
Validan el comportamiento aislado de componentes, servicios y tuberías (pipes). Su objetivo es asegurar que cada unidad de código funcione correctamente por sí misma.
Simulan la interacción de un usuario real con la aplicación completa. Verifican flujos críticos (como login, compras o navegación) para asegurar que los diferentes módulos integren correctamente entre sí.
El proyecto utiliza Nx para orquestar la ejecución de pruebas, lo que permite gestionar las dependencias automáticamente.
# Validación Rápida (Headless) npx nx run nebula-shell-e2e:e2e # Interfaz Gráfica (UI Mode) npx nx run nebula-shell-e2e:e2e --ui # Modo Depuración (Debug) npx nx run nebula-shell-e2e:e2e --debug # Tests Unitarios npx nx test nebula-shell # Tests Unitarios con UI npx nx test nebula-shell --ui # Tests Unitarios con Coverage npx nx test nebula-shell --coverage
El archivo nx.json es el centro de configuración del workspace de Nx. Establece las reglas globales que afectan a todo el monorepo.
{
"extends": "nx/presets/angular-monorepo.json",
"tasksRunnerOptions": {
"default": { "runner": "nx/tasks-runners/default",
"options": { "cacheableOperations": \["build", "test", "lint", "e2e"\] } } },
"targetDefaults": { "build": { "dependsOn": \["^build"\],
"inputs": \["production", "^production"\] },
"test": { "inputs": \["default", "^production", "{workspaceRoot}/jest.preset.js"\] }
}
}
El archivo tsconfig.base.json define los alias de ruta (path aliases) que permiten importar módulos en todo el monorepo sin utilizar rutas relativas complejas.
{
"compilerOptions": {
"paths": {
"@nebula/shared/util": \["libs/shared/util/src/lib"\],
"@nebula/shared/data-access": \["libs/shared/data-access/src/lib"\],
"@nebula/shared/domain": \["libs/shared/domain/src/lib"\],
"@nebula/shared/masters": \["libs/shared/masters/src/lib"\],
"@nebula/accounting/\*": \["libs/accounting/\*/src/lib"\],
"@nebula/treasury/\*": \["libs/treasury/\*/src/lib"\],
"@nebula/assets/\*": \["libs/assets/\*/src/lib"\] }
}
}
Núcleo Utilidades, modelos y servicios transversales
@nebula/shared/\*
Contabilidad Libro mayor, asientos, reportes contables
@nebula/accounting/\*
Tesorería Flujo de caja, bancos, conciliaciones
@nebula/treasury/\*
El archivo package.json centraliza los scripts de automatización del proyecto.
{
"scripts": {
"dev": "nx serve nebula-shell", "start":
"nx serve nebula-shell",
"build": "nx build nebula-shell",
"build:prod": "nx build nebula-shell --configuration=production",
"test": "nx test nebula-shell",
"test:ui": "nx test nebula-shell --ui",
"test:coverage": "nx test nebula-shell --coverage",
"e2e": "nx run nebula-shell-e2e:e2e",
"e2e:ui": "nx run nebula-shell-e2e:e2e --ui",
"lint": "nx lint nebula-shell",
"lint:fix": "nx lint nebula-shell --fix",
"format": "nx format:write",
"graph": "nx graph"
}
}
| Comando | Ejecución | Descripción |
|---|---|---|
| Dev | npm run dev |
Inicia el servidor de desarrollo en http://localhost:4200 |
| Start | npm start |
Alternativa para iniciar la aplicación |
| Comando | Ejecución | Descripción |
|---|---|---|
| Build | npm run build |
Genera los archivos de producción en la carpeta dist/ |
| Build Prod | npm run build:prod |
Genera archivos optimizados con hash para producción |
| Comando | Ejecución | Descripción |
|---|---|---|
| Test | npm test |
Ejecuta pruebas unitarias en consola |
| Test UI | npm run test:ui |
Abre interfaz visual de Vitest en localhost:51204 |
| Test Coverage | npm run test:coverage |
Genera reporte de cobertura en dist/coverage/ |
| Test Watch | npm run test:watch |
Ejecuta tests en modo watch (auto-reinicio) |
| Comando | Ejecución | Descripción |
|---|---|---|
| E2E | npm run e2e |
Ejecuta pruebas E2E en modo headless |
| E2E UI | npm run e2e:ui |
Abre interfaz visual de Playwright en localhost:9323 |
| E2E Headed | npm run e2e:headed |
Ejecuta E2E con navegador visible |
| Comando | Ejecución | Descripción |
|---|---|---|
| Lint | npm run lint |
Verifica errores de ESLint |
| Lint Fix | npm run lint:fix |
Corrige automáticamente errores de linting |
| Lint All | npm run lint:all |
Ejecuta linting en todos los proyectos |
| Format | npm run format |
Formatea todo el código automáticamente |
| Format Check | npm run format:check |
Verifica si el código está formateado correctamente |
| Comando | Ejecución | Descripción |
|---|---|---|
| Graph | npm run graph |
Abre grafo interactivo de dependencias en localhost:4211 |
| Clean | npm run clean |
Limpia caché y carpeta dist/ |
| Nx Reset | npx nx reset |
Reinicia la caché de Nx |
| Comando | Ejecución | Descripción |
|---|---|---|
| Serve | npx nx serve nebula-shell |
Inicia aplicación específica |
| Build | npx nx build nebula-shell |
Build de aplicación específica |
| Test | npx nx test nebula-shell |
Tests de aplicación específica |
| Lint | npx nx lint nebula-shell |
Lint de aplicación específica |
| Show Projects | npx nx show projects |
Lista todos los proyectos disponibles |
# Librería Domain
npx nx g @nx/js:library domain --directory=libs/shared/domain --bundler=tsc --unitTestRunner=vitest --linter=eslint --importPath=@nebula/shared/domain
# Librería Util npx nx g @nx/js:library util --directory=libs/shared/util --bundler=tsc --unitTestRunner=vitest --linter=eslint --importPath=@nebula/shared/util
# Librería Data-Access npx nx g @nx/js:library data-access --directory=libs/shared/data-access --bundler=tsc --unitTestRunner=vitest --linter=eslint --importPath=@nebula/shared/data-access
npx tsc --build libs/shared/util/tsconfig.json --noEmit npx nx show projects
# Build individual de librerías
- npx nx build util
- npx nx build master npx
- nx build domain
- npx nx build data-access
# Build de todas las librerías
- npx nx run-many -t build
# Ver proyectos disponibles
Ejecutar tests de librerías
npx nx test util npx nx test master
npx nx test domain npx nx test data-access
**Ejecutar todos los tests **
npx nx run-many -t test
Tests con coverage
npx nx test util --coverage
**Tests en modo watch
npx nx test util --watch