So installierst du React auf Saplo (SPA und Dashboard ohne Backend)

React ist heute die Standardwahl für die Erstellung von Benutzeroberflächen, aber React selbst ist kein Hosting - es ist eine UI-Bibliothek. Ein erstelltes Projekt (meistens mit Vite) ist eine Handvoll statischer HTML-, CSS- und JS-Dateien, die irgendwo mit korrektem SPA-Routing (Fallback aller Pfade auf index.html) und ohne unnötigen Hintergrundprozess bereitgestellt werden müssen. Normales Shared Hosting verlangt das manuelle Hochladen von Dateien per FTP und kümmert sich nicht um den Routen-Fallback, und kostenpflichtige Plattformen berechnen dich für jede Anfrage und jeden Build. Auf Saplo stellst du React wie jede andere Anwendung aus dem Katalog bereit: Die Engine erstellt das Projekt, stellt das fertige Verzeichnis dist unter nginx bereit und kümmert sich selbst um die Routen-Weiterleitung.

Für wen ist React auf Saplo?

Bevor du mit der Installation beginnst, prüfe, ob dies die richtige Wahl für dein Projekt ist:

• Du erstellst ein Admin-Panel oder ein Dashboard für Kunden - Saplo liefert einen fertigen Build als statische Dateien, ohne eigenen Node-Server im Speicher zu halten.
• Dein Frontend soll sich mit deiner eigenen API verbinden - Du hostest SPA neben deinem Backend (Django, Node, Docker) auf derselben Box oder separat, und gibst die API-Adresse als Umgebungsvariable für den Build ein.
• Dein Projekt benötigt kein serverseitiges Rendering - Wenn dir SEO und SSR wichtig sind, schau dir im App-Katalog den Next.js-Stack anstelle von reinem React an.
• Du möchtest Deployments mit git push anstelle des manuellen Hochladens von Dateien per FTP - Du verbindest das Repository einmal, jeder Push auf den Produktionszweig erstellt und implementiert automatisch eine neue Version.

Anforderungen

Um React auf Saplo zu installieren, benötigst du:

• Eine Box in einem beliebigen Plan, sogar Box S ist ausreichend - eine erstellte SPA ist eine Handvoll statischer Dateien, nach dem Build bleibt kein Node-Prozess im Speicher, sodass der RAM-Verbrauch nach der Installation praktisch auf null sinkt.
• Mindestens 256 MB freien RAM für den Build-Prozess (Vite kompiliert das Projekt einmal bei der Installation und bei jedem weiteren git push) und 2 GB Speicherplatz.
• Eine Domain oder Subdomain *.saploapp.pl (im Preis jedes Plans enthalten), unter der die Anwendung gehostet wird.
• Ein Git-Repository, wenn du die automatische Bereitstellung nutzen möchtest (optional für den Anfang, du kannst die Anwendung auch als .zip-Archiv über das Panel hochladen).

Schritt-für-Schritt-Installation

1. Gehe im Saplo-Panel zum App-Katalog und wähle React (Kategorie "Anwendungen").
2. Wähle Box und den Anwendungsnamen - daraus wird die Standard-Subdomain <name>.saploapp.pl erstellt.
3. Wähle die Node.js-Version für den Build (18, 20 oder 22, standardmäßig 20) und bestätige die Installation.
4. Die Engine scaffoldet das React-Gerüst über Vite (Äquivalent zu npm create vite -- --template react), installiert Abhängigkeiten und erstellt das Projekt, und der Inhalt des Verzeichnisses dist gelangt direkt in das Anwendungsverzeichnis, das von nginx bereitgestellt wird.
5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 das Startgerüst von Vite + React an - ab diesem Zeitpunkt stellst du deinen eigenen Code darauf bereit.

Bereitstellung deines eigenen Codes via Git

1. Gehe in den Anwendungsdetails zum Abschnitt Git / CI-CD und klicke auf "GitHub verbinden". Bestätige die Installation der Anwendung "Saplo Deploy" in deinem Konto oder deiner Organisation und wähle das Repository mit deinem React-Projekt aus.
2. Im Stammverzeichnis des Repositorys muss die Datei saplo.yaml liegen.
3. Committe und pushe die Datei saplo.yaml in den Produktions-Branch (standardmäßig main).
4. Jeder weitere git push in diesen Branch erstellt das Projekt und ersetzt den Inhalt des Verzeichnisses dist auf der Box. Den Status siehst du im Tab Deployments.
5. Das SPA-Routing (alle Pfade werden auf index.html umgeleitet) ist automatisch konfiguriert - du musst nichts in nginx hinzufügen.

Beispiel einer minimalen saplo.yaml-Datei für React:

name: my-project
stack: react
build:
  install: npm ci
  command: npm run build
  output: dist

React auf Saplo vs. Alternativen

Häufig gestellte Fragen

Kann ich mehrere React-Anwendungen auf einer Box hosten? Ja, der App-Katalog ermöglicht es dir, viele Module nebeneinander zu installieren, jedes mit seiner eigenen Subdomain oder Domain, solange der zugewiesene RAM und Speicherplatz deines Tarifs ausreichen.

Wie funktioniert Client-Side-Routing (React Router)? Es funktioniert ohne zusätzliche Konfiguration - der Fallback aller Pfade auf index.html ist sofort bei der Installation eingerichtet.

Muss ich Vite verwenden? Die Installation aus dem Katalog scaffoldet dein Projekt mit Vite, aber du kannst dein eigenes Projekt (auch basierend auf einem anderen Bundler) über Git bereitstellen, solange der Build die fertigen Dateien in das in build.output angegebene Verzeichnis ausgibt.

Bekomme ich SSL und eine eigene Domain? Ja, das SSL-Zertifikat ist automatisch, und eine Domain oder Subdomain *.saploapp.pl ist in jedem Tarif enthalten.

Wie ändere ich die für den Build verwendete Node.js-Version? Beim Erstellen einer Anwendung aus dem Katalog wählst du 18, 20 oder 22. Bei Bereitstellungen über Git legst du dies mit dem Feld runtime.node in saplo.yaml fest.

React auf Saplo stellst du in wenigen Minuten von Grund auf bis zu einer funktionierenden Domain bereit, und jedes weitere git push implementiert eine neue Version, ohne dass Dateien manuell übertragen werden müssen. Wenn dein Projekt SSR und besseres SEO benötigt, sieh dir im selben Katalog den Next.js-Stack an.