Vite builde des projets React, Vue, Svelte, Solid et JavaScript pur en un dossier de fichiers statiques, dist/. Lobsite héberge ce dossier. Lancez npm run build, puis npx lobsite, et l’application est en ligne à une adresse *.lobsite.app en HTTPS. Si l’application a un routage côté client, un réglage suffit pour que les liens profonds fonctionnent.
Créer un jeu par navigateur avec un modèle Vite ? Le Guide d'hébergement Phaser couvre les ressources du jeu, le dimensionnement du canevas et les versions de test de jeu parallèlement à ce flux de travail de déploiement.
Comment ça marche
- Buildez avec
npm run build(c’est-à-direvite build). L’application arrive dansdist/, avec des fichiers hashés dansdist/assets/. - Lancez
npx lobsitedans le projet. Il déploiedist/, paspublic/, que Vite a déjà copié dans le build. Le premier déploiement ne demande pas de compte et dure 6 heures. - Activez le mode monopage si l’application a un routeur : ajoutez
spa = trueàlobsite.toml, ou activez Application monopage dans les réglages du site. Puis gardez le site grâce au lien de récupération, dans un compte gratuit.
Routage et mode monopage
Une application Vite avec React Router, Vue Router ou TanStack Router a un seul index.html. Ouvrir /settings directement demande au serveur un fichier qui n’existe pas. Avec le mode monopage, Lobsite répond à ces chemins avec votre index.html, et le routeur affiche la page :
# lobsite.toml
spa = true
Seules les requêtes de page reçoivent l’application. Un fichier manquant comme un ancien /assets/index-3f9a.js reçoit un vrai 404 : un visiteur qui a encore l’ancienne version ouverte après un déploiement voit une erreur claire, pas du HTML à la place d’un script. Le déploiement affiche un conseil quand package.json contient un routeur et que le mode monopage est désactivé. Plus d’infos dans la doc.
vite.config et le build
basereste à sa valeur par défaut,/: l’application est servie depuis la racine de son adresse. Ne le réglez que pour un site de projet GitHub Pages, et retirez-le quand vous déménagez.- Les variables d’environnement commençant par
VITE_sont écrites dans le build. Toute personne qui ouvre l’application peut les voir : n’y mettez pas de secrets ; les fichiers.enveux-mêmes ne sont jamais déployés. - Plusieurs pages (
build.rollupOptions.inputavec plus d’un fichier HTML) forment un site multipage : chaque page est un fichier, et le mode monopage n’est pas nécessaire. npm run previewsertdist/en local, la vérification la plus rapide avant un déploiement.
Mise en cache des fichiers hashés
Vite met un hash du contenu de chaque fichier dans son nom, comme index-3f9a.js : un fichier d’un nom donné ne change donc jamais. Lobsite stocke aussi les fichiers par contenu, donc un déploiement n’envoie que les morceaux modifiés. Pour que les navigateurs gardent ces fichiers un an, ajoutez une règle d’en-tête :
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html est toujours revérifié, donc les visiteurs reçoivent la nouvelle version juste après un déploiement.
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.
Redirections, en-têtes et formulaires vivent dans lobsite.toml et accompagnent chaque déploiement.
Un déploiement sans compte reste en ligne 6 heures. Le lien de récupération le conserve, gratuitement.
Hébergeurs Vite comparés
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Liens profonds dans une application monopage | spa = true, ou un interrupteur dans le tableau de bord |
Une règle _redirects |
Une réécriture dans vercel.json |
Non : copier index.html en 404.html, servi avec un statut 404 |
| Fichiers de script manquants | 404 | Le index.html de l’application |
Le index.html de l’application |
404 |
| Build sur le serveur | Non : vous déployez dist/ |
Oui | Oui | Dans GitHub Actions |
| Compte avant le premier déploiement | Non : en ligne 6 heures, puis à garder gratuitement | Oui | Oui | Oui, et un dépôt |
| Domaine personnalisé | Oui, gratuit | Oui | Oui | Oui |
Netlify et Vercel buildent depuis Git et exécutent des fonctions serveur. Lobsite est le moyen le plus rapide de mettre en ligne une application Vite buildée, depuis votre machine, votre CI ou un agent IA, avec un routage monopage en une ligne ou un clic.
Questions fréquentes
Pourquoi les pages de mon application Vite autres que l’accueil affichent-elles « Not found » ?
L’application utilise un routage côté client, et le serveur n’a pas de fichier pour ces chemins. Activez le mode monopage : spa = true dans lobsite.toml, ou Application monopage dans les réglages du site.
Lobsite lance-t-il mon build Vite ?
Non. Buildez sur votre machine ou en CI, puis déployez dist/. Ce que vous avez vérifié avec npm run preview est exactement ce qui est mis en ligne.
Puis-je utiliser des variables d’environnement Vite ?
Oui, celles en VITE_, écrites dans le build au moment où vous le lancez. Rebuildez après les avoir modifiées. Tout ce qui est secret doit rester sur un serveur, pas dans une application Vite.
Un site Vite multipage a-t-il besoin du mode monopage ?
Non. Chaque page HTML est un fichier à part, et about.html s’ouvre à /about. Laissez le mode monopage désactivé, pour qu’une adresse mal tapée reçoive votre 404.html.