Uruchomienie frontendu i backendu

Zakładamy, że przystępujesz do tego materiału po ściągnięciu źródeł z rozdziału Startujemy! oraz że wiesz już, na czym polega uruchomienie samego frontendu Angulara z wykorzystaniem Angular Live Development Server. Appa Notka. Jeśli nie planujesz uczyć się frontendu, ponieważ Twoim celem jest nauka programowania w Javie i na backendzie, możesz pominąć temat Angular Live Development Server. W takiej sytuacji wystarczy, że zapoznasz się z poniższymi paragrafami:

• Zawartość katalogu z aplikacją
• Build aplikacji
• Otwarcie backendu w IDE
• Uruchomienie backendu w IDE

Z każdego z tych paragrafów możesz łatwo wrócić do tej listy, klikając link "przejdź do początku". W bieżącym rozdziale pokażemy Ci, jak zacząć pracę ze ściągniętą aplikacją, a w szczególności jak zbudować, zaimportować oraz jak uruchomić zarówno frontend, jak i backend naszej aplikacji. Rekomendujemy przejście przez kolejne paragrafy, zachowując ich kolejność.

Zawartość katalogu z aplikacją

przejdź do początku Wchodząc do katalogu z aplikacją, od razu zauważysz, że znajdują się tam dwa katalogi oraz pom.xml Katalog startappa-angular zawiera projekt frontendowy, a katalog startappa-spring-boot zawiera backend: Oba te projekty zawierają po jednym właściwym pom.xml w swoich katalogach, a ten pom.xml z powyższego zdjęcia zawiera jedynie podstawowe informacje o projekcie oraz wskazuje, że startappa-angular i startappa-spring-boot są jego modułami:

Build aplikacji

przejdź do początku Plik pom.xml wskazany na zdjęciu w poprzednim paragrafie wyznacza nam miejsce, w któym powinniśmy teraz wykonać builda całej aplikacji. Chcemy, aby aplikacja zainstalowała się w lokalnym repozytorium Mavena, dlatego uruchomimy komendę mvn clean install (clean w zasadzie można pominąć za pierwszym razem, ale też nie zaszkodzi go użyć): Po uruchomieniu komendy musisz uzbroić się w cierpliwość, ponieważ w trakcie jej działania Maven będzie ściągał nie tylko zależności Java, ale również te frontendowe, a tych jest co najmniej kilkaset. Oprócz tego, dzięki skonfigurowany pluginom do Mavena, komenda ściągnie i zainstaluje lokalnie (w katalogu projektu frontendowego) wszystkie wymagane narzędzia, takie jak na przykład nodejs. Uruchomią się również kompilacje Angular-a, Angular Material oraz dodatkowych zależności Javascript: Po wykonaniu się wszystkich etapów budowania projektu zobaczysz podsumowanie podobne do poniższego: Jak widzisz na naszej, całkiem niezłej maszynie i świetnym łączu trwało to ponad 2 minuty.

Otwarcie frontendu w IDE

W tym miejscu zaczyna się najciekawsza część tego rozdziału. Zaczynamy zaglądać do naszych projektów. Na początek frontend. Uruchamiamy IDE, w naszym przypadku jest to WebStorm, który jest trochę zmodyfikowaną wersją IntelliJ-a. Warto go ściągnąć i popracować w nim przez miesiąc, ponieważ tyle trwa bezpłatny trial tego narzędzia (później wykup kosztuje około 50zł miesięcznie). Przypominamy, że link znajduje się w rozdziale Wprowadzenie do Angulara.

Oczywiście zawsze, gdy już trochę zaznajomisz się z WebStormem i Angularem, możesz po takim miesiącu przesiąść się na darmowe narzędzie, np. Visual Studio Code. Wtedy będziesz już wiedział(a), jakie masz potrzeby podczas tworzenia kodu w Angularze i łatwiej Ci będzie wyszukać odpowiednie wtyczki do Visuala.

Tak więc w WebStorm otwieramy projekt, wybierając katalog frontendowy: Po otwarciu zobaczysz drzewko projektowe. W tym momencie zwróć uwagę na porównanie dwóch poniższych widoków. Pierwszy jest widokiem projektu zanim nastąpiło wykonanie komendy mvn clean install, a drugi już po jej wykonaniu (czyli stan obecny - o ile wykonujesz kroki w tym rozdziale po kolei): To, co zostało zaznaczone czerwoną ramką to dwa katalogi, które pojawiły się w ramach wykonanego przez nas builda. Pierwszy katalog node zawiera lokalną instalację nodejs, a drugi node_modules zawiera wszystkie zależności Javascript, w tym Angulara, Angular Material oraz AngularCli. W katalogu tym znajdziesz kilkaset podkatalogów i to głównie ściąganie i instalowanie tego zestawu zajmowało tak wiele czasu podczas builda projektu.

Uruchomienie frontendu w IDE

Nie pozostało nam nic innego, jak uruchomić otwarty projekt frontendu. Możemy owszem skorzystać z wtyczki AngularCli do WebStorma, ale na początku swojej drogi z Angularem i AngularCli warto o zrobić z poziomu terminala IDE. Otwieramy zatem terminal: Następnie w oknie terminala wpisujemy komendę ng serve, która zaserwuje nam frontend za pomocą Angular Live Development Server, dzięki czemu otrzymamy do niego dostęp z poziomu przeglądarki. Po uruchomieniu ng serve powinien się pojawić widok podobny do poniższego (nie przejmujemy się ewentualnymi warningami): W Twoim terminalu pojawiła się informacja o tym, że Angular Live Development Server wystartował i masz dostęp do aplikacji pod wskazanym adresem localhost:4200. Innymi słowy, w przeglądarce pojawi się taki widok: Oczywiście próba logowania na użytkownika zapisanego w aplikacji zakończy się błędem, ponieważ do tej pory uruchomiliśmy tylko frontend. Tak więc teraz musimy jeszcze uruchomić nasz backend i do tego użyjemy regularnego IntelliJ-a.

Otwarcie backendu w IDE

przejdź do początku Najpierw otwórzmy nasz projekt backendowy w IDE: IntelliJ otworzy projekt, a następnie odczyta i zaindeksuje wszystkie potrzebne mu elementy. W przypadku gdy idziesz ścieżką bez Angular Live Development Server, warto w tym miejscu otworzyć nadrzędny projekt startappalight. Masz wtedy pod ręką kod frontendu, który możesz w każdej chwili podejrzeć. Pamiętaj jednak, że w tej ścieżce ewentualne zmiany we frontendzie będą wymagały przebudowy aplikacji za pomocą komendy Mavena. Jeśli chcesz regularnie modyfikować kod frontendu, zainstaluj Angular Live Development Server.

Uruchomienie backendu w IDE

przejdź do początku Otwarcie projektu wraz z indeksacją może chwilę potrwać, ale jak już wszystko zostanie wykonane, możemy od razu przystąpić do uruchomienia backendu za pomocą RunApplication: Widok konsoli po uruchomieniu będzie podobny do tego: W przypadku gdy pominąłeś Angular Live Development Server, cała aplikacja będzie dostępna na porcie 8080. Appa Notka. Uwaga. Takie rozwiązanie działa dzięki temu, że startappa-spring-boot zawiera zależność startappa-angular w pom.xml. W ten sposób zbudowanie backendu podpina frontend w postaci biblioteki, co powoduje, że frontend uruchamia się w ramach backendowej aplikacji na jednym porcie.

Pamietaj, że w takiej konfiguracji wszelkie zmiany w kodzie frontendu aby były widoczne w przeglądarce, będą wymagały przebudowania backendu za pomocą mvn clean install (a przynajmniej mvn clean package). Natomiast jeśli używasz Angular Live Development Server i masz otwarty zarówno frontend jak i backend w dwóch osobnych narzędziach deweloperskich i oba projekty są uruchomione, wówczas backend działa na porcie 8080, a frontend na porcie 4200. Jest to optymalne rozwiązanie, ponieważ aby zmiany kodu frontendu był widoczne w przeglądarce, nie wymagają wtedy przebudowy backendu (oczywiście o ile sam kod backendu nie uległ zmianie).

Problem portu 8080 i 4200

W przypadku gdy tworzysz własną aplikację na bazie kodu aplikacji StartApp i chcesz zachować poprawną komunikację miedzy frontendem uruchomionym na porcie 4200 i backendem uruchomionym na porcie 8080, pamiętaj o podpięciu pliku z interceptorem requestów w Angularze. W naszej aplikacji znajduje się on w pliku http-request-interceptor.ts. Jest to szczególnie ważne przy implementacji logowania do aplikacji, które korzysta domyślnie z ciasteczka JSESSIONID. Aby ciasteczka były utrzymywane w trakcie wysyłania kolejnych requestów, do każdego z nich musi być doklejane: Właśnie to zadanie jest realizowane w kodzie interceptora. Brak takiego kodu spowoduje, że sesja miedzy requestami nie będzie utrzymywana oraz może przyczynić się także do wystąpienia innych nieprzewidywalnych problemów.

Co dalej?

Możesz wykonać logowanie na użytkownika podanego w rozdziale Starter projektu albo też możesz zarejestrować nowego użytkownika w zakładce Registration.