Kalli
Web

Fonctionnement de l'interface

Démarrage, routage, client oRPC, authentification et traductions du web

Fonctionnement de l'interface

Cette page décrit le fonctionnement interne du front, pour les développeurs.

Démarrage et routage

  • apps/web/src/main.tsx crée le routeur TanStack avec defaultPreload: "intent" et lui passe le client oRPC et le QueryClient dans son contexte. Il monte I18nProvider et UploadProvider.
  • apps/web/src/routes/__root.tsx fournit le contexte oRPC (ORPCContext), le thème (ThemeProvider, clé vite-ui-theme) et les notifications.
  • Le routage est fichier : routes/(public), routes/(auth) et routes/(protected) sont des groupes sans segment d'URL. (protected)/admin ajoute la garde admin.
  • routeTree.gen.ts est généré par le plugin TanStack Router au build (bun run build à la racine).

Appels à l'API (oRPC)

apps/web/src/utils/orpc.ts crée un RPCLink vers ${VITE_SERVER_URL}/rpc, avec credentials: "include" pour envoyer le cookie de session. Les erreurs des requêtes TanStack Query sont affichées par une notification (sonner) avec un bouton de nouvelle tentative.

Le client est typé à partir de apps/server/src/routers : un changement de contrat côté serveur est visible à la compilation (bun run check-types).

Authentification

  • apps/web/src/lib/auth-client.ts crée le client Better Auth avec baseURL = getServerUrl() et le plugin adminClient.
  • Le serveur monte Better Auth sur /api/auth/** (apps/server/src/index.ts). Le client ajoute ce chemin lui-même, il ne faut donc pas le mettre dans VITE_SERVER_URL.
  • Les gardes de routes appellent getMe : (protected)/route.tsx redirige vers /sign-in sans session, (auth)/route.tsx redirige vers /dashboard avec session, et (protected)/admin/route.tsx exige le rôle admin.
  • Connexion Microsoft : le bouton appelle signIn.social avec callbackURL = VITE_BETTER_AUTH_CALLBACK_URL + "/dashboard".

Données

Les pages appellent les procédures par useQuery et orpc.<procédure>.queryOptions(). Après une mutation, les requêtes concernées sont invalidées pour recharger les listes. Les hooks sont regroupés dans apps/web/src/hooks/ (fichiers techniques dans regular/, Q&R dans qa/).

Traductions

Au démarrage, le front appelle GET ${VITE_SERVER_URL}/api/i18n. Les textes viennent donc de la configuration du serveur, sans recompilation du web. En cas d'échec, l'interface part de la langue par défaut (français).

Variables d'exécution

vite.config.ts insère un script window.RUNTIME_ENV dans index.html. apps/web/src/utils/runtime-env.ts lit les valeurs dans cet ordre : window.RUNTIME_ENV, puis import.meta.env, puis process.env. Voir Configuration.