Svelte kompiluje komponenty do czystego JavaScriptu już w czasie builda, bez wirtualnego DOM ładowanego do przeglądarki, więc wynikowy bundle jest jednym z najmniejszych spośród popularnych frameworków. W wariancie plain SPA (bez SSR, bez frameworka SvelteKit) Svelte budowany jest przez Vite do garści statycznych plików HTML, CSS i JS - dokładnie tak samo jak React czy Vue. Na Saplo Svelte (plain SPA) stawiasz identycznie jak każdą inną aplikację z katalogu: silnik scaffolduje projekt, buduje go przez Vite i wystawia gotowy katalog dist pod nginx, bez żadnego procesu Node trzymanego w tle po buildzie.
Dla kogo jest Svelte (plain SPA) na Saplo
Zanim zaczniesz instalację, sprawdź, czy to dobry wybór dla Twojego projektu:
- budujesz panel albo dashboard dla klientów - Saplo serwuje gotowy build jako pliki statyczne, bez własnego procesu Node w tle,
- frontend ma się łączyć z własnym API - stawiasz SPA obok backendu (Django, Node, Docker) na tym samym Boxie albo osobno,
- zależy Ci na jak najmniejszym bundlu - kompilator Svelte usuwa framework z wynikowego kodu, więc strona startuje szybciej niż przy bibliotekach opartych na wirtualnym DOM,
- projekt nie potrzebuje renderowania po stronie serwera - jeśli potrzebujesz SSR i lepszego SEO, w tym samym katalogu znajdziesz SvelteKit,
- chcesz wdrożeń z
git pushzamiast ręcznego przesyłania plików przez FTP - podpinasz repozytorium raz, każdy push na gałąź produkcyjną buduje i wdraża nową wersję sam.
Jeśli projekt potrzebuje renderowania po stronie serwera, routingu opartego o pliki albo lepszego SEO od razu z pudełka, sprawdź w katalogu aplikacji stack SvelteKit zamiast czystego Svelte.
Wymagania
Żeby postawić Svelte (plain SPA) na Saplo, potrzebujesz:
- Boxa w dowolnym planie, nawet S wystarczy - zbudowany SPA to garść statycznych plików, bez procesu trzymanego w pamięci po buildzie,
- minimum 256 MB wolnego RAM na sam proces builda oraz 2 GB miejsca na dysku,
- domeny albo subdomeny
*.saploapp.plw cenie każdego planu, - repozytorium Git, jeśli chcesz automatycznych wdrożeń (opcjonalne na start, aplikację możesz też wgrać archiwum
.zipprzez panel).
Instalacja krok po kroku
- W panelu Saplo wejdź w Katalog aplikacji i wybierz Svelte (kategoria "Aplikacje", opis "Lekki frontend SPA").
- Wskaż Box oraz nazwę aplikacji - z niej powstaje domyślna subdomena
<nazwa>.saploapp.pl. - Wybierz wersję Node.js do builda (18, 20 albo 22, domyślnie 20) i zatwierdź instalację.
- Silnik scaffolduje szkielet Svelte przez Vite (odpowiednik
npm create vite -- --template svelte), instaluje zależności i buduje projekt, a zawartość katalogudisttrafia bezpośrednio do katalogu aplikacji, serwowanego przez nginx. - Po zakończeniu instalacji domena z kroku 2 pokazuje startowy szkielet Vite + Svelte - od tego momentu wdrażasz na nią własny kod.
Wdrożenie własnego kodu przez Git
- W szczegółach aplikacji znajdź sekcję Git / CI-CD i kliknij "Połącz GitHub", potwierdź instalację aplikacji "Saplo Deploy" i wskaż repozytorium z projektem Svelte.
- W katalogu głównym repozytorium musi leżeć plik
saplo.yaml. - Zacommituj i wypchnij plik
saplo.yamlna gałąź produkcyjną (domyślniemain). - Każdy kolejny
git pushna tę gałąź buduje projekt i podmienia zawartość katalogudistna Boxie, status widzisz w zakładce Deploymenty. - Jeśli build się nie powiedzie, poprzednia działająca wersja zostaje na miejscu - Saplo nie podmienia jej na zepsutą.
Przykład minimalnego pliku saplo.yaml dla Svelte:
name: moj-projekt
stack: svelte
build:
install: npm ci
command: npm run build
output: dist
Svelte (plain SPA) na Saplo kontra alternatywy
| Hosting współdzielony bez wsparcia SPA | Firebase Hosting | Svelte (plain SPA) na Saplo | |
|---|---|---|---|
| Rozmiar wynikowego bundla | zależy od frameworka | zależy od frameworka | najmniejszy z popularnych stacków (kompilator usuwa framework) |
| Proces Node po buildzie | brak wsparcia | brak | brak, tylko pliki statyczne pod nginx |
| Wdrożenie | ręczne wgrywanie plików | git push albo CLI | git push na gałąź produkcyjną |
| Backend obok frontendu | zwykle brak | osobna usługa (funkcje) | ten sam Box, inna aplikacja z tego samego katalogu |
Najczęstsze pytania
Czym różni się Svelte (plain SPA) od SvelteKit w katalogu Saplo? Plain SPA to statyczne pliki bez SSR i bez procesu Node w tle, budowane samym Vite. SvelteKit to pełny framework z opcjonalnym SSR, uruchamiany na Saplo jako długo żyjący proces z automatycznym restartem.
Czy mogę mieć kilka aplikacji Svelte na jednym Boxie? Tak, katalog aplikacji pozwala postawić wiele modułów obok siebie, każdy z własną subdomeną albo domeną.
Potrzebuję SSR i lepszego SEO - co wybrać? Stack SvelteKit z tego samego katalogu - to Svelte z pełnym renderowaniem po stronie serwera.
Czy dostanę SSL i własną domenę?
Tak, certyfikat SSL jest automatyczny, a domenę albo subdomenę *.saploapp.pl masz w cenie każdego planu.
Jak zmienić katalog wyjściowy builda, jeśli nie używam domyślnego dist?
Ustaw pole build.output w saplo.yaml na właściwą ścieżkę.
Svelte (plain SPA) na Saplo stawiasz od zera do działającej domeny w kilka minut, a wynikowy bundle jest jednym z najlżejszych spośród dostępnych stacków. Jeśli projekt urośnie do potrzeby SSR, migracja do SvelteKit w tym samym katalogu nie wymaga zmiany hostingu.