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

Ten wpis jest 13 częścią z 41 w kursie React.js
wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. React.js: Wprowadzenie do kursu od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
  40. Wady React Hooks
  41. React Hooks: Piszemy własne hooki!

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.

Wszystko to możemy Ci wyjaśnić też na szkoleniu. Poznaj React w dwa dni na naszym szkoleniu!

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.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Ć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 🙂

Nawigacja po kursie:
  1. React.js: Wprowadzenie do kursu od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
  40. Wady React Hooks
  41. React Hooks: Piszemy własne hooki!

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
50 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Norbert
Norbert
2 lat temu

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

Norbert
Norbert
2 lat temu

W spomnianej przezemnie usłudze również masz taką możliwość.
https://www.netlify.com/github-pages-vs-netlify/

Marcin z algosmart.pl

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.

Kiszuriwalilibori
Kiszuriwalilibori
1 rok temu

Próbowałem ale jest problem z GIT. Zacznę może od tego, że GIT-a skonfigurowałem ileś tam czasu temu. Łączy się przez uwierzytelnianie SSH. Na codzień korzystam z Git GUI i nie znam typowych komend GIT. Po odpaleniu deploy najpierw grzecznie zrobiło build ale pootem zwróciło komunikatfailed to get remote.origin.url Task must be either run in git remote depository with a configured origin remote or must be configured with repo option Zdaje sobie sprawę, że prawdopodobnie repo do tego projektu musiałbym założyć jakoś inaczej, pytanie jak? Git GUI do tej pory sprawdzał się jak należy ze zwykłym tworzeniem repo

Łukasz Kaleta
Łukasz Kaleta
1 rok temu

Witam,
A jak opublikować aplikację na własnym serwerze?
Czy wystarczy że wyślę zawartość katalogu build na serwer?

Patrycja
Patrycja
1 rok temu

Super, dzięki za ten poradnik – było trochę zabawy po drodze, ale działa :)!

Izabela Skawiańczyk
Izabela Skawiańczyk
1 rok temu

Cześć. Mam problem z wykonaniem powyższego zadania. Robię wszystko po kolei i błąd pojawia się po instrukcji npm run deploy. Czy mogłabym prosić o jakąś pomoc ? Z góry dziękuje. comment image

Grzegorz
Grzegorz
2 lat temu
Marek | urbanet.pl
Marek | urbanet.pl
2 lat temu

Wydaje mi się, że problemem jest brak zadeklarowanego „git” w zmiennych środowiskowych Windows. Spróbuj wydać polecenie „npm run deploy” w konsoli „git bash”. Powinno zadziałać.

Gabriela
Gabriela
1 miesiąc temu

dzięki Marek, pomogło

Mateusz
Mateusz
1 rok temu

Cześć Michale,
Otóż robie wszystko tak jak opisałeś w artykule z tym wyjątkiem że zamiast npm używam yarna. Strona niby sie załadowała ale jak wchodzę w link to wyświetla się plik readme zamiast treści strony.
tutaj link do strony https://zirek90.github.io/Weather-app/
a tutaj do mojego repo: https://github.com/Zirek90/Weather-app
co robie źle bo kończą mi się już pomysły? node_modules umiescilem w .gitignore

Ievgeniia Petriaieva
Ievgeniia Petriaieva
1 rok temu

Witaj Michale
robię wszystko zgodnie z Twoim artykułem,
puszczamcomment image npm run deploy
dostaje komunikat jak na zdjęciu poniżej
co mogę robić źle ?

Monika
Monika
1 rok temu

Cześć 🙂 Mam taki problem, że na GitHibie w opcjach GH pages nie widzę możliwości ustawienia innego brancha niż master. Jak to można rozwiązać? Zgodnie z tutorialem zainstalowałam co trzeba, odpaliłam ‚npm run deploy’ i nie wyświetliło mi żadnych błędów, teoretycznie wszystko wydawało się być ok.

Angelika
Angelika
1 rok temu

Cześć, wykonywałam krok po kroku Twój tutorial, jednak aplikacja nadal mi się nie wyświetla. Po wpisaniu npm install –save gh-page, wszystko pomyślnie sie zainstalowało, tutaj screen:comment image
Również ustawiłam branch gh-pages 🙂

Marcin Bogucki
Marcin Bogucki
1 rok temu

Witaj Michale
jak próbuje zrobić zgodnie z Twoim artykułem npm run deploy
dostaje komunikat jak na zdjęciu poniżej
co mogę robić źle ?
comment image

obserwujewnioskuje
obserwujewnioskuje
2 lat temu
Reply to  Marcin Bogucki

Nic prostszego 🙂 Wystarczy usunąć cache poleceniem : rm -rf node_modules/gh-pages/.cache
W przypadku Windows musisz zrobić to ręcznie + wpisać jeszcze jedno polecenie: git config --global credential.helper wincred i już później działa 🙂

Przemysław Skrzyniarz

Ja miałem też kilka problemów i to mnie zmusiło by szukać dalej. Zatem trafiłem na super nieco bardziej rozbudowany opis po angielsku. Robiąc to co tu po kolei na pewno się uda każdemu >> https://github.com/gitname/react-gh-pages

Greg
Greg
5 dni temu

Ten tutorial po ang jest w zasadzie ok, tylko 2 rzeczy wymagają korekty: 1) dla ‚homepage’ zalecam ustawić ‚https’ a nie ‚http’ 2) „predeploy”: „npm run build” i „deploy”: „gh-pages -d build” zalecam wstawić tuz po klamrze otwierającej „scripts”: { a nie na końcu
Gdyby ktoś miał mimo to problemy z wywalaniem się po poleceniu ‚npm run deploy’ to zalecam stworzenie apki od nowa poleceniem npx create-react-app react-app (mi dopiero to pomogło).

Joanna Trapp
Joanna Trapp
1 rok temu

Niestety, chyba mi nie wyszło. Po wpisaniu adresu mojej nowo opublikowanej strony, zamiast apki, moim oczom ukazuje się taki oto widok: comment image
Czy ktoś ma pomysł, dlaczego tak jest?

Joanna Trapp
Joanna Trapp
1 rok temu

Your site is published at https://aisaa198.github.io/list/
I na tą stronę wchodzę. I widzę tam w zasadzie plik README. Dodam jeszcze, że wykonanie powyższych kroków nie stworzyło mi nowego brancha gh-pages, więc w ustawieniach zaznaczyłam, żeby do budowania strony użył brancha master.

Stobson
Stobson
1 rok temu

W moim przypadku też pokazuje się zawartość README zamiast appki. Wykonałem wszystkie wymienione kroki

Rezultat ‚npm run deploy’:

C:stuffgithubbayes-ux>npm run deploy

> bayes-ux@0.1.0 predeploy C:stuffgithubbayes-ux
> npm run build

> bayes-ux@0.1.0 build C:stuffgithubbayes-ux
> react-scripts build

Creating an optimized production build…
Compiled successfully.

File sizes after gzip:

44.14 KB buildstaticjs2.baba7ba9.chunk.js
1.64 KB buildstaticjsmain.d054ebd9.chunk.js
771 B buildstaticcssmain.5acfa33c.chunk.css
771 B buildstaticjsruntime~main.5a59bb27.js

The project was built assuming it is hosted at /bayes-ux/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
To publish it at https://stobasan.github.io/bayes-ux , run:

npm run deploy

Find out more about deployment here:

https://bit.ly/CRA-deploy

> bayes-ux@0.1.0 deploy C:stuffgithubbayes-ux
> gh-pages -d build

Published

Stobson
Stobson
1 rok temu

Cześć Michał, adres jest następujący: https://stobasan.github.io/bayes-ux/
Obecnie pokazuje sie „blank page”, ale w devtools widze, ze pliki typu main.css i main.js sa dostepne jako 200, wiec zupelnie nie wiem dlaczego calosc sie nie wyswietla jak w srodowisku developerskim.

Stobson
Stobson
1 rok temu

Chciałbym mieć taki widok kiedy odpalę aplikację (screen z localhost):comment image
albo widok „Tournaments”:comment image

Natomiast na GitHub Pages widzę pustą stronę, która rzeczywiście ma title „React App” i pobiera różne zasoby CSS i JS poprawnie (200), ale jednak nie wyświetla spodziewanego contentu tylko pustą stronę.

Stobson
Stobson
1 rok temu

Dzięki za wskazówkę. zamienilem na i poprawnie rozpoznaje teraz URLe.

Kacper Borkowski
1 rok temu

Mam taki problem. Zrobiłem wszystko zgodnie z instrukcją i strona jest „live”. Jak zrobiłem nowe zmiany, to w jaki sposób wrzucić to na wersję „live”? Usunąć gh-pages? Chyba zrobiłem źle i usunąłem gh-pages i mam teraz taki problem.

error: cannot spawn sh: No such file or directory
fatal: unable to fork

I strona niestety nie jest już live. Pokazany jest plik README.

Co w przypadku jak kilka razy dziennie robie zmiany? Jak wrzucać do „live”?

Kacper Borkowski
1 rok temu

Dodam jeszcze, że po stworzeniu nowego repo dalej jest ten sam błąd.

Kacper Borkowski
1 rok temu

Dokładnie mam taki błąd. comment image

trackback

[…] Potrzebujesz zrobić deploy po SSH albo na zwykły FTP? Gotowe. Automatyczne generowanie aplikacji React na GitHub Pages po commicie? Jedno kliknięcie. Deploy na produkcję, jak w prawdziwym Continuous […]

trackback

[…] Pod wpisem dotyczącym wrzucania React.js na GitHub Pages w sekcji komentarzy pojawiło się spore zainteresowanie tym tematem. Wiele osób pytało mnie też na Discordzie o automatyzację wrzucania zmian na GitHub Pages. Jak automatycznie aktualizować stronę na GitHub Pages, gdy wprowadzamy zmiany w kodzie? Musimy skonfigurować usługę Continuous Delivery i podłączyć ją z GitHubem! Użyjemy Buddy.works. […]

magda
magda
5 miesięcy temu

Zrobiłam wszystko według wstawek, Niestety w momencie gdy wpisuję npm run deploy w terminalu pojawia mi się błąd

magda
magda
5 miesięcy temu

Zrobiłam wszystko według wstawek, Niestety w momencie gdy wpisuję npm run deploy w terminalu pojawia mi się błąd

magda
magda
5 miesięcy temu

Zrobiłam wszystko według wstawek, Niestety w momencie gdy wpisuję npm run deploy w terminalu pojawia mi się błądcomment image Czy ktoś wie jak rozwiązać ten problem?

jacek
jacek
2 lat temu

gorszego tutoriala nie widzialem