Blog / Poradniki

Jak postawić SvelteKit na Saplo (lekka aplikacja z SSR)

SvelteKit kompiluje komponenty do czystego JavaScriptu już w czasie builda, więc gotowa aplikacja jest wyjątkowo lekka i szybko startuje nawet na słabszych telefonach. Z adapterem node działa jako SSR - długo żyjący proces, który na Saplo uruchamiasz jako usługę zarządzaną, z wdrożeniem prosto z repozytorium Git.

Grzegorz Kalmus· ·81 wyświetleń

SvelteKit różni się od Reacta i Vue już na poziomie kompilatora - komponenty zamieniają się w czysty JavaScript w czasie builda, bez wirtualnego DOM ładowanego do przeglądarki. Efekt to mniejszy bundle i szybszy start, szczególnie odczuwalny na słabszych telefonach i wolniejszych łączach. Z adapterem node SvelteKit działa jako SSR - długo żyjący proces analogiczny do Next.js czy Nuxt, nie tylko katalog ze statycznymi plikami. Na Saplo SvelteKit uruchamiasz jako usługę zarządzaną z automatycznym restartem.

Dla kogo jest SvelteKit na Saplo

Zanim zaczniesz instalację, sprawdź, czy to dobry wybór dla Twojego projektu:

  • aplikacja, w której liczy się waga bundla - mniej JavaScriptu do pobrania i sparsowania niż w porównywalnej aplikacji React czy Vue,
  • strona z realną interakcją, nie tylko treścią - SvelteKit dobrze się sprawdza zarówno w prostych stronach, jak i rozbudowanych aplikacjach,
  • projekt kierowany na słabsze łącza i telefony - mniejszy bundle skraca czas do interaktywności,
  • chcesz wdrożeń z git push zamiast ręcznej konfiguracji procesu Node - podpinasz repozytorium raz, a Saplo buduje i restartuje usługę automatycznie.

Potrzebujesz tylko lekkiego SPA bez SSR? Sprawdź w katalogu aplikacji osobny stack Svelte (Vite, bez procesu w tle) - to inny wariant niż SvelteKit opisany w tym poradniku.

Wymagania

Żeby postawić SvelteKit na Saplo, potrzebujesz:

  • Boxa w planie L lub wyższym - adapter node trzyma proces stale w pamięci, SSR potrzebuje więcej zapasu RAM niż zwykła strona statyczna,
  • minimum 512 MB wolnego RAM i 3 GB miejsca na dysku pod sam proces aplikacji,
  • domeny albo subdomeny *.saploapp.pl w cenie każdego planu,
  • repozytorium Git, jeśli chcesz korzystać z automatycznego wdrażania (opcjonalne na start, aplikację możesz też wgrać archiwum .zip przez panel).

Instalacja krok po kroku

  1. W panelu Saplo wejdź w Katalog aplikacji i wybierz SvelteKit (kategoria "Aplikacje").
  2. Wskaż Box w planie L lub wyższym oraz nazwę aplikacji - z niej powstaje domyślna subdomena.
  3. Wybierz wersję Node.js do builda (18, 20 albo 22, domyślnie 20) i zatwierdź instalację.
  4. Silnik scaffolduje minimalny projekt SvelteKit, instaluje i podmienia domyślny adapter-auto na @sveltejs/adapter-node w svelte.config.js, buduje projekt do katalogu build/ i uruchamia go przez supervisora na porcie 3000, a nginx proxy'uje ruch z domeny na ten port.
  5. Po zakończeniu instalacji domena z kroku 2 pokazuje startową stronę SvelteKit - od tego momentu wdrażasz na nią własny kod.

Wdrożenie własnego kodu przez Git

  1. W szczegółach aplikacji znajdź sekcję Git / CI-CD i kliknij "Połącz GitHub", potwierdź instalację aplikacji "Saplo Deploy" i wskaż repozytorium z projektem SvelteKit.
  2. Upewnij się, że projekt ma zainstalowany @sveltejs/adapter-node w svelte.config.js - bez niego build wygeneruje wersję pod inne środowisko, nie pod długo działający proces Node.
  3. W katalogu głównym repozytorium umieść plik saplo.yaml i wypchnij go na gałąź produkcyjną (domyślnie main).
  4. Każdy kolejny git push na tę gałąź uruchamia build i restart usługi, status widzisz w zakładce Deploymenty.
  5. Build tworzy katalog build/ z serwerem Node, który Saplo uruchamia jako usługę zarządzaną.

Przykład minimalnego pliku saplo.yaml dla SvelteKit:

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

SvelteKit na Saplo kontra alternatywy

Vercel dla SvelteKit Własny VPS SvelteKit na Saplo
Model rozliczenia zużycie funkcji i transferu, rośnie z ruchem stały koszt serwera, konfiguracja ręczna stały koszt Boxa
Wdrożenia z Gita tak, natywnie trzeba złożyć samemu (CI/CD) tak, git push na gałąź produkcyjną
Uruchomienie procesu SSR w pełni zarządzane pm2 albo systemd ręcznie usługa zarządzana z auto-restartem
Adapter wymaga adaptera pod platformę konfigurujesz ręcznie adapter-node podmieniany automatycznie przy instalacji

Najczęstsze pytania

Czym różni się SvelteKit od zwykłego stacku Svelte w katalogu? SvelteKit z adapterem node to SSR - długo działający proces. Stack Svelte to czysty SPA budowany przez Vite, bez procesu w tle, lżejszy w utrzymaniu, ale bez renderowania po stronie serwera.

Czy muszę ręcznie podmieniać adapter na node we własnym projekcie? Jeśli Twój projekt ma domyślny adapter-auto, zamień go na @sveltejs/adapter-node przed pierwszym wdrożeniem przez git - inaczej build wygeneruje wersję pod inne środowisko.

Ile RAM potrzebuje SvelteKit w praktyce? Manifest przepisu podaje minimum 512 MB, ale pod realnym ruchem produkcyjnym lepiej zaplanować Box L, żeby proces SSR miał zapas na skoki obciążenia.

Co się stanie, jeśli build się nie powiedzie? Poprzednia działająca wersja aplikacji zostaje na miejscu, Saplo nie podmienia jej na zepsutą.

Czy dostanę SSL i własną domenę? Tak, certyfikat SSL jest automatyczny, a domenę albo subdomenę *.saploapp.pl masz w cenie każdego planu.

SvelteKit na Saplo stawiasz od zera do działającej domeny w kilka minut, a każdy kolejny git push restartuje usługę z nową wersją bez Twojego udziału. Jeśli projekt nie potrzebuje SSR, sprawdź w tym samym katalogu lżejszy stack Svelte.

#git-deploy #javascript #poradnik #svelte #sveltekit

Powiązane wpisy