La plupart des applications React sont aujourd’hui buildées avec Vite en un dossier de fichiers statiques : un index.html et le JavaScript qui dessine chaque page. Lobsite héberge ce dossier. Lancez npm run build, puis npx lobsite, et l’application est en ligne à une adresse *.lobsite.app en HTTPS. Les liens profonds React Router fonctionnent dès que le mode monopage est activé.
Comment ça marche
- Buildez l’application avec
npm run build. Un projet Vite écritdist/; un ancien projet Create React App écritbuild/. - Lancez
npx lobsitedans le projet. Il trouve le dossier de build et le déploie. Le premier déploiement ne demande pas de compte et dure 6 heures. - Activez le mode monopage pour React Router :
spa = truedanslobsite.toml, ou Application monopage dans les réglages du site. Gardez le site grâce au lien de récupération, dans un compte gratuit.
React Router et liens profonds
Avec createBrowserRouter ou <BrowserRouter>, les adresses ressemblent à /orders/42. Cliquer sur un lien marche partout, car React Router change la page dans le navigateur. Ouvrir cette adresse directement, ou la recharger, demande /orders/42 au serveur, qui n’est pas un fichier. Le mode monopage y répond avec votre index.html, et React Router affiche la bonne page.
<HashRouter>(adresses comme/#/orders/42) fonctionne sans mode monopage, puisque le serveur ne voit jamais que/. Les routes navigateur sont plus jolies et c’est ce qu’attendent les moteurs de recherche.- Le mode framework de React Router avec
ssr: falsebuilde aussi une application monopage. Avecprerender, les pages listées sont écrites en fichiers HTML séparés, et le mode monopage couvre le reste. - TanStack Router et wouter fonctionnent comme React Router.
Le déploiement affiche un conseil quand il trouve un routeur dans package.json et que le mode monopage est désactivé.
Venir de Create React App
L’équipe React a déprécié Create React App en février 2025 et recommande un framework ou Vite pour les nouvelles applications. Un projet CRA se déploie toujours : npx lobsite trouve build/ et ignore public/, que CRA copie dans le build. Passer à Vite change quelques points côté hébergement :
- le dossier de build devient
dist/, trouvé de la même façon ; - les variables d’environnement
REACT_APP_deviennent desVITE_, lues avecimport.meta.env; index.htmlpasse depublic/au dossier racine du projet.
Si l’application a besoin d’un rendu serveur, regardez plutôt Next.js avec un export statique, ou un hébergeur qui exécute React sur un serveur.
spa = true dans lobsite.toml, ou un interrupteur dans le tableau de bord : les liens profonds ouvrent votre application, les fichiers manquants renvoient toujours 404.
Les fichiers sont stockés selon leur hash. Redéployer un site inchangé envoie 0 octet.
Prévisualisez avant la mise en ligne. Revenez en arrière en un clic, redirections comprises.
Chaque site reçoit une adresse *.lobsite.app en HTTPS dès le premier déploiement.
Faites pointer un formulaire vers /_lobsite/forms/contact. Filtrage du spam inclus.
Un déploiement sans compte reste en ligne 6 heures. Le lien de récupération le conserve, gratuitement.
Hébergeurs React comparés
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Liens profonds React Router | spa = true, ou un interrupteur dans le tableau de bord |
Une règle _redirects |
Une réécriture dans vercel.json |
Non : HashRouter, ou 404.html servi avec un statut 404 |
| Fichiers de script manquants après un déploiement | 404, une erreur claire | Le index.html de l’application |
Le index.html de l’application |
404 |
| Rendu serveur | Non | Oui, avec un framework | Oui, avec un framework | Non |
| Compte avant le premier déploiement | Non : en ligne 6 heures, puis à garder gratuitement | Oui | Oui | Oui, et un dépôt |
| Formulaires sans backend | Oui, une fois le site dans un compte | Oui | Non | Non |
| Domaine personnalisé | Oui, gratuit | Oui | Oui | Oui |
Pour une application React qui tourne dans le navigateur, ce que Vite builde, Lobsite la déploie en une commande, n’envoie que les morceaux modifiés et garde une URL d’aperçu pour chaque déploiement.
Questions fréquentes
Pourquoi recharger une page React Router affiche-t-il « Not found » ?
L’adresse n’existe que dans l’application, donc le serveur n’a pas de fichier pour elle. Activez le mode monopage avec spa = true dans lobsite.toml, ou Application monopage dans les réglages du site.
Puis-je héberger ici un projet Create React App ?
Oui. Lancez npm run build et npx lobsite ; le dossier build/ est trouvé et déployé. Activez le mode monopage s’il utilise React Router avec des routes navigateur.
Un formulaire React peut-il envoyer des réponses sans backend ?
Oui, si le formulaire est dans le HTML buildé, par exemple dans index.html, et envoie vers /_lobsite/forms/contact. Un formulaire que seul React dessine n’est pas détecté au déploiement, et ses réponses sont refusées. La doc des formulaires explique comment garder le formulaire dans le HTML et l’envoyer avec fetch().
Ai-je besoin de Next.js pour héberger une application React ?
Non. Une application React buildée avec Vite, ce sont de simples fichiers qui tournent sur n’importe quel hébergeur statique. Next.js sert au rendu serveur ou aux pages prérendues, et a son propre export statique.