Tworzenie i uruchamianie projektu Angular w ServBay

Wprowadzenie

Ten dokument ma na celu poprowadzić Cię przez proces tworzenia, konfiguracji i uruchamiania projektu Angular w lokalnym środowisku ServBay. Wykorzystamy solidne wsparcie Node.js oraz elastyczne zarządzanie stronami (dawniej „hostami”), by łatwo skonfigurować środowisko deweloperskie i produkcyjne oraz zapewnić bezpieczny dostęp poprzez niestandardowe domeny i certyfikaty SSL. ServBay oferuje wiele pakietów dla programistów (nazwanych „usługami”), takich jak Node.js, PHP, Python, Go, Java, bazy danych itd. – to idealny wybór do lokalnego full-stack developmentu.

Czym jest Angular?

Angular to open source’owy framework frontendowy wspierany przez Google, zaprojektowany do budowy wydajnych, dynamicznych aplikacji jednostronicowych (SPA). Bazuje na TypeScripcie, dostarcza rozbudowany zestaw narzędzi i ustrukturyzowany workflow, rewelacyjnie sprawdzający się przy dużych, złożonych projektach biznesowych.

Najważniejsze cechy i zalety Angulara

• Architektura komponentowa: Interfejs tworzony z wielokrotnego użytku komponentów, co zwiększa czytelność i skalowalność kodu.
• Wsparcie dla TypeScript: Typowanie statyczne i zaawansowane cechy programowania obiektowego to wyższa jakość i efektywność kodu.
• Dependency Injection: Ułatwia testowanie i zarządzanie zależnościami komponentów.
• Potężne CLI: Upraszcza zakładanie projektów, generowanie komponentów/serwisów/modułów oraz zadania build/test.
• Moduły „out-of-the-box”: Router, obsługa formularzy, klient HTTP i inne niezbędne elementy zintegrowane od razu.
• Optymalizacja wydajności: Obsługuje m.in. kompilację AOT, tree-shaking i inne metody podnoszące szybkość działania aplikacji.

W połączeniu ze stabilnym środowiskiem ServBay, Angular pozwala deweloperom skupić się na pisaniu logiki biznesowej.

Wymagania wstępne

Przed rozpoczęciem pracy upewnij się, że:

1. ServBay jest zainstalowany: Aplikacja działa na Twoim systemie – macOS lub Windows.
2. Aktywowano Node.js: W panelu ServBay skonfigurowano oraz włączono pożądaną wersję Node.js (możliwe zarządzanie wieloma wersjami i szybkie przełączanie).

Tworzenie i uruchamianie projektu Angular w ServBay

Wykorzystamy środowisko Node.js z ServBay do stworzenia i uruchomienia projektu Angular. W trybie deweloperskim posłużymy się funkcją proxy domeny do serwera developerskiego; w produkcji zbudujemy projekt i udostępnimy pliki statyczne przez ServBay.

1. Tworzenie projektu Angular

Zaczynamy od utworzenia nowego projektu przy pomocy Angular CLI.

1. Instalacja Angular CLI: Uruchom terminal i globalnie zainstaluj Angular CLI w środowisku Node.js ServBay. Jeśli Node.js ServBay nie dodał się automatycznie do PATH, przełącz się na środowisko ServBay – zwykle aplikacja automatycznie to ustawia.

   npm install -g @angular/cli

   To zainstaluje komendę ng dostępną systemowo i pozwoli korzystać z Angular CLI gdziekolwiek.

2. Tworzenie nowego projektu: Przejdź do katalogu domyślnego stron ServBay i uruchom ng new żeby wygenerować projekt. Zalecamy nazwę z brandem ServBay, np. servbay-angular-app.

   macOS:

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

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   CLI zapyta o parę rzeczy dotyczących konfiguracji – wybierz zgodnie z preferencjami:

   ? Would you like to add Angular routing? Yes  # Czy dodać router - rekomendowane Yes
   ? Which stylesheet format would you like to use? CSS # Format stylów, np. CSS

   Po zakończeniu powstanie folder servbay-angular-app z podstawową strukturą projektu:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

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

   cd servbay-angular-app
   npm install

   Polecenie npm install pobierze wszelkie paczki zdefiniowane w package.json do katalogu node_modules.

2. Modyfikacja zawartości startowej Angulara (opcjonalnie)

Dla potwierdzenia poprawnego działania możesz uprościć stronę główną aplikacji.

1. Edytuj plik src/app/app.component.html: Otwórz plik servbay-angular-app/src/app/app.component.html w ulubionym edytorze, usuń domyślną zawartość i zamień ją na prosty nagłówek, np. „Hello ServBay!”:

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>To Twoja aplikacja Angular uruchomiona przez ServBay!</p>
   </div>

3. Uruchamianie projektu w trybie deweloperskim

W codziennej pracy często korzysta się z serwera developerskiego Angulara (ng serve). Oferuje on hot-reload do wygodnej pracy. Z ServBay skonfigurujemy proxy domeny do tego serwera, by móc korzystać z własnego lokalnego adresu.

1. Uruchom serwer developerski Angulara: Będąc w folderze projektu, odpal serwer na niestandardowym porcie, np. 8585 (by uniknąć kolizji z domyślnym portem ServBay).

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   Serwer dostępny będzie lokalnie pod http://localhost:8585/. Terminal musi pozostać aktywny, by serwer działał.

2. Konfiguracja strony w ServBay (proxy): Otwórz panel ServBay i dodaj nową stronę, wykorzystując proxy do serwera deweloperskiego.

   • Nazwa: np. My Angular Dev Site (tylko dla wygody, wyświetlana w ServBay)
   • Domena: np. servbay-angular-dev.servbay.demo – ServBay automatycznie kieruje .servbay.demo na 127.0.0.1.
   • Typ strony: wybierz Reverse Proxy.
   • Adres proxy: wpisz 127.0.0.1.
   • Port proxy: wpisz port z polecenia ng serve (np. 8585).

   Zapisz i zastosuj zmiany w ServBay.

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

   ServBay automatycznie wygeneruje i skonfiguruje darmowy, lokalny certyfikat SSL (przez User CA lub Public CA), więc możesz korzystać z HTTPS – dokładnie jak w produkcji. To pozwala wcześniej wykryć potencjalne problemy z szyfrowaniem.

4. Budowa i uruchamianie wersji produkcyjnej

Gdy projekt Angulara jest gotowy do publikacji, należy stworzyć produkcyjny build – zestaw zoptymalizowanych, statycznych plików do hostowania. Do udostępnienia użyjemy funkcji statycznych stron ServBay.

1. Build wersji produkcyjnej: W folderze projektu wydaj polecenie build dla produkcji:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # lub w nowszych wersjach Angular CLI:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # lub w nowszych wersjach Angular CLI:
   # ng build

   Przełącznik --prod (obecnie domyślny) aktywuje optymalizacje jak AOT, minifikacja czy tree-shaking. Wynikowe pliki trafią do dist/servbay-angular-app (lub innego folderu zależnie od konfiguracji).

2. Konfiguracja strony statycznej w ServBay: W panelu ServBay dodaj stronę wskazującą na produkcyjny folder ze statycznymi plikami.

   • Nazwa: np. My Angular Production Site

   • Domena: np. servbay-angular-prod.servbay.demo

   • Typ strony: wybierz Static.

   • Katalog główny strony: podaj ścieżkę z wynikowymi plikami:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Upewnij się, że wskazujesz folder zawierający index.html.

   Zapisz i uruchom zmiany w ServBay.

3. Dostęp do strony produkcyjnej: Przejdź w przeglądarce do https://servbay-angular-prod.servbay.demo.

   Obejrzysz produkcyjną wersję Angulara, udostępnianą przez szybki serwer ServBay (Caddy lub Nginx, zależnie od ustawień). SSL jest gotowy, więc masz pełne bezpieczeństwo jak w publicznym hostingu.

Zalety ServBay w pracy z Angular

• Zintegrowane środowisko: Zarządzaj wieloma wersjami Node.js z poziomu ServBay – bez problemów z konfiguracją PATH czy zmiennymi środowiskowymi.
• Elastyczne zarządzanie stronami: Prosty interfejs do konfiguracji proxy oraz hostingu statycznego – łatwo przełączaj się między trybem dev i prod.
• Automatyczny SSL: Darmowe certyfikaty SSL dla lokalnych stron, imitacja produkcji, brak ostrzeżeń o „mixed content”.
• Wsparcie dla różnych technologii: Jeśli Twój projekt ma backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) lub bazy danych (MySQL, PostgreSQL, MongoDB, Redis), ServBay integruje je bez wysiłku w jednym środowisku. Wszystkie pakiety stale aktualizowane, z pełnym wsparciem funkcji.
• Backup i przywracanie: Wygodna opcja kopiowania ustawień, stron, baz danych czy certyfikatów – większe bezpieczeństwo Twoich danych.
• Reset haseł do baz: Wbudowane narzędzia do resetu haseł root MySQL, MariaDB, PostgreSQL – rozwiązanie częstych problemów programistów.

Najczęściej zadawane pytania (FAQ)

• Q: Przy próbie ng new/ng serve otrzymuję komunikat command not found: ng. Co robić? A: Najpewniej Angular CLI nie jest zainstalowany lub nie znalazł się w PATH. Sprawdź, czy wykonałeś globalną instalację @angular/cli (npm install -g @angular/cli) i czy aktywne jest środowisko Node.js z ServBay w PATH. Spróbuj zrestartować terminal albo samą aplikację ServBay.
• Q: ng serve zgłasza błąd zajętego portu. Co wtedy? A: Ktoś inny używa tego portu (np. 8585). Podaj inną wartość w ng serve --port (np. ng serve --port 8586) i zaktualizuj port proxy w konfiguracji ServBay.
• Q: Po zdefiniowaniu strony ServBay, strona pod domeną nie chce się wczytywać? A: Sprawdź:
  • Czy aplikacja ServBay działa.
  • W trybie dev – czy ng serve jest odpalony i słucha na odpowiednim porcie, zgodnym z konfiguracją proxy.
  • W trybie produkcji – czy „katalog główny strony” zawiera poprawny folder z plikiem index.html (dist/nazwa-projektu).
  • Przejrzyj logi ServBay w razie problemów.
  • Upewnij się, że wpisywana domena zgadza się z konfiguracją strony ServBay.
• Q: Czy mogę hostować produkcyjny Angular na różnych serwerach Web z ServBay (Caddy/Nginx/Apache)? A: Tak! ServBay obsługuje hosting statyczny przez Caddy, Nginx albo Apache – wybrany aktualnie serwer automatycznie hostuje Twoje pliki.

Podsumowanie

Z pomocą tego poradnika stworzyłeś oraz uruchomiłeś projekt Angular w środowisku ServBay. Nauczyłeś się wykorzystywać proxy ServBay do pracy w trybie developerskim oraz konfiguracji hostingu statycznego w produkcji, korzystając z własnych domen testowych oraz HTTPS dzięki automatycznemu SSL. ServBay zapewnia wygodną obsługę Node.js, szybkie zarządzanie stronami, wsparcie dla wielu technologii oraz solidne bezpieczeństwo dla Twoich lokalnych projektów Angular. Dzięki temu możesz efektywnie rozwijać zarówno front-end, jak i pełne stosy technologiczne w jednym miejscu.