So stellst du SvelteKit auf Saplo bereit (leichte App mit SSR)

SvelteKit unterscheidet sich von React und Vue bereits auf Kompilerebene - Komponenten werden zur Build-Zeit in reines JavaScript umgewandelt, ohne dass ein virtuelles DOM in den Browser geladen wird. Das Ergebnis ist ein kleineres Bundle und ein schnellerer Start, was sich besonders auf schwächeren Telefonen und langsameren Verbindungen bemerkbar macht. Mit dem Node-Adapter funktioniert SvelteKit als SSR - ein langlebiger Prozess, analog zu Next.js oder Nuxt, nicht nur ein Verzeichnis mit statischen Dateien. Bei Saplo führst du SvelteKit als verwalteten Dienst mit automatischem Neustart aus.

Für wen ist SvelteKit auf Saplo geeignet?

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

• Anwendungen, bei denen die Bundle-Größe entscheidend ist - weniger JavaScript zum Herunterladen und Parsen als bei einer vergleichbaren React- oder Vue-Anwendung.
• Websites mit echter Interaktion, nicht nur Inhalt - SvelteKit eignet sich gut für einfache Websites und komplexe Anwendungen.
• Projekte für langsamere Verbindungen und Mobiltelefone - ein kleineres Bundle verkürzt die Zeit bis zur Interaktivität.
• Du möchtest Deployments mit git push anstelle der manuellen Konfiguration eines Node-Prozesses - du verbindest das Repository einmal, und Saplo erstellt und startet den Dienst automatisch neu.

Du benötigst nur ein leichtes SPA ohne SSR? Überprüfe den App-Katalog für einen separaten Svelte-Stack (Vite, ohne Hintergrundprozess) - das ist eine andere Variante als das in diesem Tutorial beschriebene SvelteKit.

Anforderungen

Um SvelteKit auf Saplo einzurichten, benötigst du:

• Eine Box im Plan L oder höher - der Node-Adapter hält den Prozess ständig im Speicher, SSR benötigt mehr RAM-Reserve als eine gewöhnliche statische Seite,
• mindestens 512 MB freien RAM und 3 GB Speicherplatz für den Anwendungsprozess selbst,
• eine Domain oder Subdomain *.saploapp.pl im Preis jedes Plans inbegriffen,
• ein Git-Repository, wenn du automatisches Deployment 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 SvelteKit (Kategorie „Anwendungen“).
2. Wähle eine Box L oder höher und gib den Namen der Anwendung an - daraus wird die Standard-Subdomain generiert.
3. Wähle die Node.js-Version für den Build (18, 20 oder 22, Standard ist 20) und bestätige die Installation.
4. Die Engine scaffoldet ein minimales SvelteKit-Projekt, installiert und ersetzt das Standard-adapter-auto durch @sveltejs/adapter-node in svelte.config.js, baut das Projekt in das Verzeichnis build/ und startet es über Supervisor auf Port 3000, während Nginx den Traffic von der Domain auf diesen Port proxyed.
5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 die Startseite von SvelteKit an - ab diesem Zeitpunkt kannst du deinen eigenen Code darauf deployen.

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 „Saplo Deploy“-App und wähle das Repository mit dem SvelteKit-Projekt aus.
2. Stelle sicher, dass das Projekt @sveltejs/adapter-node in svelte.config.js installiert hat. Ohne diese wird der Build eine Version für eine andere Umgebung generieren, nicht für einen langlebigen Node-Prozess.
3. Platziere die Datei saplo.yaml im Stammverzeichnis des Repositorys und pushe sie auf den Produktionszweig (standardmäßig main).
4. Jeder weitere git push auf diesen Zweig löst einen Build und einen Dienstneustart aus. Den Status siehst du unter Deployments.
5. Der Build erstellt das Verzeichnis build/ mit einem Node-Server, den Saplo als verwalteten Dienst startet.

Hier ist ein Beispiel für eine minimale saplo.yaml-Datei für SvelteKit:

name: my-project
stack: sveltekit
runtime:
  node: "22"
build:
  install: npm ci
  command: npm run build
start:
  command: node build
  port: 3000

SvelteKit auf Saplo vs. Alternativen

Häufig gestellte Fragen

Was ist der Unterschied zwischen SvelteKit und dem normalen Svelte-Stack im Katalog? SvelteKit mit Node-Adapter ist SSR - ein langlebiger Prozess. Der Svelte-Stack ist ein reines SPA, das von Vite erstellt wird, ohne Hintergrundprozess, leichter zu warten, aber ohne serverseitiges Rendering.

Muss ich den Adapter in meinem eigenen Projekt manuell auf Node umstellen? Wenn dein Projekt den Standard-adapter-auto hat, tausche ihn vor der ersten Git-Bereitstellung gegen @sveltejs/adapter-node aus - andernfalls generiert der Build eine Version für eine andere Umgebung.

Wie viel RAM benötigt SvelteKit in der Praxis? Das Rezept-Manifest gibt ein Minimum von 512 MB an, aber unter realem Produktions-Traffic ist es besser, eine Box L einzuplanen, damit der SSR-Prozess Reserven für Lastspitzen hat.

Was passiert, wenn der Build fehlschlägt? Die vorherige funktionierende Version der Anwendung bleibt erhalten, Saplo ersetzt sie nicht durch eine fehlerhafte Version.

Bekomme ich SSL und meine eigene Domain? Ja, das SSL-Zertifikat ist automatisch, und die Domain oder Subdomain *.saploapp.pl ist im Preis jedes Plans enthalten.

SvelteKit auf Saplo richtest du in wenigen Minuten von Grund auf bis zu einer funktionierenden Domain ein, und jedes weitere git push startet den Dienst mit der neuen Version ohne dein Zutun neu. Wenn dein Projekt kein SSR benötigt, schau dir im selben Katalog den leichteren Svelte-Stack an.