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.tsxcrée le routeur TanStack avecdefaultPreload: "intent"et lui passe le client oRPC et leQueryClientdans son contexte. Il monteI18nProvideretUploadProvider.apps/web/src/routes/__root.tsxfournit le contexte oRPC (ORPCContext), le thème (ThemeProvider, clévite-ui-theme) et les notifications.- Le routage est fichier :
routes/(public),routes/(auth)etroutes/(protected)sont des groupes sans segment d'URL.(protected)/adminajoute la garde admin. routeTree.gen.tsest 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.tscrée le client Better Auth avecbaseURL = getServerUrl()et le pluginadminClient.- 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 dansVITE_SERVER_URL. - Les gardes de routes appellent
getMe:(protected)/route.tsxredirige vers/sign-insans session,(auth)/route.tsxredirige vers/dashboardavec session, et(protected)/admin/route.tsxexige le rôleadmin. - Connexion Microsoft : le bouton appelle
signIn.socialaveccallbackURL = 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.