React jest dziś standardowym wyborem do budowy interfejsów, ale sam React nie jest hostingiem - to biblioteka do UI. Zbudowany projekt (najczęściej przez Vite) to garść statycznych plików HTML, CSS i JS, które trzeba gdzieś wystawić z poprawnym routingiem SPA (fallback wszystkich ścieżek na index.html) i bez zbędnego procesu w tle. Zwykły hosting współdzielony każe wgrywać pliki ręcznie przez FTP i nie ogarnia fallbacku tras, a płatne platformy rozliczają Cię za każdy request i budowanie. Na Saplo React stawiasz jak każdą inną aplikację z katalogu: silnik buduje projekt, wystawia gotowy katalog dist pod nginx i sam pilnuje przekierowania tras.
Dla kogo jest React na Saplo
Zanim zaczniesz instalację, sprawdź, czy to dobry wybór dla Twojego projektu:
- budujesz panel administracyjny albo dashboard dla klientów - Saplo serwuje gotowy build jako pliki statyczne, bez własnego serwera Node trzymanego w pamięci,
- frontend ma się łączyć z własnym API - stawiasz SPA obok backendu (Django, Node, Docker) na tym samym Boxie albo osobno, adres API wpisujesz jako zmienną środowiskową builda,
- projekt nie potrzebuje renderowania po stronie serwera - jeśli zależy Ci na SEO i SSR, sprawdź w katalogu aplikacji stack Next.js zamiast czystego Reacta,
- 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.
Wymagania
Żeby postawić React na Saplo, potrzebujesz:
- Boxa w dowolnym planie, nawet S wystarczy - zbudowany SPA to garść statycznych plików, po buildzie nie zostaje żaden proces Node trzymany w pamięci, więc zużycie RAM po instalacji spada praktycznie do zera,
- minimum 256 MB wolnego RAM na sam proces builda (Vite kompiluje projekt raz, przy instalacji i przy każdym kolejnym
git push) oraz 2 GB miejsca na dysku, - domeny albo subdomeny
*.saploapp.plw cenie każdego planu, pod którą stanie aplikacja, - repozytorium Git, jeśli chcesz korzystać z automatycznego wdrażania (opcjonalne na start, aplikację możesz też wgrać archiwum
.zipprzez panel).
Instalacja krok po kroku
- W panelu Saplo wejdź w Katalog aplikacji i wybierz React (kategoria "Aplikacje").
- 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 Reacta przez Vite (odpowiednik
npm create vite -- --template react), 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 + React - 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" na swoim koncie lub organizacji i wskaż repozytorium z projektem React.
- 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. - Routing SPA (wszystkie ścieżki wpadają na
index.html) jest skonfigurowany automatycznie - nie musisz nic dopisywać w nginx.
Przykład minimalnego pliku saplo.yaml dla Reacta:
name: moj-projekt
stack: react
build:
install: npm ci
command: npm run build
output: dist
React na Saplo kontra alternatywy
| Hosting współdzielony (FTP) | Vercel / Netlify | React na Saplo | |
|---|---|---|---|
| Wdrożenie | ręczne wgrywanie plików | git push, w pełni zarządzane | git push na gałąź produkcyjną |
| Routing SPA (fallback na index.html) | trzeba ręcznie konfigurować .htaccess | wbudowane | skonfigurowane automatycznie |
| Rozliczenie | stały koszt hostingu | zużycie transferu i buildów, rośnie z ruchem | stały koszt Boxa |
| Backend obok frontendu | zwykle brak | osobna usługa (funkcje) | ten sam Box, inna aplikacja z tego samego katalogu |
Najczęstsze pytania
Czy mogę mieć kilka aplikacji React na jednym Boxie? Tak, katalog aplikacji pozwala postawić wiele modułów obok siebie, każdy z własną subdomeną albo domeną, dopóki starcza RAM-u i miejsca na dysku przydzielonego do planu.
Co z routingiem po stronie klienta (React Router)?
Działa bez dodatkowej konfiguracji - fallback wszystkich ścieżek na index.html jest ustawiony od razu przy instalacji.
Czy muszę używać Vite?
Instalacja z katalogu scaffolduje projekt przez Vite, ale własny projekt (także oparty na innym bundlerze) wdrożysz przez git, dopóki build wyprowadza gotowe pliki do katalogu wskazanego w build.output.
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ć wersję Node.js używaną do builda?
Przy tworzeniu aplikacji z katalogu wybierasz 18, 20 albo 22. Przy wdrożeniach przez git ustawiasz ją polem runtime.node w saplo.yaml.
React na Saplo stawiasz od zera do działającej domeny w kilka minut, a każdy kolejny git push wdraża nową wersję bez ręcznego przesyłania plików. Jeśli Twój projekt potrzebuje SSR i lepszego SEO, sprawdź w tym samym katalogu stack Next.js.