Die meisten React-Apps werden heute mit Vite zu einem Ordner statischer Dateien gebaut: eine index.html und das JavaScript, das jede Seite zeichnet. 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. Deep Links mit React Router funktionieren, sobald der Single-Page-Modus an ist.
So funktioniert es
- Bau die App mit
npm run build. Ein Vite-Projekt schreibtdist/; ein älteres Create-React-App-Projekt schreibtbuild/. - Führe
npx lobsiteaus im Projekt. Es findet den Build-Ordner und deployt ihn. Das erste Deploy braucht kein Konto und hält 6 Stunden. - Schalte den Single-Page-Modus ein für React Router:
spa = trueinlobsite.tomloder Single-Page-App in den Einstellungen der Website. Behalte die Website mit dem Übernahme-Link, in einem kostenlosen Konto.
React Router und Deep Links
Mit createBrowserRouter oder <BrowserRouter> sehen Adressen aus wie /orders/42. Ein Klick auf einen Link funktioniert überall, weil React Router die Seite im Browser wechselt. Wer diese Adresse direkt öffnet oder neu lädt, fragt den Server nach /orders/42, und das ist keine Datei. Der Single-Page-Modus beantwortet die Anfrage mit deiner index.html, und React Router zeichnet die richtige Seite.
<HashRouter>(Adressen wie/#/orders/42) funktioniert ohne Single-Page-Modus, da der Server immer nur/sieht. Browser-Routen sehen besser aus und sind das, was Suchmaschinen erwarten.- Der Framework-Modus von React Router mit
ssr: falsebaut ebenfalls eine Single-Page-App. Mit gesetztemprerenderwerden die aufgeführten Seiten als eigene HTML-Dateien geschrieben, und der Single-Page-Modus deckt den Rest ab. - TanStack Router und wouter funktionieren genauso wie React Router.
Das Deploy zeigt einen Tipp, wenn es einen Router in package.json findet und der Single-Page-Modus aus ist.
Umstieg von Create React App
Das React-Team hat Create React App im Februar 2025 für veraltet erklärt und empfiehlt für neue Apps ein Framework oder Vite. Ein CRA-Projekt lässt sich weiterhin deployen: npx lobsite findet build/ und überspringt public/, das CRA in den Build kopiert. Der Wechsel zu Vite ändert ein paar Dinge beim Hosting:
- der Build-Ordner wird zu
dist/, der genauso gefunden wird; REACT_APP_-Umgebungsvariablen werden zuVITE_-Variablen, gelesen mitimport.meta.env;index.htmlzieht vonpublic/in den obersten Projektordner.
Braucht die App Server-Rendering, sieh dir stattdessen Next.js mit statischem Export an oder einen Hoster, der React auf einem Server ausführt.
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.
Lass ein Formular auf /_lobsite/forms/contact zeigen. Spamfilter inklusive.
Ein Deploy ohne Konto ist 6 Stunden live. Mit dem Übernahme-Link behältst du es, kostenlos.
React-Hoster im Vergleich
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Deep Links mit React Router | spa = true oder ein Schalter im Dashboard |
Eine _redirects-Regel |
Ein Rewrite in vercel.json |
Nein: HashRouter oder 404.html mit Status 404 |
| Fehlende Skriptdateien nach einem Deploy | 404, ein klarer Fehler | Die index.html der App |
Die index.html der App |
404 |
| Server-Rendering | Nein | Ja, mit einem Framework | Ja, mit einem Framework | Nein |
| Konto vor dem ersten Deploy | Nein: 6 Stunden live, dann kostenlos behalten | Ja | Ja | Ja, und ein Repository |
| Formulare ohne Backend | Ja, sobald die Website in einem Konto ist | Ja | Nein | Nein |
| Eigene Domain | Ja, kostenlos | Ja | Ja | Ja |
Für eine React-App, die im Browser läuft – und genau das baut Vite –, deployt Lobsite sie mit einem Befehl, lädt nur die geänderten Chunks hoch und behält eine Vorschau-URL für jedes Deploy.
Häufige Fragen
Warum zeigt das Neuladen einer React-Router-Seite „Not found“?
Die Adresse existiert nur innerhalb der App, daher hat der Server keine Datei dafür. Schalte den Single-Page-Modus mit spa = true in lobsite.toml ein oder mit Single-Page-App in den Einstellungen der Website.
Kann ich hier ein Create-React-App-Projekt hosten?
Ja. Führe npm run build und npx lobsite aus; der Ordner build/ wird gefunden und deployt. Schalte den Single-Page-Modus ein, wenn die App React Router mit Browser-Routen nutzt.
Kann ein React-Formular Einsendungen ohne Backend schicken?
Ja, wenn das Formular im gebauten HTML steht, zum Beispiel in index.html, und an /_lobsite/forms/contact sendet. Ein Formular, das nur React zeichnet, wird beim Deploy nicht gefunden, und seine Einsendungen werden abgelehnt. Die Doku zu Formularen erklärt, wie du das Formular im HTML hältst und es mit fetch() sendest.
Brauche ich Next.js, um eine React-App zu hosten?
Nein. Eine mit Vite gebaute React-App besteht aus einfachen Dateien und läuft auf jedem statischen Hoster. Next.js ist für Server-Rendering oder vorgerenderte Seiten gedacht und hat einen eigenen statischen Export.