Golden Path: Frontend React

Plantilla oficial de frontend React 19 + TypeScript + Vite 6 para aplicaciones web de LATAM (plataforma DEX). Incluye autenticación Azure AD, sistema de diseño Hangar, i18n y observabilidad, lista para desplegar en Cloud Run.

Repositorio

GitLab: templates/template-react-fe-cr

Stack

Componente	Valor
Lenguaje	TypeScript
Framework	React 19
Build	Vite 6 (HMR)
Runtime	Node 22 (>=22.0.0 <23)
Despliegue	Imagen nginx corporativa → Cloud Run / K8s

Características

• Autenticación MSAL — login con Microsoft Entra ID (Azure AD), renovación de tokens y rutas protegidas por rol.
• Hangar Design System — componentes, iconos y tema eBusiness de @hangar/*.
• Internacionalización — español e inglés con detección automática de idioma.
• Configuración por ambiente — configuration.json cargado en runtime (MSAL, API, Faro).
• Observabilidad — Grafana Faro (RUM, trazas y navegación con React Router 7).
• Estado global — Zustand para autenticación y persistencia de sesión.

Rutas incluidas

Ruta	Acceso
/	Público (Home o Dashboard si hay sesión)
/login	Público (inicio de sesión MSAL)
/dashboard	Autenticado
/demo-user	Rol demo.user
/demo-admin	Rol demo.admin
/theme	Demo de componentes Hangar

Requisitos para desarrollo local

• Node.js 22.x
• Token de Artifactory de LATAM para instalar los paquetes @hangar/*
• Registro de app en Azure AD (para login real con MSAL)

# Instalar y ejecutar (http://localhost:4200)
npm ci
cp public/assets/config/configuration.example.json public/assets/config/configuration.json
npm run dev

Configuración

La app carga assets/config/configuration.json en runtime (no se versiona). En contenedores, entrypoint.sh lo genera a partir de variables de entorno del servicio (ENVIRONMENT, API_ENDPOINT, MSAL_CLIENT_ID, MSAL_AUTHORITY).