Frontends: estructura

Los siete frontends son aplicaciones de página única (SPA) con Vue 3, empaquetadas con Vite y con la misma organización base.

Organización general

<frontend>/
├── public/                # Archivos estáticos copiados tal cual al build
├── src/
│   ├── main.js            # Punto de entrada: crea la app, registra Pinia y el router
│   ├── App.vue            # Componente raíz
│   ├── assets/            # CSS (Tailwind), imágenes y fuentes
│   ├── components/        # Componentes reutilizables
│   │   └── ui/            # Componentes base (shadcn-vue / Reka UI), alias @ui
│   ├── composables/       # Lógica reutilizable (Composition API)
│   ├── configs/           # Variables de entorno, cliente Apollo y constantes
│   ├── graphql/           # Queries y mutations GraphQL
│   ├── lib/               # Utilidades (por ejemplo combinación de clases CSS)
│   ├── router/            # Rutas y guards de Vue Router
│   ├── shared/            # Utilidades y estado compartido entre módulos
│   ├── stores/            # Stores globales (Pinia)
│   └── views/             # Vistas asociadas a rutas, una carpeta por módulo
├── index.html             # HTML base donde Vite inyecta la aplicación
├── vite.config.js         # Plugins, alias y configuración de build
├── components.json        # Configuración de shadcn-vue
├── eslint.config.js · jsconfig.json
├── .env.example           # Plantilla de variables VITE_*
├── Dockerfile · nginx.conf
└── package.json · pnpm-lock.yaml · pnpm-workspace.yaml

Flujo de arranque

index.html carga src/main.js, que crea la aplicación con createApp, registra Pinia y el router, y monta App.vue. El router renderiza la vista de views/ que corresponde a la URL.

Carpetas propias de algunos proyectos

Carpeta	Proyectos	Uso
src/api/	auth-authorization-frontend	Cliente HTTP (Fetch) de los endpoints REST del flujo de login
src/services/	auth-authorization-frontend	Orquestación de llamadas del flujo de login
src/auth/	Portales del SPS, estación, frontend-public-auth	Inicio de sesión vía IDP y manejo de sesión
src/jacobitus/	frontend-public-auth	Integración con Jacobitus (firma digital con token) para aprobar documentos
cypress/	auth-frontend-admin	Pruebas end-to-end

Convenciones de build

vite.config.js define los alias @ (src/), @ui (src/components/ui/) y, en todos salvo el portal de postulantes, @pages (src/components/pages/, reservado; la carpeta no existe actualmente). La salida del build se organiza en js/, assets/img/ y assets/font/ con hash en el nombre.

Módulos por proyecto

Carpetas de src/views/ de cada frontend:

Frontend	API que consume	Módulos (views/)
auth-authorization-frontend	REST auth/flow/* + main-schema	login-identifier, login-password, login-totp, login-register, login-recovery, login-consent, login-complete, auth-callback, logout
auth-frontend-admin	admin-schema (IDP)	home, identidad-usuarios, interoperabilidad, configuracion
frontend-public-auth	public-schema (IDP)	perfil, aprobacion-documentos, aprobacion-detalle, aprobacion-cd, federated
frontend-portal-admin-seleccion-postulantes	admin-schema (SPS)	home, login, login-callback, convocatorias, convocatoria, convocatoria-historica, postulacion, postulacion-historica, historial-postulaciones, informes-previos, planillas, sgc, usuarios, accesos, custodio, interoperabilidad, provincias-municipios, preguntas-frecuentes, casos-ayuda
frontend-portal-comisiones-seleccion-postulantes	comision-schema	home, login, login-callback, convocatorias, comision, sesion
frontend-portal-postulantes-seleccion-postulantes	postulante-schema	home, login-callback, dashboard, convocatorias-vigentes, convocatoria-detalle, postulacion-proceso, aviso-detalle, perfil, verificacion, preguntas-frecuentes
frontend-estacion-examen	estacion-examen-schema	home

Las APIs se describen en APIs de los backends.