Angular · BoardGamesNook · Programowanie · TypeScript

Deploy z wykorzystaniem Github Pages

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:

ngBuildGithub.JPG

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

ngGithub.JPG

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

githubScreen

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.

 

 

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

w

Connecting to %s