Un build statique n'a aucun serveur derrière lui : ce qui est faux dans ces fichiers est faux pour chaque visiteur. React2Static passe tout ce qui suit sur votre propre sortie de build avant la mise en ligne. Voici la liste complète, avec la correction pour chaque point.
Les noms de paquets, chemins et tailles des exemples ci-dessous ne sont que des exemples — le builder y met ceux de votre propre projet.
Ce que vous voyez
dist/
.env
index.html
assets/index-a3f1c2.jsLe fichier entier est téléchargeable par n'importe quel visiteur. Renouvelez chacune de ses valeurs, puis sortez .env du dossier que votre compilation copie tel quel (en général public/).
Ce que vous voyez
const apiKey = process.env.API_KEY;
fetch(url, { headers: { Authorization: `Bearer ${apiKey}` } });
// Vite turns process.env into {} — the header goes out as
// "Bearer undefined" and the API answers 401. No error in the console.Vite remplace process.env par un objet vide : dans le navigateur, cette valeur vaut simplement undefined — sans erreur ni avertissement. La requête part quand même, sans la valeur, et l'API répond 401. Lisez-la plutôt via import.meta.env.VITE_quelquechose, ou définissez-la dans vite.config.
La correction
const apiKey = import.meta.env.VITE_API_KEY;Ce que vous voyez
Uncaught ReferenceError: process is not defined
at index-a3f1c2.js:1:2043Le navigateur n'a pas d'objet process : cette ligne déclenche une erreur dès le chargement, généralement un écran blanc. Avec Vite, les valeurs destinées au navigateur se lisent via import.meta.env et doivent être nommées VITE_quelquechose.
La correction
const apiKey = import.meta.env.VITE_API_KEY;Ce que vous voyez
const API = "http://localhost:3000/api";Il contient http://localhost:3000/api. Cette adresse n'existe que sur la machine qui a compilé le projet : la requête échouera pour tous les visiteurs. Pointez-la vers une URL publique.
La correction
const API = "https://api.example.com";Ce que vous voyez
dist/
assets/index-a3f1c2.js
assets/index-9b2e01.cssUn hébergeur statique sert index.html comme page d'entrée. Sans lui, les visiteurs obtiennent une liste de fichiers ou une 404. Vérifiez ce que votre compilation produit réellement.
Ce que vous voyez
<title>Vite + React + TS</title>Il indique « Vite + React + TS ». C'est le texte qu'afficheront les résultats de recherche et les liens partagés. Changez-le dans index.html.
La correction
<title>Your product name — what it does, in one line</title>L'onglet du navigateur et chaque résultat de recherche utilisent la balise <title>. Ajoutez-la dans index.html.
La correction
<title>Your product name — what it does, in one line</title>Les moteurs de recherche se rabattent sur un fragment extrait au hasard. Une phrase claire dans <meta name="description"> décide si les gens cliquent.
La correction
<meta name="description" content="One clear sentence about what this page is for." />Les téléphones rendent la page en largeur bureau puis dézooment : tout devient minuscule. Ajoutez <meta name="viewport" content="width=device-width, initial-scale=1"> dans index.html.
La correction
<meta name="viewport" content="width=device-width, initial-scale=1" />Partagé dans une messagerie ou sur un réseau social, votre lien apparaît comme une URL nue, sans titre ni image. Ajoutez og:title, og:description et og:image.
La correction
<meta property="og:title" content="Your product name" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://example.com/og.png" />Ce que vous voyez
<link rel="icon" type="image/svg+xml" href="/vite.svg" />L'onglet et les favoris affichent une page blanche, ou le logo hérité du modèle. Ajoutez votre propre favicon et référencez-la depuis index.html.
La correction
<link rel="icon" href="/favicon.ico" sizes="any" />Les lecteurs d'écran s'en servent pour la prononciation et les navigateurs pour proposer une traduction. Ajoutez lang="fr", ou la langue réelle de la page.
La correction
<html lang="en">Les robots indexeront le site de toute façon, mais robots.txt est l'endroit où leur indiquer votre sitemap. Nous pouvons l'ajouter à l'étape de mise en ligne.
La correction
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xmlCe que vous voyez
dist/assets/index-a3f1c2.js 2,418.55 kB │ gzip: 731.20 kB
(!) Some chunks are larger than 500 kB after minification.Sur une connexion mobile, cela fait plusieurs secondes d'écran blanc avant le moindre affichage. Découper les parties lourdes avec import() dynamique réduit fortement le premier chargement.
La correction
const Editor = lazy(() => import('./Editor'));Ce que vous voyez
dist/assets/hero-8f2a1b.png 4,102.11 kBLes images et polices volumineuses retardent le premier affichage. Convertir les images en WebP et les redimensionner à leur taille d'affichage réelle en supprime l'essentiel.
Déposez votre ZIP dans le builder. Il exécute le vrai build dans votre navigateur, et quand quelque chose casse il pointe la ligne qui compte au lieu de vous tendre tout le journal.
Ouvrir l'atelier