React-App
statisch veröffentlichen
Laden Sie den Produktions-Build aus Vite, Create React App oder einer anderen React-SPA hoch und veröffentlichen Sie ihn mit refreshsicheren Routen, HTTPS, Edge-Auslieferung und eigener Domain.
Build-Ausgabe hochladen, nicht das Quellprojekt
React-Quelldateien sind für die Entwicklung. DeployPages liefert die statischen Dateien aus, die Ihr Produktions-Build erzeugt.
Vite React
Vites Standardausgabe ist dist. Wenn vite.config.js build.outDir oder base ändert, laden Sie genau diesen Ausgabeordner hoch und testen danach die Asset-URLs.
Create React App
CRA schreibt Produktionsdateien nach build. Wenn die App unter einem Unterpfad liegt, kann die homepage-Einstellung die erzeugten Asset-URLs beeinflussen.
Andere React-SPAs
Jedes React-Setup funktioniert, wenn es index.html, JavaScript-Bundles, CSS, Bilder, Schriften und Assets als statische Dateien erzeugt.
Warum React-Apps nach dem Deployment brechen
Eine React-SPA startet trotzdem mit einem Dokument
Die meisten React Single-Page-Apps liefern eine HTML-Einstiegsdatei aus. Danach entscheidet der clientseitige Router, was nach dem Laden von JavaScript gerendert wird.
Lokal funktioniert das, weil der Dev-Server auf index.html zurückfällt. Ein einfacher statischer Host tut das nicht automatisch. Deshalb kann /dashboard in der Navigation funktionieren, aber nach einem Refresh 404 liefern.
Was beim Refresh kaputtgeht
Ein statischer Dateiserver bekommt GET /settings und sucht nach einer echten settings-Datei oder einem Ordner.
Ihr React-Build hat normalerweise index.html plus gehashte Assets. Ohne Fallback kommt 404 zurück, bevor React Router die URL lesen kann.
Wie DeployPages damit umgeht
DeployPages kann für fehlende Dokumentrouten einen SPA-Fallback nutzen und index.html statt eines harten 404 ausliefern.
Sobald das Dokument geladen ist, startet React, der Router liest die aktuelle URL und rendert den passenden Screen, ohne dass Sie eigene Rewrite-Dateien pflegen müssen.
Warum Teams das nutzen
dist oder build hochladen. Routing-Fallback, HTTPS, Kompression und Edge-Auslieferung sind Teil des Deployments, nicht eine Checkliste für jede kleine React-App.
Produktionschecks für React-Apps
Eine App kann kompilieren und online trotzdem scheitern. Prüfen Sie diese Punkte vor dem Teilen.
Asset-Basispfad
Wenn JavaScript oder CSS von der falschen URL lädt, bleibt die Seite oft leer. Vite base und CRA homepage sind die ersten Stellen zum Prüfen.
Clientseitige Routen
Testen Sie Direktaufrufe und Refreshes für wichtige Routen wie /login, /pricing, /dashboard und geteilte Deep Links.
API-Endpunkte
Eine statische React-App kann externe APIs aufrufen, führt aber selbst keinen Backend-Code aus. Server-Secrets und private API-Schlüssel gehören nicht ins Frontend-Bundle.
Umgebungsvariablen
Die meisten React-Build-Tools schreiben öffentliche Umgebungswerte beim Build ins Bundle. Nach dem Upload geänderte Werte brauchen normalerweise einen neuen Build.
React-Deployment-Workflow
App bauen
Führen Sie lokal den Produktions-Build aus, damit React, CSS und Assets in einen veröffentlichbaren statischen Ordner gebündelt werden.
Ausgabe prüfen
Kontrollieren Sie, ob der Ausgabeordner index.html und die generierten Assets enthält. Bei Vite ist das meist dist, bei Create React App meist build.
Gesamten Ordner hochladen
Laden Sie den kompletten dist- oder build-Ordner in DeployPages hoch. Nur index.html reicht nicht, weil Styles und Skripte fehlen würden.
Geroutete Seite testen
Öffnen Sie eine verschachtelte Route, aktualisieren Sie den Browser und prüfen Sie, ob die App lädt statt hostseitig 404 zu liefern.
Häufige React-Deployment-Probleme
Weiße Seite nach dem Deployment
Öffnen Sie DevTools und prüfen Sie zuerst fehlende JS- oder CSS-Dateien. Falsche base-Pfade, fehlende Assets oder der falsche Upload-Ordner verursachen viele Blank-Screens.
Refresh auf verschachtelten Routen liefert 404
Der statische Host sucht nach einer echten Datei für die Route. Nutzen Sie SPA-Fallback, damit fehlende Dokumentrouten index.html ausliefern.
Assets funktionieren lokal, aber nicht online
Prüfen Sie absolute Pfade, public/base-Einstellungen und ob der hochgeladene Ausgabeordner das generierte Asset-Verzeichnis enthält.
Änderungen an Umgebungsvariablen erscheinen nicht
Bauen Sie die App mit den neuen öffentlichen Variablen neu und laden Sie die neue Ausgabe hoch. Das ausgelieferte Bundle kann keine privaten Server-Env-Werte zur Laufzeit lesen.
React-Deployment: häufige Fragen
Q:Warum zeigt meine React-App nach dem Deployment eine weiße Seite?
Meist liegt es an falschen Asset-Pfaden oder fehlenden Bundles. Bei Vite base prüfen, bei CRA homepage prüfen und sicherstellen, dass der Upload-Ordner alle generierten Assets enthält.
Q:Muss ich nginx oder Redirects manuell konfigurieren?
Nein. DeployPages kann fehlende Routen am Edge auf index.html zurückführen, sodass Sie keine eigenen Server-Rewrites pflegen müssen.
Q:Soll ich den Projektordner oder dist hochladen?
Laden Sie den Produktions-Ausgabeordner hoch, nicht das Quellprojekt. Bei Vite ist das meist dist, bei Create React App meist build.
Q:Kann ich Umgebungsvariablen nutzen?
Ja, aber sie werden beim lokalen Build aufgelöst. DeployPages hostet die fertige statische Ausgabe; serverseitige Runtime-Injektion gehört nicht zu diesem Flow.
Q:Kann eine React-App nach dem Deployment APIs aufrufen?
Ja. Eine statische React-App kann aus dem Browser externe APIs aufrufen. Alles, was im Frontend-Code gebündelt ist, ist aber für Nutzer sichtbar; private Secrets brauchen ein Backend.
Q:Kann ich hier auch Next.js veröffentlichen?
Ja, wenn Sie Next.js als statische Website exportieren. Nutzen Sie output: 'export' und laden Sie out hoch. Server-gerenderte Next.js-Routen brauchen eine andere Laufzeit.
Q:Kann ich später eine eigene Domain verbinden?
Ja. Sobald die Seite live ist, fügen Sie die Domain in der Konsole hinzu und folgen den DNS-Hinweisen. HTTPS wird automatisch bereitgestellt, sobald der Eintrag auflöst.