So stellst du Svelte (plain SPA) auf Saplo bereit

Svelte kompiliert Komponenten bereits während des Builds zu reinem JavaScript, ohne ein in den Browser geladenes virtuelles DOM. Das resultierende Bundle ist daher eines der kleinsten unter den gängigen Frameworks. Als einfache SPA (ohne SSR, ohne das SvelteKit-Framework) wird Svelte von Vite zu einer Handvoll statischer HTML-, CSS- und JS-Dateien kompiliert, genau wie React oder Vue. Auf Saplo kannst du Svelte (als einfache SPA) genauso installieren wie jede andere Anwendung aus dem Katalog: Die Engine scaffoldet das Projekt, kompiliert es mit Vite und stellt das fertige Verzeichnis dist unter Nginx bereit, ohne dass nach dem Build ein Node-Prozess im Hintergrund läuft.

Für wen ist Svelte (Plain SPA) auf Saplo geeignet?

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

• Du baust ein Panel oder Dashboard für Kunden - Saplo liefert einen fertigen Build als statische Dateien, ohne einen eigenen Node-Prozess im Hintergrund.
• Das Frontend soll sich mit deiner eigenen API verbinden - Du hostest das SPA neben dem Backend (Django, Node, Docker) auf derselben Box oder separat.
• Du möchtest ein möglichst kleines Bundle - Der Svelte-Compiler entfernt das Framework aus dem resultierenden Code, sodass die Seite schneller startet als bei Bibliotheken, die auf einem virtuellen DOM basieren.
• Das Projekt benötigt kein serverseitiges Rendering - Wenn du SSR und eine bessere SEO benötigst, findest du SvelteKit im selben Katalog.
• Du möchtest Implementierungen 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.

Wenn das Projekt serverseitiges Rendering, dateibasiertes Routing oder eine bessere SEO direkt benötigt, sieh dir im App-Katalog den SvelteKit-Stack anstelle von reinem Svelte an.

Anforderungen

Um Svelte (reine SPA) auf Saplo zu betreiben, benötigst du:

• Eine Box in einem beliebigen Plan, sogar Box S ist ausreichend - eine erstellte SPA ist nur eine Handvoll statischer Dateien, ohne einen Prozess, der nach dem Build im Speicher gehalten wird.
• Mindestens 256 MB freien RAM für den Build-Prozess und 2 GB Speicherplatz.
• Eine Domain oder Subdomain *.saploapp.pl im Preis jedes Plans inbegriffen.
• Ein Git-Repository, wenn du automatische Bereitstellungen möchtest (optional für den Anfang, du kannst die Anwendung auch als Archiv .zip über das Panel hochladen).

Schritt für Schritt zur Installation

1. Gehe im Saplo-Panel zum App-Katalog und wähle Svelte (Kategorie "Anwendungen", Beschreibung "Leichtgewichtiges SPA Frontend").
2. Wähle die Box und den Namen der Anwendung aus - daraus entsteht die Standard-Subdomain <name>.saploapp.pl.
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 Svelte-Gerüst über Vite (Äquivalent zu npm create vite -- --template svelte), installiert Abhängigkeiten und baut das Projekt. Der Inhalt des Verzeichnisses dist wird direkt in das Anwendungsverzeichnis verschoben, das von nginx bereitgestellt wird.
5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 das Startgerüst von Vite + Svelte an - ab diesem Moment implementierst du deinen eigenen Code darauf.

Eigenen Code per Git deployen

1. In den App-Details, finde den Abschnitt Git / CI-CD und klicke auf "GitHub verbinden". Bestätige die Installation der "Saplo Deploy" App und wähle das Repository mit deinem Svelte Projekt.
2. Die Datei saplo.yaml muss im Stammverzeichnis deines Repositorys liegen.
3. Committe und pushe die Datei saplo.yaml auf den Produktionszweig (standardmäßig main).
4. Jeder folgende git push auf diesen Zweig baut das Projekt und ersetzt den Inhalt des dist-Verzeichnisses auf Box. Den Status siehst du unter dem Tab Deployments.
5. Sollte der Build fehlschlagen, bleibt die zuvor funktionierende Version bestehen. Saplo ersetzt sie nicht durch eine fehlerhafte Version.

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

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

Svelte (plain SPA) auf Saplo im Vergleich zu Alternativen

Häufig gestellte Fragen

Was ist der Unterschied zwischen Svelte (plain SPA) und SvelteKit im Saplo Katalog? Plain SPA sind statische Dateien ohne SSR und ohne laufenden Node-Prozess im Hintergrund, die nur mit Vite erstellt werden. SvelteKit ist ein vollständiges Framework mit optionalem SSR, das auf Saplo als langlebiger Prozess mit automatischem Neustart ausgeführt wird.

Kann ich mehrere Svelte-Anwendungen auf einer Box betreiben? Ja, der App-Katalog ermöglicht es dir, viele Module nebeneinander zu installieren, jedes mit seiner eigenen Subdomain oder Domain.

Ich brauche SSR und besseres SEO - was soll ich wählen? Den SvelteKit-Stack aus demselben Katalog - das ist Svelte mit vollständigem serverseitigem Rendering.

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

Wie ändere ich das Ausgabe-Verzeichnis des Builds, wenn ich nicht das Standardverzeichnis dist verwende? Setze das Feld build.output in saplo.yaml auf den richtigen Pfad.

Svelte (plain SPA) auf Saplo richtest du in wenigen Minuten von Grund auf bis zu einer funktionierenden Domain ein, und das resultierende Bundle ist eines der leichtesten unter den verfügbaren Stacks. Wenn das Projekt so weit wächst, dass SSR benötigt wird, erfordert die Migration zu SvelteKit im selben Katalog keinen Hostingwechsel.