Skip to main content

​
Einführung

Um eine React-Router-Anwendung (ehemals Remix) auf Square Cloud zu entwickeln und zu hosten, ist es wichtig, einer strukturierten Abfolge von Konfigurationen und Voraussetzungen zu folgen. Dieser technische Leitfaden deckt den gesamten Prozess ab, von der anfänglichen Einrichtung bis zum Produktions-Deployment.

​
Voraussetzungen

  • Square Cloud Konto: Registriere dich über die Registrierungsseite mit deiner E-Mail-Adresse.
  • Aktiver Plan: Stellt dedizierte Ressourcen und optimierte Leistung für deine Anwendung sicher. Sieh dir unsere verfügbaren Pläne an und wähle den passendsten für deine Bedürfnisse.
Diese Anleitung nutzt die Node.js-Runtime. Getestet mit React Router 8 auf Node.js 24 im September 2026.
Remix ist in React Router aufgegangen: Der Framework-Modus von React Router ist seit v7 der Nachfolger von Remix v2. Neue Projekte verwenden create-react-router statt create-remix. Wenn du noch ein Remix-v2-Projekt hast, lies Bestehende Remix-v2-Projekte.

​
Projekt erstellen

Du brauchst Node.js 22.22 oder neuer und npm auf deinem Rechner. Falls du sie noch nicht hast, lade sie von der offiziellen Node.js-Website herunter. Erstelle ein Projekt mit dem offiziellen Initializer:
Der Initializer erstellt das Projekt und bietet an, seine Abhängigkeiten zu installieren. Wechsle in den Projektordner und starte den Entwicklungsserver:
Der Entwicklungsserver lauscht üblicherweise auf http://localhost:5173/. Routen werden in app/routes.ts deklariert, und die Vorlage ordnet die Startseite der Datei app/routes/home.tsx zu. Ersetze den Inhalt dieser Datei durch ein einfaches Beispiel:
app/routes/home.tsx

​
Für die Produktion bauen

Dadurch entsteht der Ordner build/: build/client enthält die statischen Assets und build/server den Servercode. Die Build-Tools (@react-router/dev und Vite) sind devDependencies, die Square Cloud nicht installiert, führe den Build also auf deinem Rechner aus.

​
Port und Host

Hier musst du nichts ändern: Die Vorlage enthält @react-router/serve, einen Node.js-Produktionsserver, und ein start-Skript, das ihn ausführt. react-router-serve liest die Umgebungsvariablen PORT und HOST, die Square Cloud auf 80 und 0.0.0.0 setzt.
package.json

​
Square Cloud konfigurieren

Erstelle eine Datei squarecloud.app im Stammverzeichnis deines Projekts:
squarecloud.app
RUNTIME=nodejs wählt die Node.js-Runtime aus, ohne dass eine MAIN-Datei erforderlich ist, und START ersetzt den Standard-Startbefehl. Beim Upload über das Dashboard legst du denselben Startbefehl fest.

​
Was in die ZIP-Datei gehört

  • build/, der Produktions-Build.
  • package.json.
  • squarecloud.app.
Lass node_modules weg: Square Cloud installiert deine dependencies, einschließlich @react-router/serve, beim ersten Start.

​
Bestehende Remix-v2-Projekte

Remix-v2-Projekte werden auf dieselbe Weise deployt: Führe npm run build lokal aus und behalte START=npm run start bei. Das start-Skript führt dabei @remix-run/serve aus, das ebenfalls PORT und HOST liest:
Projekte, die noch den klassischen Remix-Compiler (ohne Vite) verwenden, nutzen stattdessen remix-serve ./build/index.js. Um auf React Router umzusteigen, folge der offiziellen Upgrade-Anleitung.

​
Deployen und prüfen

​
Über das Dashboard

1

Upload-Seite aufrufen

Rufe die Upload-Seite auf und lade die ZIP-Datei deines Projekts hoch.
2

Umgebung konfigurieren

Nachdem du deine ZIP-Datei hochgeladen hast, musst du den Namen, die Hauptdatei oder Runtime-Umgebung und weitere Einstellungen für dein Projekt konfigurieren.
Wenn du ein Web-Projekt hochlädst, achte darauf, “Web Publication” auszuwählen und deinem Projekt eine Subdomain zuzuweisen.
3

Projekt bereitstellen

Klicke abschließend auf die Schaltfläche “Deploy”, um dein Projekt auf Square Cloud zu hosten.
Nach dem Deploy kannst du den Status und die Logs deines Projekts über das Dashboard überwachen.
Anwendung wird auf Square Cloud hochgeladen
4

Bestätige, dass deine App live ist

Dein erstes Deploy dauert in der Regel weniger als eine Minute. Warte im Dashboard, bis der Status deiner Anwendung als “running” angezeigt wird, und prüfe die Logs auf Startfehler.
Wenn du eine Website oder API bereitgestellt hast, öffne https://<deine-subdomain>.squareweb.app in deinem Browser: du solltest sehen, dass deine Anwendung reagiert. Wenn du einen Bot bereitgestellt hast, sende ihm einen Befehl, um zu bestätigen, dass er online ist.
App startet nicht? Im Leitfaden zur Fehlerbehebung findest du die häufigsten Ursachen und Lösungen.

​
Über die CLI

Um diese Methode zu nutzen, braucht dein Projekt eine Konfigurationsdatei mit dem Namen squarecloud.app im Stammverzeichnis. Sie teilt Square Cloud mit, wie deine Anwendung ausgeführt wird.

Leitfaden zur Konfigurationsdatei

Erfahre, wie du die Konfigurationsdatei squarecloud.app erstellst, die die Umgebung deiner Anwendung definiert.
1

CLI installieren

Installiere die Square Cloud CLI. Falls du sie bereits hast, führe denselben Befehl aus, um sie zu aktualisieren:
2

Anmelden

Führe den folgenden Befehl aus. Er öffnet deinen Browser: Bestätige dort die Anmeldung, und die CLI ist einsatzbereit. Es gibt keinen API-Schlüssel zu kopieren. Für Skripte und CI siehe CLI-Authentifizierung.
3

Projekt hochladen

Führe in deinem Projektordner den folgenden Befehl aus. Die CLI packt den aktuellen Ordner als ZIP, lässt dabei weg, was in der squarecloud.ignore steht, und lädt ihn hoch:
Um eine selbst erstellte ZIP-Datei hochzuladen, übergib sie mit --file:
4

Bestätige, dass deine App live ist

Dein erstes Deploy dauert in der Regel weniger als eine Minute. Prüfe den Status und die Logs deiner Anwendung direkt im Terminal:
Wenn du eine Website oder API bereitgestellt hast, öffne https://<deine-subdomain>.squareweb.app in deinem Browser: du solltest sehen, dass deine Anwendung reagiert. Wenn du einen Bot bereitgestellt hast, sende ihm einen Befehl, um zu bestätigen, dass er online ist.
App startet nicht? Im Leitfaden zur Fehlerbehebung findest du die häufigsten Ursachen und Lösungen.

​
Häufige Fehler

​
Eigene Domain

Um eine eigene Domain (z. B. mysite.com) anstelle der Standard-URL mysite.squareweb.app zu verwenden, benötigst du den Standard-Plan oder höher. Die Standard-URL ergibt sich aus dem Feld SUBDOMAIN in der Konfigurationsdatei. Um deine Domain zu verbinden, folge der Anleitung wie du deine eigene Domain einrichtest.

​
Mindestanforderungen an den Arbeitsspeicher

Minimum: 512MB RAM für Websites und APIs, genug für einen statischen Build auf der statischen Runtime. Für Apps, die Seiten auf einem Server rendern (Next.js, Nuxt, Angular SSR und ähnliche), empfehlen wir mindestens 1GB RAM. Für größere Anwendungen solltest du mehr RAM zuweisen, damit der Anwendung nicht der Speicher ausgeht und sie abstürzt.

​
Diese Seite konnte nicht gefunden werden.

Prüfe, ob die Subdomain/Domain mit dem übereinstimmt, was im Feld SUBDOMAIN oder in den Einstellungen der eigenen Domain konfiguriert ist. Wenn du die Seite gerade erst hochgeladen hast, warte bis zu 60 Sekunden, bis Square den ersten Zugriff aktiviert.

​
Die Seite hat zu lange zum Antworten gebraucht…

Dein Server muss auf Port 80 und Host 0.0.0.0 lauschen. Square Cloud setzt in deiner Anwendung die Umgebungsvariablen PORT (80) und HOST (0.0.0.0): Lies sie in deinem Code aus, statt andere Werte fest einzutragen. Ein Server, der nur auf localhost oder 127.0.0.1 lauscht, erhält nie Anfragen.

​
Nächste Schritte

Umgebungsvariablen

Halte Geheimnisse und Einstellungen aus deinem Code heraus und lies sie zur Laufzeit.

Eigene Domain

Stelle deine App unter deiner eigenen Domain bereit, ab dem Standard-Plan.

Fehlerbehebung

Behebe Probleme mit einer App, die nicht startet, oder einer Website, die nicht antwortet.
Mehr über React Router findest du in der offiziellen React-Router-Dokumentation.

​
Kontaktiere uns

Falls du weiterhin technische Schwierigkeiten hast, steht dir unser spezialisiertes Support-Team zur Verfügung. Kontaktiere uns und wir helfen dir gerne, jedes Problem zu lösen: die Qualität unseres Supports ist ein wichtiger Grund, warum Entwickler Square Cloud mit 4,9/5 bei 402 Bewertungen auf Google und Trustpilot bewerten.