Déployez votre
app React
Téléversez le build de production depuis Vite, Create React App ou une autre SPA React, puis publiez-le avec routes compatibles avec le rafraîchissement, HTTPS, diffusion à la périphérie et domaines personnalisés quand vous en avez besoin.
Téléversez le build, pas le projet source
Les sources React servent au développement. DeployPages sert les fichiers statiques produits par le build de production.
Vite React
La sortie statique par défaut de Vite est dist. Si vite.config.js modifie build.outDir ou base, déployez ce dossier de sortie et testez les URL de fichiers après téléversement.
Create React App
CRA écrit les fichiers de production dans build. Si l'app est servie depuis un sous-chemin, le réglage homepage peut affecter les URL de fichiers générées.
Autres SPA React
Toute configuration React peut fonctionner si elle produit index.html, bundles JavaScript, CSS, images, polices et fichiers servables comme fichiers statiques.
Pourquoi les apps React cassent après déploiement
Une SPA React commence toujours par un document
La plupart des applications monopages React livrent un point d'entrée HTML, puis laissent le routeur côté client décider quoi rendre une fois JavaScript chargé.
Cela fonctionne localement car le serveur de développement sait retomber sur index.html. Un hébergeur statique basique ne le sait pas toujours, d'où un /dashboard qui marche en navigation mais retourne 404 après rafraîchissement.
Ce qui casse au rafraîchissement
Un serveur de fichiers statiques reçoit GET /settings et cherche un vrai fichier ou dossier settings.
Votre build React contient généralement index.html et des fichiers hashés, donc le serveur renvoie 404 avant que React Router puisse lire l'URL.
Comment DeployPages le corrige
DeployPages applique un repli SPA pour les routes de document manquantes et sert index.html au lieu d'un 404 dur.
Une fois le document chargé, React démarre, le routeur lit l'URL courante et le bon écran s'affiche sans vous demander de maintenir des fichiers de redirection.
Pourquoi les équipes l'utilisent
Téléversez le dossier dist ou build. Repli de routage, HTTPS, compression et diffusion à la périphérie font partie du déploiement au lieu d'une checklist à reconstruire pour chaque petite app React.
Contrôles de production utiles pour React
L'app peut compiler et échouer en ligne. Vérifiez ces points avant d'envoyer le lien.
Chemin de base des fichiers
Si JavaScript ou CSS charge depuis la mauvaise URL, la page peut rester blanche. Les réglages Vite base et CRA homepage sont les premiers à inspecter.
Routes côté client
Testez les visites directes et rafraîchissements pour les routes importantes comme /login, /pricing, /dashboard et les liens profonds partagés.
Points d'entrée API
Un déploiement React statique peut appeler des API externes, mais il ne fait pas tourner de back-end. Gardez secrets serveur et clés API privées hors du bundle front-end.
Variables d'environnement
La plupart des outils React figent les valeurs publiques dans le bundle au build. Changer une variable après téléversement demande généralement un nouveau build.
Flux de déploiement React
Construire l'app
Lancez le build de production localement pour regrouper React, CSS et fichiers dans un dossier statique déployable.
Vérifier la sortie
Vérifiez que le dossier de sortie contient index.html et les fichiers générés. Pour Vite c'est souvent dist ; pour Create React App c'est souvent build.
Téléverser tout le dossier
Déposez tout le dossier dist dans DeployPages. Ne téléversez pas seulement index.html, sinon styles et scripts manqueront.
Tester une page routée
Ouvrez une route imbriquée, rafraîchissez le navigateur et confirmez que l'app se charge toujours au lieu de retourner un 404 de l'hébergeur.
Problèmes fréquents de déploiement React
Écran blanc après déploiement
Ouvrez les outils de développement et vérifiez d'abord les fichiers JS ou CSS manquants. Mauvais chemins de base, fichiers absents ou mauvais dossier téléversé causent beaucoup d'écrans blancs.
Le rafraîchissement retourne 404 sur les routes imbriquées
L'hébergeur statique cherche un vrai fichier pour la route. Utilisez un repli SPA pour servir index.html sur les routes de document manquantes.
Les fichiers fonctionnent localement mais pas en ligne
Vérifiez les chemins absolus, réglages de base publique et que le dossier de sortie téléversé inclut le dossier de fichiers généré.
Les changements de variables d'environnement n'apparaissent pas
Reconstruisez l'app avec les nouvelles variables publiques puis téléversez la nouvelle sortie. Le bundle déployé ne lit pas de variables serveur privées à l'exécution.
FAQ déploiement React
Q:Pourquoi mon app React affiche-t-elle un écran blanc après déploiement ?
La plupart des écrans blancs viennent de mauvais chemins de fichiers ou bundles manquants. Pour Vite, confirmez base. Pour CRA, vérifiez homepage et que le dossier téléversé contient les fichiers générés.
Q:Dois-je configurer nginx ou des redirects à la main ?
Non. DeployPages gère le repli SPA pour les routes manquantes à la périphérie, donc vous n'avez pas à maintenir de réécritures serveur.
Q:Dois-je téléverser le projet ou le dossier dist ?
Téléversez le dossier de sortie de production, pas le projet source. Pour Vite c'est souvent dist. Pour Create React App c'est souvent build.
Q:Puis-je utiliser des variables d'environnement ?
Oui, mais elles sont résolues quand vous lancez le build localement. DeployPages héberge la sortie statique finale, donc l'injection à l'exécution côté serveur ne fait pas partie de ce flux.
Q:Une app React peut-elle appeler une API après déploiement ?
Oui. Une app React statique peut appeler des API externes depuis le navigateur. Retenez simplement que tout ce qui est dans le code front-end est visible, donc les secrets privés ont besoin d'un back-end.
Q:Puis-je aussi déployer Next.js ici ?
Oui, si vous l'exportez comme site statique. Utilisez output: 'export' et téléversez le dossier out. Les routes Next.js rendues serveur demandent un runtime au-delà de l'hébergement statique.
Q:Puis-je ajouter un domaine personnalisé plus tard ?
Oui. Une fois le site en ligne, ajoutez votre domaine dans la console et suivez les instructions DNS. DeployPages configure HTTPS automatiquement quand l'enregistrement se résout.