Frontends: dependencias y configuración

Dependencias comunes

Presentes en los siete frontends, con la misma versión.

Paquete	Versión	Uso
`vue`	3.5.32	Framework de interfaz
`vue-router`	5.0.4	Enrutamiento
`pinia`	3.0.4	Estado global
`@vueuse/core`	14.3.0	Composables utilitarios
`tailwindcss`	4.3.0	Estilos por clases utilitarias
`@tailwindcss/vite`	4.3.0	Integración de Tailwind con Vite
`reka-ui`	2.9.8	Componentes accesibles sin estilo (base de shadcn-vue)
`class-variance-authority`	0.7.1	Variantes de estilos de componentes
`clsx` · `tailwind-merge`	2.1.1 · 3.6.0	Combinación de clases CSS
`@lucide/vue`	1.16.0	Iconos

Dependencias por función

Paquete	Versión	Uso	Proyectos
`@apollo/client` · `@vue/apollo-composable` · `@vue/apollo-util`	3.11.8 · 4.2.1 · 4.2.2	Cliente GraphQL	Todos excepto `auth-authorization-frontend`
`graphql` · `graphql-tag`	16.12.0 · 2.12.6	Definición de operaciones GraphQL	Ídem
`apollo-upload-client`	18.0.1	Subida de archivos por GraphQL	Ídem
`date-fns`	4.3.0	Manejo de fechas	Ídem
`vee-validate` · `@vee-validate/zod` · `zod`	4.15.1 · 4.15.1 · 4.6.7	Validación de formularios	Todos excepto `auth-authorization-frontend` y la estación
`@embedpdf/*` (core, engines y plugins)	2.14.4	Visor de PDF embebido	`frontend-public-auth` y los tres portales del SPS
`js-sha1`	0.7.0	Hash SHA-1 en el cliente	`frontend-public-auth` y los tres portales del SPS
`@tiptap/*` (vue-3, starter-kit, pm y extensiones)	3.33.1	Editor de texto enriquecido	Los tres portales del SPS
`@tiptap/extension-mention`	3.33.1	Menciones en el editor	Portales administrativo y de comisiones
`tiptap-pagination-plus`	3.1.0	Paginación en el editor	Portal administrativo
`echarts`	6.1.0	Gráficos	Portales administrativo y de comisiones

auth-authorization-frontend no usa GraphQL de forma general: consume los endpoints REST del flujo de login con Fetch.

Herramientas de desarrollo

Paquete	Versión	Uso
`vite`	8.3.8	Servidor de desarrollo y empaquetado
`@vitejs/plugin-vue`	6.0.6	Soporte de componentes `.vue`
`vite-plugin-vue-devtools`	8.1.1	Vue DevTools integradas en desarrollo
`eslint` · `@eslint/js` · `eslint-plugin-vue` · `globals`	10.2.1 · 10.0.1 · 10.8.0 · 17.5.0	Linter
`oxlint` · `eslint-plugin-oxlint`	1.60.0	Linter rápido (se ejecuta antes de ESLint)
`prettier` · `eslint-config-prettier`	3.8.3 · 10.1.8	Formato de código
`npm-run-all2`	8.0.4	Ejecución de scripts `lint:*` en serie
`tw-animate-css`	1.4.0	Animaciones para Tailwind
`@types/node`	25.9.1	Tipos de Node para el editor
`cypress` · `eslint-plugin-cypress` · `start-server-and-test`	15.16.0 · 6.3.1 · 3.0.5	Pruebas end-to-end (solo `auth-frontend-admin`)

Componentes de interfaz (shadcn-vue)

Los componentes de src/components/ui/ siguen shadcn-vue: su código fuente vive en el repositorio (no es una librería instalada) y se construye sobre Reka UI y Tailwind. La configuración está en components.json (estilo new-york, iconos lucide, CSS en src/assets/css/tailwind.css).

Configuración de Tailwind CSS

Los frontends usan Tailwind CSS v4 sin archivo tailwind.config.js. Toda la integración se reparte entre el plugin de Vite y la hoja de estilos principal:

Plugin en vite.config.js: se registra @tailwindcss/vite junto al plugin de Vue:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
   plugins: [vue(), tailwindcss()],
})

Hoja de estilos en src/assets/css/tailwind.css (importada desde src/main.js y referenciada por components.json):
- Carga Tailwind v4 y animaciones con @import 'tailwindcss'; y @import 'tw-animate-css';, además de la variante oscura @custom-variant dark (&:is(.dark *));.
- Define las variables CSS del tema en :root y .dark (paleta --background, --foreground, --primary, --secondary, --muted, --accent, --destructive, --border, --chart-*, --sidebar-*, tipografías --font-sans / --font-serif / --font-mono, radios y sombras).
- Expone esos tokens como utilidades de Tailwind mediante @theme inline (--color-primary: var(--primary), --radius-*, --shadow-*) y aplica los estilos base en @layer base (border-border, bg-background text-foreground).

Variables de entorno

Las variables VITE_* se definen en .env (plantilla .env.example) y se incrustan en el bundle al compilar. La lista por proyecto está en Imágenes Docker.

Variable	Descripción
`VITE_TITLE_APP`	Título de la aplicación
`VITE_API_ENDPOINT`	URL base del backend
`VITE_API_ENDPOINT_PATH`	Path del schema GraphQL (por ejemplo `/admin-schema/`)
`VITE_API_ENDPOINT_FILES`	URL base de archivos públicos
`VITE_API_FILES_PRIVATE`	URL base de archivos privados
`VITE_AUTH_ORIGIN_PORTAL`	Portal de origen enviado al iniciar sesión (por ejemplo `PORTAL_ADMINISTRATIVO`)
`VITE_AUTH_PUBLIC_URL`	URL del portal de cuenta del IDP ("Mi cuenta")
`VITE_LOGIN_REDIRECT_URL`	URL del portal de login del IDP (el logout usa `<url>/logout`)
`VITE_PUBLIC_AUTH_PORTAL` · `VITE_ADMIN_AUTH_PORTAL`	URLs de los portales del IDP
`VITE_DOMAIN_PUBLIC_URL`	Se recibe en el build; sin uso en el código actual
`VITE_JACOBITUS_API_URL`	URL del servicio Jacobitus (firma digital con token)
`VITE_MANUAL_TECNICO_URL` · `VITE_MANUAL_USUARIO_URL`	Enlaces a los manuales

Scripts y ejecución local

corepack enable pnpm
pnpm install
cp .env.example .env   # completar valores
pnpm run dev

Script	Acción
`pnpm run dev`	Servidor de desarrollo
`pnpm run build`	Build de producción en `dist/`
`pnpm run preview`	Sirve el build localmente
`pnpm run lint`	Oxlint + ESLint con corrección automática
`pnpm run format`	Prettier sobre `src/`
`pnpm run test:e2e`	Pruebas Cypress (solo `auth-frontend-admin`)

Dominios locales para desarrollo

Para levantar los frontends en modo desarrollo usando dominios locales (en lugar de acceder directamente por localhost:<puerto>), se requiere combinar tres configuraciones: permitir el host en Vite, registrarlo en el archivo hosts del sistema y redirigir el tráfico mediante un proxy inverso local como Caddy (o herramientas similares como Nginx o Traefik).

1. Hosts permitidos en `vite.config.js`

Vite bloquea peticiones cuyo encabezado Host no sea localhost a menos que estén declarados en server.allowedHosts:

export default defineConfig({
   // ...
   server: {
      allowedHosts: ['mi-portal-local.ejemplo.bo'],
   },
})

2. Registro en el archivo `hosts`

En el archivo hosts del sistema operativo (/etc/hosts en Linux/macOS o C:\Windows\System32\drivers\etc\hosts en Windows), debes agregar el dominio apuntando a 127.0.0.1:

text

127.0.0.1 mi-portal-local.ejemplo.bo

3. Proxy inverso con Caddy (o similar)

En un archivo de configuración como ~/caddy/Caddyfile, redirige el dominio local hacia el puerto en el que corre pnpm run dev (puedes hacer el equivalente con Nginx, Traefik u otro proxy inverso):

text

mi-portal-local.ejemplo.bo {
   reverse_proxy localhost:9090
}

Luego inicia Caddy apuntando a ese archivo de configuración y levanta el frontend con pnpm run dev:

caddy run --config ~/caddy/Caddyfile

Puertos y hosts por proyecto

Referencia de puertos (package.json) y server.allowedHosts (vite.config.js) configurados en cada frontend:

Frontend	Puerto	Host local
`auth-authorization-frontend`	8080	`login-auth-eje-local.app.com.bo`
`auth-frontend-admin`	7070	`admin-auth-eje-local.app.com.bo`, `auth-admin-eje-local.app.com.bo`
`frontend-public-auth`	9092	`auth-public-eje-local.app.com.bo`
`frontend-portal-admin-seleccion-postulantes`	9090	`admin-portal-seleccion-eje-local.app.com.bo`
`frontend-portal-postulantes-seleccion-postulantes`	9091	`postulantes-portal-seleccion-eje-local.app.com.bo`
`frontend-portal-comisiones-seleccion-postulantes`	9093	`comisiones-portal-seleccion-eje-local.app.com.bo`
`frontend-estacion-examen`	9094	`estacion-examen-eje-local.app.com.bo`

Frontends: dependencias y configuración ​

Dependencias comunes ​

Dependencias por función ​

Herramientas de desarrollo ​

Componentes de interfaz (shadcn-vue) ​

Configuración de Tailwind CSS ​

Variables de entorno ​

Scripts y ejecución local ​

Dominios locales para desarrollo ​

1. Hosts permitidos en vite.config.js ​

2. Registro en el archivo hosts ​

3. Proxy inverso con Caddy (o similar) ​

Puertos y hosts por proyecto ​