Ten wpis jest jednym z trzech dotyczących deploymentu aplikacji na platformy Heroku, GitHub Pages oraz Firebase. W tym wpisie pokażę w jaki sposób wgrać swój projekt do GitHub Pages.

Od czego zacząć?

Przede wszystkim konto w serwisie GitHub 🙂 Jeszcze go nie masz, to zdecydowanie warto je założyć – niezależnie od Twojego poziomu doświadczenia. Tym bardziej, że w tym roku GitHub wprowadził również możliwość korzystania z zamkniętych repozytoriów za darmo (warunkiem jest max 3 dodatkowych kontrybutorów). Więc można tam przechowywać swój kod, nawet jeśli nie do końca chcemy się nim w tym momencie dzielić publicznie.

Domyślnie, gdy wejdziemy w ustawienia repozytorium, hostowanie na GitHub Pages jest wyłączone. Gdy przejdziemy do odpowiedniej sekcji, pojawi się formularz:

W tym momencie, żadna z wymienionych opcji nam nie odpowiada 🙂 Repozytorium ustawimy w taki sposób, aby automatycznie (a właściwie półautomatycznie) publikować naszą aplikację z gałęzi gh-pages.

Instalacja zależności

Do publikacji naszej aplikacji najwygodniej jest skorzystać z pakietu gh-pages oraz kilku dodatkowych kilku linijek w package.json.

Aby zainstalować paczkę, wpisz w terminalu polecenie:

npm install --save-dev gh-pages

Konfiguracja aplikacji

Teraz musimy zmienić nasz plik package.json:

{
  "name": "sr-hello-app",
  "homepage": "https://patrykomiotek.github.io/sr-hello-app/",
  ...,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  ...
}

Czyli wprowadzamy dwie modyfikacje. Pierwsza z nich polega na podaniu adresu URL, pod którym nasza aplikacja będzie dostępna. Odbywa się to za pomocą reguły:

X.github.io/Y

Gdzie:

X – nazwa naszego użytkownika lub organizacji,
Y – nazwa repozytorium, z którego korzystamy. W tym przykladzie zakładam GitHub Pages dla mojego użytkownika, który posiada nick patrykomiotek. Nazwa repozytorium to sr-hello-app. Repozytorium znajduje się tutaj.

Do pliku package.json zostały dodane jeszcze dwie linijki. Najważniejsza, to nowe polecenie deploy, które wgra nasz projekt z dysku na GitHub. Aby mieć zawsze aktualną wersję aplikacji przed poleceniem deploy wykonuje się polecenie predeploy, które tak na prawdę nie robi nic innego niż build aplikacji reactowej do folderu o nazwie… build :).

Publikujemy

To już praktycznie wszystko, teraz spróbuj wykonać polecenie:

npm run deploy

Skrypt automatycznie wykona build aplikacji, a następnie wyśle zawartość folderu build do GitHuba. Ostatnia rzecz, jaka nam pozostała potencjalnie do skonfigurowania, to sprawdzenie, czy wszystko się udało. Przechodzimy do konfiguracji naszego repozytorium i sprawdzamy sekcję GitHub Pages. Paczka gh-pages tworzy w naszym repozytorium nową gałązkę a takiej samej nazwie, więc GitHub Pages jest w stanie hostować pliki właśnie z tej gałęzi.

Podsumowanie

GitHub Pages, to moim zdaniem najszybszy sposób na hostowanie naszej prostej aplikacji, zwłaszacza jeśli mamy publiczne repozytorium na GitHubie.

Zachęcam również do sprawdzenia jak się robi deploy na Heroku oraz Firebase.

Tutorial wideo

Jeśli wolisz formę wideo, obejrzyj ten film: