Tworzenie i uruchamianie projektu Angular w ServBay

Przegląd

Ten dokument ma na celu poprowadzić Cię przez proces tworzenia, konfiguracji i uruchomienia projektu Angular w lokalnym środowisku developerskim ServBay. Wykorzystamy potężne środowisko Node.js dostarczane przez ServBay oraz jego elastyczne zarządzanie stronami (wcześniej znane jako „hosty”), co umożliwi łatwą konfigurację środowiska deweloperskiego i produkcyjnego oraz bezpieczny dostęp za pomocą własnych domen i certyfikatów SSL. ServBay integruje wiele narzędzi wymaganych do nowoczesnego developmentu (tzw. „serwisy”), takich jak Node.js, PHP, Python, Go, Java, różne bazy danych i więcej — to idealny wybór dla pełnego lokalnego stacku.

Czym jest Angular?

Angular to open source’owy framework frontendowy, rozwijany przez Google, przeznaczony do budowy wydajnych, dynamicznych aplikacji jednostronicowych (SPA). Opiera się na TypeScripcie, dostarcza bogaty zestaw narzędzi i uporządkowaną architekturę programowania, doskonałą do tworzenia dużych, złożonych aplikacji biznesowych.

Kluczowe cechy i zalety Angulara

• Architektura oparta na komponentach: Buduj interfejs użytkownika z użyciem wielokrotnego użytku komponentów, co zwiększa czytelność i skalowalność kodu.
• Wsparcie TypeScriptu: Statyczna kontrola typów i solidne wsparcie paradygmatów obiektowych wpływa na jakość oraz wydajność developmentu.
• Wstrzykiwanie zależności: Ułatwia testowanie i zarządzanie zależnościami w komponentach.
• Potężne CLI (interfejs wiersza poleceń): Upraszcza inicjalizację projektu, generowanie komponentów, serwisów czy modułów oraz build i testowanie aplikacji.
• Wbudowane rozwiązania: Angular oferuje gotowe moduły do routingu, obsługi formularzy, zapytań HTTP i innych typowych zadań.
• Optymalizacja wydajności: Wspiera kompilację AOT (Ahead-of-Time), tree-shaking i inne techniki przyspieszające działanie aplikacji.

Łącząc Angulara z stabilnym środowiskiem ServBay, deweloperzy mogą skupić się na implementacji logiki biznesowej.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że:

1. Zainstalowałeś ServBay: ServBay jest poprawnie zainstalowany i uruchomiony na Twoim macOS.
2. Włączyłeś pakiet Node.js: W panelu sterowania ServBay zainstalowałeś i aktywowałeś wybraną wersję Node.js. ServBay pozwala instalować wiele wersji Node.js i łatwo się między nimi przełączać.

Przygotowanie i uruchomienie projektu Angular w ServBay

Wykorzystamy środowisko Node.js z ServBay do utworzenia i obsługi projektu Angular. Podczas developmentu skonfigurujemy reverse proxy w ServBay tak, by kierowało ruch do Angularowego serwera developerskiego; w trybie produkcyjnym zbudujemy aplikację i udostępnimy ją jako statyczne pliki.

1. Tworzenie projektu Angular

Najpierw utworzymy nowy projekt przy użyciu Angular CLI.

1. Instalacja Angular CLI: Otwórz Terminal i zainstaluj globalnie Angular CLI przy użyciu Node.js dostarczonego przez ServBay. Jeżeli środowisko Node.js z ServBay nie zostało automatycznie dodane do PATH, możesz potrzebować przełączyć się na właściwą wersję. W większości wypadków ServBay ustawia PATH automatycznie.

   npm install -g @angular/cli

   To polecenie zainstaluje ng globalnie, abyś mógł wszędzie korzystać z Angular CLI.

2. Tworzenie nowego projektu Angular: Przejdź do zalecanego katalogu głównego stron ServBay (/Applications/ServBay/www) i użyj ng new, aby stworzyć nowy projekt. Zalecamy nazwę związaną z marką ServBay, np. servbay-angular-app.

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Angular CLI zada kilka pytań związanych z konfiguracją projektu. Wypełnij je odpowiednio do swoich preferencji:

   ? Would you like to add Angular routing? Yes  # Czy dodać routing? Zalecamy Tak
   ? Which stylesheet format would you like to use? CSS # Wybierz format CSS

   Po wykonaniu polecenia w katalogu /Applications/ServBay/www powstanie folder servbay-angular-app z podstawową strukturą projektu.

3. Instalacja zależności projektu: Wejdź do nowego katalogu projektu i zainstaluj zależności lokalne.

   cd servbay-angular-app
   npm install

   npm install pobierze i zapisze pakiety opisane w package.json do folderu node_modules.

2. Modyfikacja strony głównej Angulara (opcjonalnie)

Aby szybko sprawdzić, czy projekt działa, możesz zmodyfikować zawartość widoku głównego.

1. Edytuj plik src/app/app.component.html: Otwórz servbay-angular-app/src/app/app.component.html w wybranym edytorze i zamień treść na prosty nagłówek, np. wyświetl „Hello ServBay!”:

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>This is your Angular app running via ServBay!</p>
   </div>

3. Uruchamianie projektu w trybie developerskim

Podczas developmentu korzysta się z serwera developerskiego Angulara (ng serve), który obsługuje hot-reload. Dzięki funkcji reverse proxy ServBay można łatwo uzyskać dostęp do deweloperskiej wersji projektu pod lokalną domeną.

1. Uruchom serwer developerski Angular: W katalogu głównym projektu (/Applications/ServBay/www/servbay-angular-app) wpisz poniższe polecenie, określając port — np. 8585, by uniknąć konfliktu z domyślnym portem serwera ServBay.

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Polecenie to zbuduje projekt Angular i uruchomi serwer pod http://localhost:8585/. Pozostaw okno Terminala otwarte — serwer działa tak długo, jak długo sesja jest aktywna.

2. Konfiguracja strony ServBay (reverse proxy): W panelu sterowania ServBay otwórz sekcję „Strony” i dodaj nową konfigurację z reverse proxy wskazującym na serwer developerski.

   • Nazwa (Name): np. My Angular Dev Site (nazwa widoczna tylko w ServBay)
   • Domena (Domain): rekomendowana — przykładowa domena testowa ServBay, np. servbay-angular-dev.servbay.demo. Domeny .servbay.demo automatycznie wskazują na lokalny 127.0.0.1.
   • Typ strony (Website Type): wybierz Reverse Proxy.
   • Adres proxy (Proxy Address): wpisz 127.0.0.1.
   • Port proxy (Proxy Port): wpisz port podany przy ng serve, np. 8585.

   Po zakończeniu konfiguracji zapisz i zastosuj zmiany w ServBay.

3. Dostęp do strony developerskiej: Otwórz przeglądarkę i przejdź do skonfigurowanej domeny, np. https://servbay-angular-dev.servbay.demo.

   Dzięki integracji z ServBay oraz automatycznemu generowaniu i konfigurowaniu certyfikatów SSL (przez ServBay User CA lub Public CA), możesz uzyskać natychmiastowy i bezpieczny dostęp do lokalnej strony przez HTTPS. Takie środowisko doskonale symuluje produkcyjne warunki i pozwala wykryć ewentualne błędy związane z bezpieczeństwem.

4. Budowa i uruchamianie wersji produkcyjnej

Po zakończeniu developmentu należy przygotować zoptymalizowaną wersję produkcyjną w formie statycznych plików. Umożliwia to proste serwowanie za pomocą dowolnego serwera plików statycznych — w tym przypadku poprzez funkcję statycznej strony ServBay.

1. Budowa wersji produkcyjnej: W katalogu głównym projektu (/Applications/ServBay/www/servbay-angular-app) zbuduj wersję produkcyjną:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Lub na nowszych wersjach CLI:
   # ng build

   Flaga --prod (domyślna dla nowszych wydań CLI) włącza optymalizacje produkcyjne (kompilacja AOT, minifikacja, tree-shaking itd.). Po zbudowaniu statyczne pliki znajdą się w folderze dist/servbay-angular-app (nazwa zależy od konfiguracji projektu).

2. Konfiguracja strony ServBay (serwer plików statycznych): W panelu ServBay dodaj nową stronę wskazującą na zbudowany folder produkcyjny.

   • Nazwa (Name): np. My Angular Production Site
   • Domena (Domain): zalecane: np. servbay-angular-prod.servbay.demo.
   • Typ strony (Website Type): wybierz Static.
   • Katalog główny strony (Website Root Directory): wskaż na katalog ze statycznymi plikami (zwykle /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app). Upewnij się, że zawiera plik index.html.

   Zapisz i zastosuj konfigurację w ServBay.

3. Dostęp do strony produkcyjnej: W przeglądarce przejdź pod skonfigurowaną domenę, np. https://servbay-angular-prod.servbay.demo.

   Zobaczysz swoją aplikację Angular w wersji produkcyjnej, serwowaną przez wydajny serwer plików statycznych ServBay (np. Caddy lub Nginx — zależnie od wybranej konfiguracji). Serwer automatycznie wykorzysta certyfikat SSL dla bezpiecznego przesyłania danych.

Zalety korzystania z ServBay przy pracy z Angular

• Zintegrowane środowisko: Łatwa instalacja i zarządzanie wieloma wersjami Node.js bez żmudnej konfiguracji zmiennych środowiskowych.
• Elastyczne zarządzanie stronami: Intuicyjna obsługa reverse proxy i serwera plików statycznych, co umożliwia szybkie przełączanie trybów pracy.
• Wbudowane wsparcie SSL: Darmowe i automatyczne certyfikaty SSL, które odtwarzają środowisko produkcyjne HTTPS i eliminują ostrzeżenia o mieszanej treści.
• Obsługa wielu technologii: Jeśli Twój projekt korzysta również z backendu (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot itd.) lub baz danych (MySQL, PostgreSQL, MongoDB, Redis), ServBay umożliwia łatwą integrację tych usług, zapewniając kompletny lokalny stack developerski. ServBay obsługuje te technologie i stale rozszerza ich wsparcie.
• Backup i przywracanie danych: ServBay pozwala wygodnie wykonywać kopie zapasowe konfiguracji, stron, baz danych i certyfikatów SSL chroniąc dane developerskie.
• Resetowanie haseł do baz: Wbudowane narzędzia do resetowania hasła root dla baz MySQL, MariaDB i PostgreSQL — eliminują częsty problem programistów.

Najczęstsze pytania (FAQ)

• Q: Podczas ng new lub ng serve pojawia się błąd command not found: ng. Co robić?
  A: Najpewniej Angular CLI nie został prawidłowo zainstalowany lub nie znajduje się w systemowym PATH. Upewnij się, że zainstalowałeś @angular/cli globalnie (npm install -g @angular/cli) oraz że środowisko Node.js ServBay jest odpowiednio dodane do PATH. Spróbuj zrestartować Terminal lub ServBay.

• Q: ng serve nie uruchamia się; port jest zajęty. Co zrobić?
  A: Prawdopodobnie wybrany port (np. 8585) jest już wykorzystywany przez inny proces. Wybierz inny wolny port, np. ng serve --port 8586, i zaktualizuj odpowiednio port w konfiguracji reverse proxy ServBay.

• Q: Skonfigurowałem stronę w ServBay, ale po przejściu na domenę strona się nie ładuje. Co sprawdzić?
  A: Sprawdź:

  • Czy ServBay jest uruchomiony.
  • Przy developmencie — czy ng serve jest aktywny i nasłuchuje na odpowiednim porcie zgodnym z ustawieniem reverse proxy.
  • Przy produkcji — czy ścieżka katalogu głównego w ServBay wskazuje na katalog zawierający plik index.html (dist/nazwa-projektu).
  • Przejrzyj logi ServBay — mogą zawierać pomocne informacje o błędach.
  • Sprawdź, czy wpisana domena dokładnie pokrywa się z tą w konfiguracji ServBay.

• Q: Czy można hostować produkcyjną wersję Angulara na wybranym serwerze WWW ServBay (Caddy/Nginx/Apache)?
  A: Oczywiście! ServBay obsługuje hosting plików statycznych przez Caddy lub Nginx (oraz Apache). Po prostu wybierz typ strony „Static”, a ServBay automatycznie wykorzysta aktywny backend. Wszystkie te serwery bardzo dobrze sprawdzają się przy serwowaniu plików Angulara.

Podsumowanie

Dzięki temu przewodnikowi możesz łatwo stworzyć i uruchomić projekt Angular w środowisku ServBay. Poznałeś wykorzystanie reverse proxy do testowania aplikacji w trybie developerskim pod własną domeną oraz sposób budowania i hostowania wersji produkcyjnej jako strony statycznej. Połączone możliwości środowiska Node.js, wygodne zarządzanie stronami i wbudowane wsparcie SSL sprawiają, że praca z aplikacjami Angular na macOS staje się szybsza, prostsza i bardziej profesjonalna. Szeroka obsługa różnych technologii przez ServBay daje mocne podstawy do efektywnego rozwoju nie tylko frontendów, ale i całych pełnych stacków.