Wie du Vue auf Saplo aufsetzt (leichte Frontend-App)

Vue 3 ist neben React die zweitbeliebteste Bibliothek zum Erstellen von Benutzeroberflächen und, genau wie React, selbst kein Hosting. Das gebaute Projekt (meistens mit Vite) besteht aus statischen HTML-, CSS- und JS-Dateien, die einen Server mit korrektem Routing-Fallback für Vue Router im history-Modus benötigen - ohne das endet das Neuladen einer Unterseite mit einem 404-Fehler. Bei Saplo setzt du Vue genauso wie jede andere Anwendung aus dem Katalog auf: Die Engine baut das Projekt, stellt das fertige Verzeichnis dist unter nginx bereit und konfiguriert den Routing-Fallback selbst.

Für wen ist Vue auf Saplo

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

• du entwickelst ein Admin-Panel - Saplo stellt den fertigen Build als statische Dateien bereit, ohne eigenen Node-Prozess im Hintergrund,
• das Frontend soll sich mit einer eigenen API verbinden - du betreibst die SPA parallel zum Backend (Django, Node, Docker) auf demselben Box oder separat,
• Single-Page-Anwendung mit Vue Router im History-Modus - der Fallback für alle Routen auf index.html ist automatisch konfiguriert, du musst nichts in nginx eintragen,
• du möchtest Deployments mit git push statt manuellem Datei-Upload per FTP - du bindest das Repository einmal an, jeder Push auf den Produktionsbranch baut und deployed automatisch eine neue Version.

Wenn dein Projekt serverseitiges Rendering und besseres SEO benötigt, prüfe im Anwendungskatalog den Stack Nuxt statt reinem Vue.

Voraussetzungen

Um Vue auf Saplo bereitzustellen, brauchst du:

• einen beliebigen Box-Tarif, sogar Box S genügt - ein gebautes SPA besteht aus einer Handvoll statischer Dateien, ohne Prozess, der nach dem Build im Arbeitsspeicher gehalten wird,
• mindestens 256 MB freien RAM-Speicher für den Build-Prozess selbst sowie 2 GB Speicherplatz auf der Festplatte,
• eine Domain oder Subdomain *.saploapp.pl, die in jedem Tarif enthalten ist,
• ein Git-Repository, wenn du automatische Deployments möchtest (optional am Anfang, du kannst die Anwendung alternativ auch als Archiv .zip über das Panel hochladen).

Installation Schritt für Schritt

1. Öffne im Saplo-Panel den App-Katalog und wähle Vue.js (Kategorie „Anwendungen“).
2. Wähle 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 erstellt das Vue-Gerüst über Vite (Äquivalent npm create vite -- --template vue), installiert die Abhängigkeiten und baut das Projekt. Der Inhalt des Verzeichnisses dist wird anschließend direkt in das Anwendungsverzeichnis kopiert, das von nginx ausgeliefert wird.
5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 das initiale Vite + Vue-Gerüst - ab diesem Zeitpunkt kannst du deinen eigenen Code darauf deployen.

Einführung des eigenen Codes über Git

1. Öffne in den App-Details den Abschnitt Git / CI-CD und klicke auf "Mit GitHub verbinden", bestätige die Installation der App "Saplo Deploy" und wähle das Repository mit dem Vue-Projekt aus.
2. Im Stammverzeichnis des Repositories muss die Datei saplo.yaml liegen.
3. Committe und pushe die Datei saplo.yaml auf den Produktionsbranch (standardmäßig main).
4. Jeder weitere git push auf diesen Branch baut das Projekt und ersetzt den Inhalt des Verzeichnisses dist auf der Box. Den Status siehst du im Tab Deployments.
5. Wenn der Build fehlschlägt, bleibt die vorherige funktionierende Version bestehen - Saplo ersetzt sie nicht durch die fehlerhafte Version.

Beispiel für eine minimale Datei saplo.yaml für Vue:

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

Vue auf Saplo im Vergleich zu Alternativen

Häufigste Fragen

Funktioniert Vue Router im History-Modus ohne zusätzliche Konfiguration? Ja, der Fallback für alle Pfade auf index.html ist direkt nach der Installation aktiv, sodass das Neuladen einer beliebigen Unterseite nicht mit einem 404-Fehler endet.

Kann ich mehrere Anwendungen mit Vue auf einem Box betreiben? Ja, mit dem Anwendungsverzeichnis kannst du mehrere Module nebeneinander bereitstellen, jedes mit eigener Subdomain oder Domain.

Brauche ich SSR und besseres SEO - was soll ich wählen? Der Stack Nuxt aus demselben Verzeichnis - Vue mit vollständigem serverseitigem Rendering.

Erhalte ich SSL und eine eigene Domain? Ja, das SSL-Zertifikat wird automatisch ausgestellt, und eine Domain oder Subdomain *.saploapp.pl ist bei jedem Tarif inklusive.

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

Mit Saplo setzt du Vue in wenigen Minuten von Grund auf mit einer funktionierenden Domain um, und Vue Router funktioniert ohne manuelle Konfiguration. Wenn dein Projekt so groß wird, dass SSR erforderlich ist, kannst du ohne Wechsel des Hostings im selben Verzeichnis zu Nuxt migrieren.