Angular to najbardziej kompletny z popularnych frameworków frontendowych - narzuca własną strukturę projektu, typowanie przez TypeScript i moduły, co sprawdza się w dużych aplikacjach firmowych utrzymywanych przez cały zespół. Tak jak React czy Vue, Angular sam w sobie nie jest hostingiem - zbudowany projekt to statyczne pliki HTML, CSS i JS wymagające serwera z poprawnym fallbackiem tras dla Angular Router w trybie history. Na Saplo Angular stawiasz identycznie jak każdą inną aplikację z katalogu: silnik scaffolduje projekt, buduje go przez Angular CLI, wykrywa faktyczny katalog z wynikowym index.html i wystawia go pod nginx razem z fallbackiem tras.
Dla kogo jest Angular na Saplo
Zanim zaczniesz instalację, sprawdź, czy to dobry wybór dla Twojego projektu:
- budujesz duży system wewnętrzny albo panel dla wielu ról - struktura modułów i ścisłe typowanie Angulara ułatwiają utrzymanie kodu, gdy nad projektem pracuje kilka osób,
- zespół już zna Angulara - Saplo nie narzuca żadnej dodatkowej warstwy, dostajesz standardowy projekt wygenerowany przez Angular CLI,
- frontend ma się łączyć z własnym API - stawiasz SPA obok backendu (Django, Node, Docker) na tym samym Boxie albo osobno,
- aplikacja jednostronicowa z Angular Router w trybie history - fallback wszystkich tras na
index.htmljest skonfigurowany automatycznie, nie musisz nic dopisywać w nginx, - 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 jest mniejszy i nie potrzebujesz pełnej struktury modułów Angulara, sprawdź w katalogu aplikacji lżejsze stacki React albo Vue.
Wymagania
Żeby postawić Angular na Saplo, potrzebujesz:
- Boxa przynajmniej w planie S - zbudowany SPA to garść statycznych plików, ale sam proces builda Angular CLI jest cięższy niż w React czy Vue, dlatego manifest przepisu wymaga minimum 512 MB wolnego RAM na build i 3 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 Angular (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 Angular przez Angular CLI (odpowiednik
ng new --defaults --ssr=false), instaluje zależności i buduje projekt produkcyjnie (ng build --configuration=production). - Po buildzie silnik sam wykrywa, czy plik wynikowy
index.htmlleży wdist/<projekt>/(Angular starszy niż 17) czy wdist/<projekt>/browser/(Angular 17 i nowszy, gdzie katalogdistjest przygotowany pod SSR), i kopiuje właściwy poziom katalogu do aplikacji serwowanej przez nginx. - Po zakończeniu instalacji domena z kroku 2 pokazuje startowy szkielet Angulara - 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 Angular.
- 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 wynikowe pliki na 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 Angulara:
name: moj-projekt
stack: angular
build:
install: npm ci
command: npm run build
output: dist/moj-projekt/browser
Jeśli nie ustawisz pola build.output, silnik i tak wykryje właściwy katalog z index.html sam, ale jawne ustawienie przyspiesza build i eliminuje pomyłkę przy projektach z niestandardową nazwą.
Angular na Saplo kontra alternatywy
| Hosting współdzielony bez wsparcia SPA | Firebase Hosting | Angular na Saplo | |
|---|---|---|---|
| Fallback tras dla Angular Router | trzeba ręcznie skonfigurować przekierowania | wbudowane | skonfigurowane automatycznie |
| Wykrycie katalogu output (Angular 17+) | ręczne | ręczne | automatyczne |
| 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
Czy Angular Router w trybie history działa bez dodatkowej konfiguracji?
Tak, fallback wszystkich ścieżek na index.html jest aktywny od razu po instalacji, więc odświeżenie dowolnej podstrony nie kończy się błędem 404.
Angular 17 zmienił strukturę katalogu dist - czy to problem na Saplo?
Nie, silnik po buildzie sam sprawdza, czy index.html leży w dist/<projekt>/ czy w dist/<projekt>/browser/, i kopiuje właściwy poziom katalogu bez Twojego udziału.
Czy mogę mieć kilka aplikacji Angular na jednym Boxie? Tak, katalog aplikacji pozwala postawić wiele modułów obok siebie, każdy z własną subdomeną albo domeną.
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 mój projekt ma niestandardową nazwę?
Ustaw pole build.output w saplo.yaml na właściwą ścieżkę, na przykład dist/nazwa-projektu/browser.
Angular na Saplo stawiasz od zera do działającej domeny w kilka minut, a zmianę struktury katalogu dist między wersjami Angulara silnik wykrywa sam. Jeśli projekt jest mniejszy niż typowa aplikacja firmowa, sprawdź w tym samym katalogu lżejsze stacki React albo Vue.