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

[type-of-web-komentarze[bot]]

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

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.

https://typeofweb.com/react-js-na-github-pages-dzieki-create-react-app

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Norbert		2018-02-02 18:50

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-03 11:41

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Norbert		2019-09-19 17:53

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-04 12:46

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ś?)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin z algosmart.pl	http://www.algosmart.pl	2018-02-05 08:18

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-05 10:33

Też byłem zaskoczony :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	jacek		2018-03-30 22:04

gorszego tutoriala nie widzialem

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-31 19:49

Mniej frustracji, a więcej spokoju, szczególnie w święta życzę :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	TwojStary	http://whosyourdaddy.com	2021-02-06 09:26

To niewiele w życiu widziałeś smarku.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kiszuriwalilibori		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Prawdę mówiąc nie mam pojęcia, nie używałem nigdy żadnego GUI do GITa.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Kaleta		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Tak! :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Patrycja		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Izabela Skawiańczyk		2019-01-04 11:27

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. https://uploads.disquscdn.com/images/9970e5506e60bf75e0baf2be0b849d4a4258df8daeec71a43fa9ef27cb4205d5.png

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Grzegorz		2019-09-19 17:54

mnie to pomogło na ten error: https://git-scm.com/book/en/v2/Git-Tools-Credential-Storage

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marek	urbanet.pl

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ć.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Gabriela		2020-10-12 14:21

dzięki Marek, pomogło

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mateusz		2019-01-04 11:27

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie widzę, żebyś miał branch gh-pages. Nie używam yarna, więc Ci nie pomogę z odpaleniem komendy npm run deploy, ale ewidentnie tego zabrakło.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Ievgeniia Petriaieva		2019-01-04 11:27

Witaj Michale
robię wszystko zgodnie z Twoim artykułem,
puszczam https://uploads.disquscdn.com/images/333e2b171c1e190d845e6842655e3c0bfa27f6c158188b7e66603b2687cb5a88.png npm run deploy
dostaje komunikat jak na zdjęciu poniżej
co mogę robić źle ?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

A to jest na pewno repozytorium gita? I masz gita?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Monika		2019-01-04 11:27

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.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Jeśli branch gh-pages istnieje to powinno się dać go wybrać w ustawieniach.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Angelika		2019-01-04 11:27

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: https://uploads.disquscdn.com/images/b3476907537d3175ebed25b43f554033249a2f7a10875289e8efa7ff91728fc6.png
Również ustawiłam branch gh-pages :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Co to znaczy, że nie działa? Na screenie nie widać błędów, tylko ostrzeżenia.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Bogucki		2019-01-04 11:27

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 ?
https://uploads.disquscdn.com/images/75ba09c7c4cb894169727e13506754b6fda6ac9392f160f39931d7c6089ae809.jpg

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	obserwujewnioskuje		2019-09-19 17:54

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 :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Przemysław Skrzyniarz	http://przemyslawskrzyniarz.pl	2019-01-16 18:56

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Greg		2020-11-19 00:37

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).

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-05 22:29

Niestety, chyba mi nie wyszło. Po wpisaniu adresu mojej nowo opublikowanej strony, zamiast apki, moim oczom ukazuje się taki oto widok: https://uploads.disquscdn.com/images/295a45fde3b77a943fa0867e49c912fa621e55614a1d7109a59284c5a595f55a.png
Czy ktoś ma pomysł, dlaczego tak jest?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-06-19 15:32

U mnie działa w porządku :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Stobson		2019-06-20 00:18

Chciałbym mieć taki widok kiedy odpalę aplikację (screen z localhost): https://uploads.disquscdn.com/images/c9feb05eaad0ce83dc588111a2eb4d858efea4e812909017f479235ee9ec879f.jpg
albo widok "Tournaments":
https://uploads.disquscdn.com/images/04465096f39b9dacfccb0fa9638dc0cf971c10aeb89b8dea652e1e94591bfa2a.jpg

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ę.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-06-20 01:11

Wynika to z tego, że w Routerze nie uwzględniłeś, że adres Twojej strony to nie / tylko /bayes-ux/
Użyj process.env.PUBLIC_URL

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Stobson		2019-06-23 00:42

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Monika		2021-06-20 10:51

co zmieniłeś na co?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kacper Borkowski	https://plus.google.com/101644927603739660047	2019-03-20 00:32

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"?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kacper Borkowski	https://plus.google.com/101644927603739660047	2019-03-20 10:10

Dokładnie mam taki błąd.
https://uploads.disquscdn.com/images/96944b57ee9a498f5e1e5e2d45c0b4f63f44e658ae57e70cc6e0de3770bf05e0.png

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-03-20 21:07

Nowe zmiany wprowadzasz dokładnie w taki sam sposób — używając polecenia deploy.
Skoro wcześniej działało to nie wiem dokładnie co zmieniłeś, że teraz nie działa. Na podstawie tych informacji nie umiem odpowiedzieć.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kacper Borkowski	https://plus.google.com/101644927603739660047	2019-03-20 10:20

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	magda		2020-05-25 20:05

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-05-25 21:03

https://uploads.disquscdn.com/images/3f706924fc0f37cabffe092c969d0d27d93777d0c0c787dcf49e6d01faf25a43.png

A możesz zrobić pusha do tego repo? Wygląda na to, że nie masz uprawnień.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	magda		2020-05-25 20:05

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	magda		2020-05-25 20:05

Zrobiłam wszystko według wstawek, Niestety w momencie gdy wpisuję npm run deploy w terminalu pojawia mi się błąd https://uploads.disquscdn.com/images/3f706924fc0f37cabffe092c969d0d27d93777d0c0c787dcf49e6d01faf25a43.png Czy ktoś wie jak rozwiązać ten problem?

 
 

Komentarz zaimportowany z WordPressa