Golden Path: Frontend React
Official frontend template React 19 + TypeScript + Vite 6 for LATAM web applications (DEX platform). It includes Azure AD authentication, the Hangar design system, i18n, and observability, ready to deploy on Cloud Run.
Repository
GitLab: templates/template-react-fe-cr
Stack
| Component | Value |
|---|---|
| Language | TypeScript |
| Framework | React 19 |
| Build | Vite 6 (HMR) |
| Runtime | Node 22 (>=22.0.0 <23) |
| Deployment | Corporate nginx image → Cloud Run / K8s |
Features
- MSAL authentication — login with Microsoft Entra ID (Azure AD), token renewal, and role-protected routes.
- Hangar Design System — components, icons, and the
eBusinesstheme from@hangar/*. - Internationalization — Spanish and English with automatic language detection.
- Per-environment configuration —
configuration.jsonloaded at runtime (MSAL, API, Faro). - Observability — Grafana Faro (RUM, traces, and navigation with React Router 7).
- Global state — Zustand for authentication and session persistence.
Included routes
| Route | Access |
|---|---|
/ | Public (Home or Dashboard if signed in) |
/login | Public (MSAL sign-in) |
/dashboard | Authenticated |
/demo-user | Role demo.user |
/demo-admin | Role demo.admin |
/theme | Hangar components demo |
Local development requirements
- Node.js 22.x
- LATAM Artifactory token to install the
@hangar/*packages - Azure AD app registration (for real MSAL login)
# Install and run (http://localhost:4200)
npm ci
cp public/assets/config/configuration.example.json public/assets/config/configuration.json
npm run dev
Configuration
The app loads assets/config/configuration.json at runtime (not versioned). In containers, entrypoint.sh generates
it from the service's environment variables (ENVIRONMENT, API_ENDPOINT, MSAL_CLIENT_ID, MSAL_AUTHORITY).