Comprenez comment transformer vos composants JSX/TSX en fichiers statiques ultra-performants via Vite ou Create React App, maîtrisez l'injection des variables d'environnement client et assurez la pérennité du routage React Router.
React n'a pas besoin de Node.js en production : le build produit du HTML, CSS et JavaScript purs exécutés par le navigateur.
Minification Rollup ultra-rapide générant le dossier dist/ avec découpage de code (Code Splitting) automatique.
Seules les variables préfixées VITE_ sont injectées dans le code client au moment du build.
Obligation de configurer une réécriture universelle vers index.html pour que les routes virtuelles fonctionnent au F5.
# 1. Vérification du fichier d'environnement de production (.env.production) # VITE_API_BASE_URL=https://api.mondomaine.com # VITE_APP_TITLE="Mon Application React" # 2. Lancer la compilation de production avec Vite $ npm run build # Sortie générée dans le dossier dist/ : # dist/ # ├── assets/ # │ ├── index-b18c9f21.js # Votre code React + vendor bundle minifié # │ └── index-9e4a10dc.css # Styles Tailwind / CSS compilés # ├── favicon.ico # └── index.html # Le point d'entrée unique de la SPA # 3. Tester localement le résultat exact de production avant envoi $ npx serve -s dist -l 3000 # L'option -s active le mode Single Page Application (redirection 404 vers index.html)
En développement avec npm run dev, Vite utilise les modules ES natifs du navigateur et fournit le rechargement à chaud (Hot Module Replacement - HMR). Le navigateur lit votre code à la volée.
En production, ce serveur de développement ne doit jamais être utilisé ! La commande npm run build déclenche un processus industriel :
<Component /> sont converties en appels JavaScript standards React.createElement ou fonctions jsx().function handleUserClick devient function h). Contrairement à un serveur Node.js où process.env est lu en temps réel à chaque requête, dans une application React, les variables sont gravées en dur dans les fichiers JS au moment du build.
Ne JAMAIS mettre de secrets dans React :
DB_PASSWORD, STRIPE_SECRET_KEY, JWT_SECRETN'importe quel internaute peut ouvrir les DevTools de son navigateur (touche F12 > Sources) et lire l'intégralité du code JavaScript client. Tout secret placé dans React est public.
Uniquement les configurations publiques :
VITE_API_URL, VITE_STRIPE_PUBLIC_KEY, VITE_ENV Avec Vite, seules les variables commençant par VITE_ sont lisibles via import.meta.env.VITE_xxx. Avec Create React App, le préfixe obligatoire est REACT_APP_xxx.
Lorsque vous naviguez sur https://mon-site.com/produits/12, c'est React Router qui intercepte l'URL dans le navigateur et affiche le composant <ProductDetail /> sans recharger la page.
Mais si l'internaute appuie sur F5 (Recharger), le navigateur envoie une requête GET directe au serveur web pour le chemin /produits/12. Le serveur cherche alors un fichier physique produits/12/index.html qui n'existe pas, et renvoie une page 404 Not Found !
/index.html avec un statut HTTP 200. Une fois index.html et React chargés, React Router lit l'URL actuelle et affiche instantanément le composant attendu. | Aspect | Mode Développement (npm run dev) | Mode Production (npm run build) |
|---|---|---|
| Rôle du serveur | Serveur Node.js actif avec HMR et compilation à la volée | Aucun serveur Node.js requis : simples fichiers statiques |
| Dossier de publication | Mémoire vive (RAM) / aucun dossier physique | Dossier dist/ (Vite) ou build/ (CRA) |
| Poids du code JS | Plusieurs mégaoctets non minifiés avec source-maps | Quelques centaines de kilo-octets minifiés et compressés (Gzip/Brotli) |
| Hébergement adapté | Machine locale du développeur uniquement | Vercel, Netlify, Cloudflare Pages, S3, Nginx |