Aller au contenu

Build frontend

Cette page explique comment construire et exécuter le frontend React en dehors de Docker, pour bénéficier du hot module replacement (HMR) de Vite pendant le développement.

Stack cible

  • React 18
  • Vite 5
  • Node.js 20 LTS

Voir Prérequis pour les versions exactes.

Installation des dépendances

Depuis la racine du dépôt :

cd frontend
npm install

La première installation peut prendre 30 à 90 secondes selon votre connexion. Le fichier package-lock.json est committé pour garantir des installations reproductibles.

Démarrer le dev server Vite

npm run dev

Vite démarre un serveur de développement sur le port 5173 (port par défaut Vite). Il expose une URL :

  VITE v5.x.x  ready in 350 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/

Ouvrez cette URL dans votre navigateur. Les modifications du code sont automatiquement répercutées via le Hot Module Replacement — la page se met à jour sans rechargement complet et préserve l'état React quand c'est possible.

Configuration par variables d'environnement Vite

Le frontend utilise deux variables d'environnement principales :

Variable Défaut Rôle
VITE_API_URL https://perfshop-api.perfshop.io URL du backend
VITE_LANG fr Langue active (fr ou en)

Pour le développement local, pointez VITE_API_URL sur votre backend local :

Unix / macOS

export VITE_API_URL=http://localhost:8080
export VITE_LANG=fr
npm run dev

Windows PowerShell

$env:VITE_API_URL = "http://localhost:8080"
$env:VITE_LANG = "fr"
npm run dev

Fichier .env.local

Alternative plus confortable : créez un fichier frontend/.env.local qui sera lu automatiquement par Vite au démarrage. Ce fichier est dans .gitignore par défaut et n'est jamais committé :

VITE_API_URL=http://localhost:8080
VITE_LANG=fr

Build de production

npm run build

Vite compile l'application en assets statiques optimisés dans frontend/dist/ :

  • JavaScript minifié et tree-shaked
  • CSS extrait et minifié
  • Images copiées avec hash de contenu pour le cache-busting
  • HTML index avec les références <script> et <link> mises à jour

Vous pouvez prévisualiser le build de production localement :

npm run preview

Cela démarre un serveur statique léger qui sert dist/ sur un port aléatoire — utile pour valider qu'une optimisation de build n'a pas cassé l'application.

Injection runtime des variables

Le Dockerfile du frontend utilise une astuce : il construit l'image une seule fois avec des marqueurs __VITE_API_URL__ et __VITE_LANG__ à la place des vraies valeurs, puis un script env-inject.sh exécuté à l'ENTRYPOINT les remplace par les valeurs des variables d'environnement au démarrage du conteneur.

#!/bin/sh
sed -i "s|__VITE_API_URL__|${VITE_API_URL}|g" /usr/share/nginx/html/assets/*.js
sed -i "s|__VITE_LANG__|${VITE_LANG}|g" /usr/share/nginx/html/assets/*.js
exec nginx -g "daemon off;"

Cela permet de publier une seule image et de la déployer sur plusieurs environnements (dev, staging, prod, NAS, VPS) en changeant simplement les variables d'environnement du conteneur. Pas besoin de rebuild par cible.

En mode npm run dev, ce mécanisme n'est pas utilisé — Vite injecte les variables directement au build-time.

CORS

Quand vous lancez le frontend sur localhost:5173 et le backend sur localhost:8080, le navigateur considère que ce sont des origines différentes et applique la politique CORS. Le backend doit donc autoriser explicitement l'origine du dev server Vite.

La variable d'environnement CORS_ALLOWED_ORIGINS du backend liste les origines autorisées. Par défaut elle contient http://localhost:9091 (le port exposé par Docker Compose) mais pas http://localhost:5173 (dev server Vite). Ajoutez-le :

export CORS_ALLOWED_ORIGINS="http://localhost:9091,http://localhost:5173"

Puis redémarrez le backend.

Configuration du proxy Vite (alternative)

Au lieu d'autoriser le CORS côté backend, vous pouvez configurer un proxy dans vite.config.js qui route les appels /api/* du dev server vers le backend local :

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

Dans ce mode, le navigateur voit toutes les requêtes partir de localhost:5173, donc pas de CORS. C'est la méthode la plus simple si vous ne voulez pas toucher à la configuration backend.

Structure du code source

frontend/src/
├── main.jsx               ← Point d'entrée React, monte <I18nProvider> + <App>
├── App.jsx                ← Routes, AppShell, montage PedagogiqueOrchestrator
├── index.css              ← Styles globaux
├── App.css                ← Styles spécifiques App
├── chaos-agent.js         ← Chaos Frontend côté navigateur (effets de bord au load)
├── pages/                 ← Composants de pages
│   ├── Home.jsx
│   ├── Products.jsx
│   ├── ProductDetail.jsx
│   ├── Cart.jsx
│   ├── Checkout.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   ├── Profile.jsx
│   ├── MyOrders.jsx
│   ├── OrderConfirmation.jsx
│   ├── AdminPortal.jsx
│   ├── PedagogiqueOrchestrator.jsx
│   ├── PedagogiqueOverlay.jsx
│   ├── PedagogiqueTimer.jsx
│   ├── usePedagogiqueState.js
│   ├── SearchBar.jsx
│   └── CategorySidebar.jsx
├── pedagogique/succes/
│   └── PedagogiqueSucces.jsx  ← Page standalone /s/:token
├── services/
│   └── api.js             ← Client API unique (tous les fetch passent par ici)
└── i18n/
    ├── I18nContext.jsx    ← Provider + hook useT
    ├── fr.json            ← Dictionnaire français (~400 clés)
    └── en.json            ← Dictionnaire anglais

Tester le build Docker localement

Pour construire l'image frontend sans Compose :

cd frontend
docker build -t perfshop-frontend:local .
docker run --rm -p 9091:80 \
  -e VITE_API_URL=http://host.docker.internal:8080 \
  -e VITE_LANG=fr \
  perfshop-frontend:local

Puis ouvrez http://localhost:9091 pour valider que l'injection runtime fonctionne correctement.

Voir aussi