Configuration (Web)

Cette page décrit la configuration de l'application Web (environnement, runtime, API, auth, UI). Toutes les références pointent vers le code dans apps/web/.

Variables d'environnement (client)

Créer apps/web/.env avec :

VITE_SERVER_URL=http://localhost:3000
VITE_CHATBOT_URL=http://localhost:8501
VITE_BETTER_AUTH_CALLBACK_URL=http://localhost:3001/auth/callback

Notes importantes :

Les variables préfixées VITE_ sont exposées au client. N'y placez jamais de secrets.
Ces valeurs peuvent aussi être injectées au runtime via window.RUNTIME_ENV (voir ci-dessous).

Injection runtime (Vite)

Fichier : apps/web/vite.config.ts
Le plugin runtime-env insère un script dans index.html qui définit window.RUNTIME_ENV :
- VITE_SERVER_URL, VITE_CHATBOT_URL, VITE_BETTER_AUTH_CALLBACK_URL
Si les variables ne sont pas définies à la build, des placeholders {{ .Env.* }} peuvent être remplacés au déploiement.

Accès unifié aux envs

Fichier : apps/web/src/utils/runtime-env.ts
Fonctions :
- getRuntimeEnv(key, fallback) : ordre de lecture
  1. window.RUNTIME_ENV[key]
  2. import.meta.env[key]
  3. process.env[key]
- getServerUrl() et getChatbotUrl() retournent les URLs utilisées par l'app.

Client ORPC (API du serveur)

Fichier : apps/web/src/utils/orpc.ts
Principes :
- Construit un RPCLink vers ${getServerUrl()}/rpc
- Ajoute credentials: 'include' pour envoyer les cookies de session
- Expose orpc (React Query utils) et queryClient avec gestion d'erreurs globale (toasts via sonner)
Utilisation dans le routeur :
- apps/web/src/routes/__root.tsx crée le client et fournit ORPCContext

Routage et garde (auth)

Root : apps/web/src/routes/__root.tsx
- Initialise thèmes, toasts, devtools, et fournit ORPC aux enfants
Garde d'accès : apps/web/src/routes/(protected)/route.tsx
- beforeLoad: context.orpc.getMe.call()
- Redirige vers /sign-in si l'utilisateur n'est pas authentifié

Authentification (Better Auth)

Fichier : apps/web/src/lib/auth-client.ts
Initialise better-auth côté client (plugins optionnels, ex: adminClient)
L'URL de callback doit correspondre à VITE_BETTER_AUTH_CALLBACK_URL

baseURL du client

Le serveur monte Better Auth sous /api/auth/** (voir apps/server/src/index.ts).
Le client doit utiliser baseURL = ${getServerUrl()}/api/auth pour appeler les bons endpoints.

Exemple :

import { createAuthClient } from "better-auth/react";
import { getServerUrl } from "@/utils/runtime-env";

export const authClient = createAuthClient({
  baseURL: `${getServerUrl()}/api/auth`,
});

Sans le suffixe /api/auth, les appels iront vers /sign-in/email (404 attendu). Adaptez selon votre proxy/ingress si vous réécrivez les chemins.

UI et theming

Tailwind CSS + composants Radix
Thèmes via next-themes (stockage : vite-ui-theme)

Scripts et ports

Dev (racine) : bun run dev:web → http://localhost:3001
Dev (dans apps/web/) : bun run dev
Build : bun run build
Serve statique : bun run serve (port 3001)

Sécurité

Considérez toutes les variables VITE_* comme publiques.
Le serveur doit être configuré pour CORS + cookies avec credentials.

Web Configuration