Arquitectura micro-frontends

Zentto divide su frontend en 13 aplicaciones Next.js independientes, cada una corriendo en su propio puerto. Una app shell actúa como punto de entrada y orquesta la navegación entre módulos. Todas comparten paquetes comunes via npm workspaces.

Mapa de puertos

Cómo el Shell orquesta las apps

La app shell es el punto de entrada único. Nginx enruta todas las solicitudes a zentto.net/* al shell en el puerto 3000. Cuando el usuario navega a un módulo (ej. /inventario), el shell realiza un proxy interno al puerto correspondiente.

// next.config.ts (shell)
async rewrites() {
  return [
    { source: '/contabilidad/:path*', destination: 'http://localhost:3001/contabilidad/:path*' },
    { source: '/pos/:path*',          destination: 'http://localhost:3002/pos/:path*' },
    { source: '/inventario/:path*',   destination: 'http://localhost:3005/inventario/:path*' },
    // ... demás módulos
  ];
}
    

PM2 en Docker

Dentro del contenedor Docker de frontend, PM2 gestiona las 13 aplicaciones como procesos independientes. El archivo docker/pm2.config.cjs define cada app:

// docker/pm2.config.cjs
module.exports = {
  apps: [
    { name: 'shell',         script: 'apps/shell/.next/standalone/server.js',         env: { PORT: 3000 } },
    { name: 'contabilidad',  script: 'apps/contabilidad/.next/standalone/server.js',  env: { PORT: 3001 } },
    { name: 'pos',           script: 'apps/pos/.next/standalone/server.js',           env: { PORT: 3002 } },
    // ... demás apps
  ]
};
    

Paquetes compartidos

Cómo agregar una nueva micro-app

1. Crear la app:

   cd web/modular-frontend/apps
   npx create-next-app@latest mi-modulo --typescript --tailwind
           

2. Configurar next.config.ts con basePath: '/mi-modulo' y output: 'standalone'.
3. Agregar dependencias compartidas en package.json:

   "dependencies": {
     "@zentto/shared-ui": "workspace:*",
     "@zentto/shared-auth": "workspace:*",
     "@zentto/shared-api": "workspace:*"
   }
           

4. Registrar en el shell — agregar rewrite en apps/shell/next.config.ts.
5. Agregar a PM2 — nueva entrada en docker/pm2.config.cjs con el puerto asignado.
6. Agregar al Dockerfile — incluir el build de la nueva app en docker/Dockerfile.frontend.