Vite baut React-, Vue-, Svelte-, Solid- und reine JavaScript-Projekte zu einem Ordner mit statischen Dateien, dist/. Lobsite hostet diesen Ordner. Führe npm run build aus, dann npx lobsite, und die App ist unter einer *.lobsite.app-Adresse mit HTTPS live. Wenn die App clientseitiges Routing hat, sorgt eine Einstellung dafür, dass Deep Links funktionieren.
Ein Browserspiel mit einer Vite-Vorlage erstellen? Der Phaser-Hosting-Anleitung deckt neben diesem Bereitstellungsworkflow Spielressourcen, Leinwandgrößen und Spieltest-Builds ab.
So funktioniert es
- Bau mit
npm run build(das istvite build). Die App landet indist/, mit gehashten Dateien indist/assets/. - Führe
npx lobsiteaus im Projekt. Es deploytdist/, nichtpublic/, das Vite schon in den Build kopiert hat. Das erste Deploy braucht kein Konto und hält 6 Stunden. - Schalte den Single-Page-Modus ein, wenn die App einen Router hat: Füge
spa = truezulobsite.tomlhinzu oder aktiviere Single-Page-App in den Einstellungen der Website. Dann behalte die Website mit dem Übernahme-Link, in einem kostenlosen Konto.
Routing und Single-Page-Modus
Eine Vite-App mit React Router, Vue Router oder TanStack Router hat eine einzige index.html. Wer /settings direkt öffnet, fragt den Server nach einer Datei, die es nicht gibt. Mit eingeschaltetem Single-Page-Modus beantwortet Lobsite solche Pfade mit deiner index.html, und der Router zeichnet die Seite:
# lobsite.toml
spa = true
Nur Seitenanfragen bekommen die App. Eine fehlende Datei wie ein altes /assets/index-3f9a.js bekommt ein echtes 404, sodass ein Besucher, der nach einem Deploy noch die vorherige Version offen hat, einen klaren Fehler sieht statt HTML anstelle eines Skripts. Das Deploy gibt einen Tipp aus, wenn package.json einen Router enthält und der Single-Page-Modus aus ist. Mehr in der Doku.
vite.config und der Build
basebleibt beim Standard/: Die App wird von der obersten Ebene ihrer Adresse ausgeliefert. Setz es nur für eine GitHub-Pages-Projektseite und entferne es beim Umzug.- Umgebungsvariablen, die mit
VITE_beginnen, werden in den Build geschrieben. Jeder, der die App öffnet, kann sie sehen, also halte Geheimnisse heraus;.env-Dateien selbst werden nie deployt. - Mehrere Seiten (
build.rollupOptions.inputmit mehr als einer HTML-Datei) sind eine mehrseitige Website: Jede Seite ist eine Datei, und der Single-Page-Modus ist nicht nötig. npm run previewliefertdist/lokal aus – die schnellste Prüfung vor einem Deploy.
Caching gehashter Dateien
Vite schreibt einen Hash des Dateiinhalts in den Namen, etwa index-3f9a.js, sodass sich eine Datei mit einem bestimmten Namen nie ändert. Lobsite speichert Dateien ebenfalls nach Inhalt, also lädt ein Deploy nur die geänderten Chunks hoch. Damit Browser diese Dateien ein Jahr behalten, füge eine Header-Regel hinzu:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html wird immer neu geprüft, sodass Besucher direkt nach einem Deploy die neue Version bekommen.
spa = true in lobsite.toml oder ein Schalter im Dashboard: Deep Links öffnen deine App, fehlende Dateien ergeben weiterhin 404.
Dateien werden nach ihrem Hash gespeichert. Ein erneutes Deploy einer unveränderten Website lädt 0 Bytes hoch.
Vorschau ansehen, bevor es live geht. Mit einem Klick zurückrollen, samt Weiterleitungen.
Jede Website bekommt ab dem ersten Deploy eine *.lobsite.app-Adresse mit HTTPS.
Weiterleitungen, Header und Formulare stehen in lobsite.toml und reisen mit jedem Deploy mit.
Ein Deploy ohne Konto ist 6 Stunden live. Mit dem Übernahme-Link behältst du es, kostenlos.
Vite-Hoster im Vergleich
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Deep Links in einer Single-Page-App | spa = true oder ein Schalter im Dashboard |
Eine _redirects-Regel |
Ein Rewrite in vercel.json |
Nein: index.html nach 404.html kopieren, ausgeliefert mit Status 404 |
| Fehlende Skriptdateien | 404 | Die index.html der App |
Die index.html der App |
404 |
| Build auf dem Server | Nein: du deployst dist/ |
Ja | Ja | In GitHub Actions |
| Konto vor dem ersten Deploy | Nein: 6 Stunden live, dann kostenlos behalten | Ja | Ja | Ja, und ein Repository |
| Eigene Domain | Ja, kostenlos | Ja | Ja | Ja |
Netlify und Vercel bauen aus Git und führen Serverfunktionen aus. Lobsite ist der schnellste Weg, eine gebaute Vite-App von deinem Rechner, aus CI oder von einem KI-Agent online zu bringen, mit Single-Page-Routing per Zeile oder Klick.
Häufige Fragen
Warum zeigen Seiten meiner Vite-App außer der Startseite „Not found“?
Die App nutzt clientseitiges Routing, und der Server hat für diese Pfade keine Datei. Schalte den Single-Page-Modus ein: spa = true in lobsite.toml oder Single-Page-App in den Einstellungen der Website.
Führt Lobsite meinen Vite-Build aus?
Nein. Baue auf deinem Rechner oder in CI und deploye dann dist/. Was du mit npm run preview geprüft hast, geht genau so live.
Kann ich Vite-Umgebungsvariablen nutzen?
Ja, die mit VITE_, die beim Build in die App geschrieben werden. Baue nach einer Änderung neu. Alles Geheime gehört auf einen Server, nicht in eine Vite-App.
Braucht eine mehrseitige Vite-Website den Single-Page-Modus?
Nein. Jede HTML-Seite ist eine eigene Datei, und about.html öffnet sich unter /about. Lass den Single-Page-Modus aus, damit eine vertippte Adresse deine 404.html bekommt.