Vite bouwt React-, Vue-, Svelte-, Solid- en gewone JavaScript-projecten tot een map met statische bestanden, dist/. Lobsite host die map. Voer npm run build uit, dan npx lobsite, en de app staat live op een *.lobsite.app-adres met HTTPS. Heeft de app routing aan de clientkant, dan zorgt één instelling ervoor dat deeplinks werken.
Een browsergame maken met een Vite-sjabloon? De Phaser hostinggids omvat game-items, canvasgroottes en playtest-builds naast deze implementatieworkflow.
Zo werkt het
- Bouw met
npm run build(dat isvite build). De app komt indist/, met gehashte bestanden indist/assets/. - Voer
npx lobsiteuit in het project. Het deploytdist/, nietpublic/, dat Vite al naar de build heeft gekopieerd. De eerste deploy heeft geen account nodig en duurt 6 uur. - Zet de single-page-modus aan als de app een router heeft: voeg
spa = truetoe aanlobsite.toml, of zet Single-page-app aan in de instellingen van de site. Houd de site daarna met de claimlink, in een gratis account.
Routing en single-page-modus
Een Vite-app met React Router, Vue Router of TanStack Router heeft één index.html. Wie /settings direct opent, vraagt de server om een bestand dat niet bestaat. Met de single-page-modus aan beantwoordt Lobsite die paden met je index.html, en de router tekent de pagina:
# lobsite.toml
spa = true
Alleen paginaverzoeken krijgen de app. Een ontbrekend bestand zoals een oude /assets/index-3f9a.js krijgt een echte 404, zodat een bezoeker die na een deploy de vorige versie nog open heeft een duidelijke fout krijgt en geen HTML in plaats van een script. De deploy toont een tip als package.json een router bevat en de single-page-modus uit staat. Meer in de docs.
vite.config en de build
baseblijft op de standaard,/: de app wordt vanaf de top van zijn adres geserveerd. Zet het alleen voor een GitHub Pages-projectsite en haal het weg als je verhuist.- Omgevingsvariabelen die met
VITE_beginnen, worden in de build geschreven. Iedereen die de app opent, kan ze zien, dus zet er geen geheimen in;.env-bestanden zelf worden nooit gedeployd. - Meerdere pagina's (
build.rollupOptions.inputmet meer dan één HTML-bestand) vormen een site met meerdere pagina's: elke pagina is een bestand, en de single-page-modus is niet nodig. npm run previewserveertdist/lokaal, de snelste controle vóór een deploy.
Caching van gehashte bestanden
Vite zet een hash van de inhoud van elk bestand in de naam, zoals index-3f9a.js, dus een bestand met een bepaalde naam verandert nooit. Lobsite slaat bestanden ook op inhoud op, dus een deploy uploadt alleen de gewijzigde chunks. Om browsers die bestanden een jaar te laten bewaren, voeg je een headerregel toe:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html wordt altijd opnieuw gecontroleerd, dus bezoekers krijgen direct na een deploy de nieuwe versie.
spa = true in lobsite.toml, of één schakelaar in het dashboard: deeplinks openen je app, ontbrekende bestanden geven nog steeds 404.
Bestanden worden op hun hash opgeslagen. Een ongewijzigde site opnieuw deployen uploadt 0 bytes.
Bekijk een voorbeeld voordat het live gaat. Zet in één klik terug, inclusief doorverwijzingen.
Elke site krijgt vanaf de eerste deploy een *.lobsite.app-adres met HTTPS.
Doorverwijzingen, headers en formulieren staan in lobsite.toml en reizen mee met elke deploy.
Een deploy zonder account is 6 uur live. Met de claimlink houd je hem, gratis.
Vite-hosts vergeleken
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Deeplinks in een single-page-app | spa = true, of een schakelaar in het dashboard |
Een _redirects-regel |
Een rewrite in vercel.json |
Nee: kopieer index.html naar 404.html, geserveerd met status 404 |
| Ontbrekende scriptbestanden | 404 | De index.html van de app |
De index.html van de app |
404 |
| Build op de server | Nee: je deployt dist/ |
Ja | Ja | In GitHub Actions |
| Account vóór de eerste deploy | Nee: 6 uur live, daarna gratis houden | Ja | Ja | Ja, en een repository |
| Eigen domein | Ja, gratis | Ja | Ja | Ja |
Netlify en Vercel bouwen vanuit Git en draaien serverfuncties. Lobsite is de snelste manier om een gebouwde Vite-app vanaf je computer, vanuit CI of een AI-agent online te zetten, met single-page-routing in één regel of één klik.
Veelgestelde vragen
Waarom tonen pagina's van mijn Vite-app behalve de homepage ‘Not found’?
De app gebruikt routing aan de clientkant, en de server heeft voor die paden geen bestand. Zet de single-page-modus aan: spa = true in lobsite.toml, of Single-page-app in de instellingen van de site.
Voert Lobsite mijn Vite-build uit?
Nee. Bouw op je eigen computer of in CI en deploy dan dist/. Wat je met npm run preview hebt gecontroleerd, is precies wat live gaat.
Kan ik Vite-omgevingsvariabelen gebruiken?
Ja, de VITE_-variabelen, die bij het bouwen in de build worden geschreven. Bouw opnieuw nadat je ze hebt veranderd. Alles wat geheim is, hoort op een server, niet in een Vite-app.
Heeft een Vite-site met meerdere pagina's de single-page-modus nodig?
Nee. Elke HTML-pagina is een eigen bestand, en about.html opent op /about. Laat de single-page-modus uit, zodat een verkeerd getypt adres je 404.html krijgt.