Skip to main content

Levantar el frontend localmente

Stack​

React 19 + TypeScript, Vite, Tailwind CSS 4, React Router 7.

Requisitos​

  • Node.js ≥ 18
  • npm ≥ 9

Arranque rápido​

ABA-frontend/
cd ABA-frontend
npm install
npm run dev

El servidor de desarrollo queda disponible en http://localhost:5173 y escucha en todas las interfaces de red (0.0.0.0), útil para probar desde otro dispositivo en la misma red.

Build de producción​

npm run build       # genera dist/
npm run preview      # sirve el build en http://localhost:4173

Conectar con un backend local​

Por defecto el frontend apunta a producción (https://api.aba.andrescortes.dev). Para desarrollo local:

cp .env.example .env
# Editar .env:
# VITE_API_URL=http://localhost:8080

El backend local ya trae CORS configurado para http://localhost:5173, así que no hace falta tocar nada del lado del backend para que las dos puntas se hablen.

Convenciones del código​

  • src/api/client.ts es el único wrapper de fetch del proyecto — todas las llamadas pasan por ahí con credentials: 'include' para que las cookies de sesión (JWT + CSRF) viajen automáticamente. Las llamadas nuevas al backend se agregan como archivos separados por dominio dentro de src/api/ (auth.ts, dashboard.ts, provisioning.ts, landing.ts), nunca como un fetch suelto dentro de un componente.
  • src/contexts/AuthContext.tsx es la única fuente de verdad del estado de autenticación (loading / authenticated / unauthenticated) — las rutas protegidas del router se basan en este contexto, no en chequeos propios.
  • src/ds/ es el design system compartido (Button, Badge, Modal, Skeleton) — la UI nueva reutiliza estos componentes en vez de escribir markup ad-hoc.

Autenticación desde el frontend​

  • OAuth2 con Google y GitHub — el frontend nunca maneja tokens directamente.
  • El JWT vive en una cookie HttpOnly, invisible para JavaScript — el navegador la envía sola en cada request gracias a credentials: 'include'.
  • CSRF con patrón de doble envío: el token se lee de la cookie XSRF-TOKEN (esa sí es legible por JS) y se reenvía como header X-CSRF-TOKEN en cada request que modifica datos.