React.js na GitHub Pages dzięki create-react-app

Ten wpis jest 13 częścią z 16 w kursie React.js

Bardzo często początkujący pytają mnie gdzie mogą łatwo wrzucić nieco bardziej rozbudowany projekt, żeby go pokazać. Nie mają swojego hostingu, na Codepenie nie będzie to wygodne jeśli aplikacja podzielona jest na wiele plików. Co robić? Zazwyczaj odpowiadam: GitHub Pages.

GitHub Pages

GitHub Pages to specyficzny rodzaj hostingu. Pozwala Ci hostować i udostępnić innym to, co wrzucisz do repozytorium na GitHubie. Wystarczy tylko włączyć jedną opcję w ustawieniach repo i już:

GitHub Pages i create-react-app

A więc jeśli stworzysz sobie repozytorium github.com/imię/nazwa to Twój GitHub Pages będzie dostępne pod adresem imię.github.io/nazwa. Można też ustawić własną domenę.

GitHub Pages umożliwia też stworzenie strony nie dla repozytorium, ale dla Twojego konta na GitHubie. Wystarczy, że stworzysz repozytorium o nazwie nazwa.github.io i skonfigurujesz GitHub Pages na nim. Będzie to też adres Twojej strony. Podobnie tworzy się też GitHub Pages dla organizacji.

create-react-app i GitHub Pages

W poprzednim wpisie z serii kursu React.js wspomniałem, że create-react-app umożliwia automatyczne publikowanie aplikacji na GitHub Pages. Czy to naprawdę takie proste? Postanowiłem to samemu przetestować i podzielić się wrażeniami. Spojler: Tak, to naprawdę mega łatwe 😛

Jeśli masz już gotową appkę i repozytorium na GitHubie, to przede wszystkim dodaj wszystko, zrób commita i pusha 😉 Jeśli to już gotowe to teraz tak:

1. Dodaj homepage do package.json

Musisz dodać nowe pole homepage do Twojego pliku package.json. To pole powinno zawierać adres GitHub Pages, na które wrzucasz dany projekt. A więc we wspomnianym wcześniej przykładzie, będzie to:

{
  "homepage": "https://imię.github.io/nazwa",
  …
}

2. Zainstaluj paczkę i dodaj skrypty

Zainstaluj pomocniczą paczkę gh-pages. Jest to proste narzędzie do publikowania rzeczy na GitHubie. Jedno polecenie: npm install --save gh-pages

Następnie dodaj dwa nowe skrypty do swojego package.json:

{
  "scripts": {
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build",
      …
  }
}

3. Zrób deploy

Tak, to naprawdę już 😉 Prawie gotowe. Wywołaj tylko npm run deploy.

4. Skonfiguruj GitHub Pages

Ustaw, aby GitHub Pages korzystało ze stworzonego właśnie brancha gh-pages. U mnie wygląda to tak jak na pierwszym obrazku:

GitHub Pages i create-react-app

Rezultat?

Gotowe! Efekt możesz zobaczyć u mnie: mmiszy.github.io/typeofweb-kurs-react

Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie: Jeśli już testowałaś/eś GitHub Pages, to spróbuj Netlify albo Now, albo z innego hostingu. Podziel się wrażeniami w komentarzu 🙂

  • Norbert

    Osobiście wolę Netlify, który działa na bardzo podobnej zasadzie jednak udostępnia kilka ciekawy opcji np. prerendering zupełnie za darmo…

    • GitHub Pages jest o tyle fajne, że automatycznie robisz „deploy” z repozytorium na GitHubie — bez konieczności konfigurowania zbyt wielu rzeczy 🙂

  • Ale, tak jak napisałem wyżej, wymaga to skonfigurowania już dwóch usług, a nie tylko jednej. Pod tym względem GitHub Pages jest wygodniejsze.
    Niemniej Netlify to fajna usługa, dlatego wspomniałem o niej w artykule (czytałeś?)

  • Myślałem, że postawienie aplikacji na Github Pages będzie wymagało więcej zachodu. Dzięki za wpis :), na pewno skorzystam z przekazanej wiedzy :D.