Ostatnio przy okazji robienia kursu z Angulara na Udemy, natknęłam się na ciekawe rozwiązanie – deployment aplikacji z GitHub na Github Pages. Nie działa to dla każdego rodzaju aplikacji – można wrzucać tylko pliki HTML, CSS oraz Javascript. Jest to więc idealne rozwiązanie do zdeployowania aplikacji napisanej w Angularze (TypeScript kompiluje się do Javascriptu).

Tworzenie repozytorium Github Pages

Na początek musimy otworzyć na GitHubie nowe publiczne repozytorium o nazwie {nazwa_uzytkownika).github.io. Po jego utworzeniu można kliknąć przycisk Set up in Desktop dostępny po lewej stronie i skonfigurować wszystko za pomocą aplikacji GitHub Desktop. Ja jednak wolałam skonfigurować wszystko w konsoli.

Deploy w konsoli

Jeśli mamy utworzoną aplikację z wykorzystaniem angular-cli, możemy ją przygotować do deploymentu. Najpierw należy ją zbuildować nie zapominając o opcji –prod (dzięki temu wygenerowany kod będzie zoptymalizowany i zajmie mniej miejsca na serwerze) i ustawieniu –base-href na link do naszych GithubPages wraz z nazwą repozytorium, które wrzucamy (https://{nazwa_uzytkownika}.github.io/{nazwa_repozytorium}/).

Ja stworzyłam nowe repozytorium o nazwie board-games-nook-demo, w którym przechowuję przekształconą frontendową wersję aplikacji BoardGamesNook. I właśnie tę nazwę repozytorium przekazałam w konsoli:

Następnie wystarczy tylko jedna komenda, żeby zrobić publish!

I tyle! Koniec. Można teraz wejść pod personalizowany link Github Pages i oglądać wyniki:

Dokumentacja

Dokładną instrukcję postępowania możecie znaleźć na stronie Github Pages.

BoardGamesNook demo

Demo do mojej aplikacji BoardGamesNook (wersja okrojona, bez połowy logiki zawartej w backendzie i bez niektórych funkcjonalności) możecie zobaczyć pod linkiem.