DEV Community

Cover image for How to deploy React App to GitHub Pages

How to deploy React App to GitHub Pages

Ibrahim Ragab on June 23, 2019

Did you build React app and want to deploy it, following these simple steps you able to deploy and showing the world your amazing app. I will ...
Collapse
 
trishabernice profile image
trishabernice

Hi! Thanks for the tutorial!

I accidentally copy pasted this on my terminal : git remote add origin git@github.com:Yuribenjamin/my-app.git

and now i keep getting this:
Cloning into 'node_modules/gh-pages/.cache/git@github.com!Yuribenjamin!my-app.git'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/TrishaBernice/.npm/_logs/2020-06-15T16_41_28_880Z-debug.log

I tried git remote rm origin and it still won't work. can you please advice me on what i should do here? I will really appreciate it!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

No problem
git remote - v
Will display origin and the wrong remote url
To delete it
git remote rm origin
Then check again
git remote - v
Will display nothing time to add the right one
Happy Hacking

Collapse
 
trishabernice profile image
trishabernice

Hi Ibrahim, Thanks for the fast reply!

I did this:
Trishas-MBP-2:src TrishaBernice$ git remote rm origin
Trishas-MBP-2:src TrishaBernice$ git remote -v
Trishas-MBP-2:src TrishaBernice$ git remote add origin git@github.com:trishabernice/portfolio.git
Trishas-MBP-2:src TrishaBernice$ npm run deploy

and I still got this...
Cloning into 'node_modules/gh-pages/.cache/git@github.com!Yuribenjamin!my-app.git'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/TrishaBernice/.npm/_logs/2020-06-15T17_01_16_913Z-debug.log

Is there anything else I can try to fix the issue?

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

Use http or ssh

Thread Thread
 
trishabernice profile image
trishabernice

Earlier I did this:
Trishas-MBP-2:src TrishaBernice$ git remote add origin github.com/trishabernice/portfolio...
and i did git remote rm origin and then added the one for ssh and I still got the same error.

Thread Thread
 
trishabernice profile image
trishabernice

Do you have any suggestions for what I can do? I'll really appreciate it!

Thread Thread
 
mejimaru profile image
mejimaru • Edited
  1. go to github.com and create Repositories => your-app
  2. create your personal access token github.com/settings/tokens
  3. git remote set-url origin username:yourtoken@github.com/user...
  4. npm run deploy

or

  1. yarn add gh-pages
  2. yarn deploy
Thread Thread
 
sherazzie profile image
Sherazzie

mejimaru's solution worked if anyone ran into the error that @trishabernicer faced.

Thanks @mejimaru

Collapse
 
lathryx profile image
Lathryx

In response to @trishabernice 's problem with node_modules/.cache/gh-pages, a fix with this for me was to simply remove/delete node_modules/.cache/gh-pages, then execute npm run deploy once more.

This issue I'm referring to (and its answer) can be found on StackOverflow here: stackoverflow.com/questions/639645...

Collapse
 
chuchhin profile image
Jesús Sánchez • Edited

I'd the same problem and then read a lot of blogs/articles I find the solution. I'd changed the git in my PATH in this question you can find the solution then open the a new terminal and run the command npm run deploy I hope this help you.

Regards.

Collapse
 
averyfreeman profile image
Avery Freeman

If you don't have any commits you're worried about losing, you can just delete the .git folder.

Collapse
 
vicentgn profile image
Vicent García • Edited

Very interesting tutorial Ibrahim!
I have a question: how do you update the production build?
I mean: after deploying the app on GitHub, I realized that I need to change some stuffs. So I have generated new commits. If my app points to the master branch, how can I reflect that new changes on the production build then?

Thanks

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Make changes commit then deploy again, that's it

Collapse
 
vicentgn profile image
Vicent García

Ok! Thanks!

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

If you want to updating the release check
create-react-app.dev/docs/updating...

Thread Thread
 
vicentgn profile image
Vicent García

Perfect!
Thanks!

Collapse
 
firzatullahd profile image
Firzatullah Dwiko Ramadhan

so i commit and push to my origin/github master, then i run "npm run deploy" again?

Thread Thread
 
mdgolammostafa profile image
Curious React Web Developer

yes

Collapse
 
mdgolammostafa profile image
Curious React Web Developer

just write a command like below -
npm run deploy

Collapse
 
idongcodes profile image
Idong Essien

Hello ! This was a big help ! However, at step 5, I received this error:

"Cloning into 'node_modules/gh-pages/.cache/git@github.com!idongessien!idngessnio.git'...
Warning: Permanently added the RSA host key for IP address '140.82.114.4' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! idngessnio@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the idngessnio@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/idongessien/.npm/_logs/2020-05-17T18_23_28_805Z-debug.log"

Collapse
 
kokilgupta profile image
Kokil Gupta

Hey I'm getting the same error. Did you resolve it?

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Setup ssh key bro

Collapse
 
idongcodes profile image
Idong Essien

Forgive me but how do I do that ? I am a newbie here

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab
Collapse
 
seamanb2k profile image
DigitalEmma

found this post useful, thank you...I have a question, after i have pushed my react app to github page, when i visit the url it displays blank with no error message shown, any pointers why i'm seeing this happen/
plus this is my first project in react.
Thank you

Collapse
 
piruthuvi22 profile image
Piruthuvi

I got this same problem in the beginning. If you follow this tutorial correctly,then try this one.

Your home page route should be like this





<Route exact path="/your github repo name">



instead for

and in your rendered component change the




<Link to="/your github repo name">



instead for




<Link to="/">



And another important point you should consider. your github repo name must be valid name for example dots or space should not be in your repo name because that things conflict with URL.
Collapse
 
learndeepak profile image
Learn-Deepak

Thanks a lot @Piruthuvi.

Collapse
 
ultrax007 profile image
Rajat Sawarkar

this should be mentioned in the create-react-app docs, was so frustrated because of this simple code change, thanks alot mate @Piruthuvi

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks, double check your process, if the same error occurred please share with me your github repo and I will help immediately

Collapse
 
nidhipal09 profile image
Nidhi pal

Hey, thanks for this very helpful tutorial. I am also getting a blank page. I did what was suggested (changing the router and link path as the github repo name) but still its not resolved.

repo link - github.com/Nidhipal09/covid-19-pro...
websited - nidhipal09.github.io/covid-19-proj...

can you pls help

Collapse
 
anabeatrizzz profile image
Ana Beatriz

I did the changes but a blank page is displayed yet.

Collapse
 
pitysek16 profile image
Katerina Pidan

Hello, Ibrahim.
I have such problem:
fatal: A branch named 'gh-pages' already exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movie@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Can you help me? Here is my repo github.com/pitysek16/Movies-React-app

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

hii katerina check last commit in this repo
github.com/Yuribenjamin/Movies-Rea...
and already your app running
yuribenjamin.github.io/Movies-Reac...

if you fix this tell me to delete repo above.

Collapse
 
pitysek16 profile image
Katerina Pidan

Thank you! It is work

Collapse
 
solicks profile image
solicks

Please what did you do to resolve it. I'm having the same issue.

Thread Thread
 
siminmaleki profile image
Simin Maleki

when you receive error " A branch named 'gh-pages' already exists.", you have to delete the .config sub-folder in gh-pages folder in node_module.

Collapse
 
sirbukti profile image
Bukti Siregar

hi sir, i am experiencing the same error. can you please show me how to fix it?
thank you in advance

Collapse
 
esobeisaac profile image
EsobeIsaac

Please how where you able to fix that, I'm having same issue here

Collapse
 
zacastaylor profile image
Zac Taylor

Hey Ibrahim, my app won't deploy. I went over your instruction twice but am still having issues. Would you mind taking a look at my repo, it's github.com/ZacASTaylor/zacastaylor.... Thanks!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Hello Zac

you did well but you need to make some changes to make your project run online kindly follow this process carefully:

1 - you need to change repo name because of dots in repo name conflict with URL, zacastaylor it's good enough and works with me.

2- in package.json change homepage with new value should be "zacastaylor.github.io/zacastaylor"

2.1- change predeploy to the new value "npm run build", yarn is fine but it's not tested.

3- in App.js change line 25 to be <Route exact path='/zacastaylor'

4- in component => layout => Header.js line 37 to be <Link to="/zacastaylor"

download the project and change the repo name, after that remove the old connection you can check git remote -v you will see this connected with old repo remove connection by git remote rm this command will take one parameter the full command will be git remote rm origin.

if you check again git remote -v will display nothing to your terminal after that do the change above and make a commit with new changes then push and run npm run deploy.

happy to hear from you Zac, kindly update me if this process success or fail

Collapse
 
zacastaylor profile image
Zac Taylor

Thanks so much for you help Ibrahim, but the issue was that I needed slightly different instructions because I am trying to have my React app hosted on my GitHub user page and not a project page. I followed the instructions here: dev.to/javascripterika/deploy-a-re...

Thanks again!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
pak11273 profile image
Isaac Pak

video is private...

Collapse
 
kimberlybone profile image
Kimberly Bone

How would I add changes (such as changing the header, font, color, etc) to the page after deploying? I committed and pushed and it successfully shows on my github repo but when I go to my live link none of my changes show.

My repo: github.com/kimberlybone/my-portfol...
My live site: kimberlybone.github.io/my-portfoli...

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

did you try to delete GH-page branch && build directory, and deploying the app again? if not try this

Collapse
 
legyta profile image
Ligita Montvilaite

Hey - does this mean, everytime you update something on the page, we need to Delete Gh-page branch && delete build directory folder, and basically deploy again?

Is there no automatic update happening? (i.e. like, when deployed on netlify or smhtg.) ? Thanks!

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

to update run npm run deploy after each update

Thread Thread
 
omerhamid profile image
Omer

as you said committing and deploying works fine but you have to wait for the change to take an effect on the live link ( and sometimes the repo itself)

Collapse
 
lkian profile image
Leah

Hi. I am having issues deploying my React app to github pages. Could you take a look?
github.com/LKian/ToDoList

I added homepage to package.json, along with
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

I added the gh-pages as a dev dependency

The error seems to occur when I run "npm run deploy"

todolist@0.1.0 build /mnt/c/Users/Admin/Desktop/Code/todolist
react-scripts build

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module 'react-dev-utils/crossSpawn'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
.
.
.
.

Thank you!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab • Edited

hello Leah
give it try again I cloned your repo and walked through my tutorial,
and everything working fine with me check ...
dev-to-uploads.s3.amazonaws.com/i/...
dev-to-uploads.s3.amazonaws.com/i/...
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
lkian profile image
Leah • Edited

Oh thanks for the screenshots. The only difference I noticed was that for some reason even though I installed "gh-pages" yesterday, it wasn't there. I re-installed and gh-pages now appears in package.json.

I then tried to npm run deploy and am still getting an error. Any other thoughts as to what is wrong?

Creating an optimized production build...
Failed to compile.

./src/index.js
Error: [BABEL] /mnt/c/Users/Admin/Desktop/Code/todolist/src/index.js: Cannot find module '@babel/core' (While processing: "/mnt/c/Users/Admin/Desktop/Code/todolist/node_modules/babel-preset-react-app/index.js")

I read that the gh-pages is supposed to create a new branch but that is not happening. I'm going to try to delete the repo and start from scratch. After I make a new repo, should I still be running the following setup commands?
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:LKian/ToDoList.git
git push -u origin master

and THEN running npm run deploy? Still getting an error

Update: I deleted node_modules and package-lock.json and npm installed again. And it says published!!!!!!!!!! Still not showing up on the live page but I know sometimes it takes a while. Will keep you updated :-)

lkian.github.io/ToDoList/index.html

Got it. Apparently you have to add "/index.html" to the path

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

no, just the URL that equal to the home page key in the package.json
lkian.github.io/ToDoList
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
milanzmitrovic profile image
Milan Mitrovic • Edited

I have same issue. How did you solve at the end?

Actually, issue is with path of files that should be included i.e. imported from index.html file.

milanzmitrovic.github.io/milanzmit... should be milanzmitrovic.github.io/my-app/fa... . I do not know why it is written two times milanzmitrovic/ ???

Collapse
 
dboatengx profile image
Boateng Dickson

Very helpful article, thanks very much!

Collapse
 
itsgiovanni profile image
ItsGiovanni • Edited

Lovely. Thank you for this.

If you're having the following error:
Host key verification failed.
fatal: Could not read from remote repository.

Remove your remote:
git remote remove origin

Then create a new remote. no marks:
git remote add ht tps://github.com/username/repo-name.git

Using the git@github.com:... syntax ends up using SSH to clone, and inside the container, your private key is not available.

Collapse
 
raihanadf profile image
Raihan

Created this account just for thanking you, mine says invalid url all the time. Tried changing the homepage, reinstalling the package, removing the ssh remote, and even switching the node version lol. Thanks, your solution works.

Collapse
 
springdot profile image
Akanksha priya

Hi! At step 5, I added SSH keys however I received such error:
Cloning into 'node_modules/gh-pages/.cache/git@github.com!Spring-dot!face-detector.git'...
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! face-detector@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the face-detector@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/akanksha/.npm/_logs/2020-05-21T06_16_57_148Z-debug.log
Please help!! I am a beginner!

Collapse
 
strel9 profile image
Oleksandr Strelchenko
Collapse
 
tianyiz8 profile image
tianyiz8 • Edited

Hello, i am doing the routing for my website, but only the landing page shows up. Could you have a look? I think the problem should be in index.js, main.js, App.js. Thanks!!
tianyiz8.github.io/personal-website/
github.com/tianyiz8/personal-website

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Hey thanks for your comment, handling route in react can easly done by using react router package, not by default way as i saw in your app, also read about Single Page App, and declaritive programming
github.com/ReactTraining/react-router
Happy Hacking!

Collapse
 
tianyiz8 profile image
tianyiz8

Hello! Could you be more specific? I did use react-router-dom, and where are declaritive programming and Single Page App? I still have no idea how to make it work.
Thanks!

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

if so then why you declare a tag to route
check
reacttraining.com/react-router/web...

Collapse
 
mirelescloud profile image
Alex

Great article. I got it to work publishing the react app. Note that for the homepage I used "https" rather than "http". Also since I used yarn for my packages I tried to use it for the deploy as well, but it didn't work. I got it to work with npm however. Thanks again.

Collapse
 
shubhamsth profile image
Shubham Singh Thakur

Thanks for the quicky and simple blog, I am a beginner and I just deployed my react-app for the first time. It's live on github pages now and it's so cool :D

Collapse
 
helenemartin profile image
Hélène Martin

Hello Ibrahim, thanks for the tutorial.. a question.. I pushed my commit to a master branch before pushing to a remote.. How do I get on further? Do I have to do git checkout -b gh-pages? please let me know. Thanks in advance.. warm regards :)

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Just git push

Collapse
 
helenemartin profile image
Hélène Martin

thanks but when ? I created a main page before a gh-pages what do I do? Do I create a gh-page on command line? sorry if it is a stupid question

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

I don't get it!
But delete all branches remote and local
You now has a master branch commit your work and deploy it again

Thread Thread
 
helenemartin profile image
Hélène Martin

Sorry forget about it

Collapse
 
jaykeeshow profile image
jaykeeshow

Very nice post Ibrahim. Really helped me.
I was able to deploy my page to gh pages. The only thing is that my background image is not loading.
I have the image in my src folder. While running the app on my local server, The site was displaying my image perfectly. While i deploy on gh pages, image disappears.
I have tried adding the image using jsx, but to no avail. Previously i imported the image to my scss. Thought that was the problem.
Can someone tell me what's going on?
app is deployed here- jaykeeshow.github.io/simple-app/

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks buddy, I see your image doesn't load i saw the build file in yout code, try to build and run build locally before you deployed it and check why the image didn't appear

Collapse
 
jaykeeshow profile image
jaykeeshow

dear ibrahim, i dont know how to run build locally. when i run- npm install -g serve,
I get an error.

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jrajkumar/.npm/_logs/2021-02-23T10_56_22_458Z-debug.log
jays-Air:simple-app jrajkumar$

Thread Thread
 
damsalem profile image
Dani Amsalem

I ran into a similar issue where my images weren't loading. After running npm run build and npx run serve and some other commands, I found that my images were looking for the path I set in step #3, setting a homepage value.

By adding the slug of my repo /my-repo to the beginning of my image relative path, I was able to see my images on my local build. Then running npm run deploy, I pushed it all back up to Github and my images showed up as intended.

Collapse
 
eaindrawp profile image
Eaindra Wun Pyae

Hello Ibrahim, my app deploys now, but it is showing only HTML plain webpage. Would you mind looking at my Github repo, and guide me any necessary changes to my project? github.com/eaindra-wp/portfolio

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

hey Eaindra can you make master is the default, not Github pages to be able to clone your repo.
and put "homepage": "xyz....", at the top of your module
and check console errors, make sure console is free!

Collapse
 
eaindrawp profile image
Eaindra Wun Pyae

Hello Ibrahim, I have updated the steps that you suggested, but it seems like my react-app cannot find the CSS files yet.

Thread Thread
 
anabeatrizzz profile image
Ana Beatriz

I'm having the same issue.

Collapse
 
pniebrzydowski profile image
pniebrzydowski

In case anyone else runs into the same issue that I had. When running the build command for the first time, I got error:

fatal: ambiguous argument 'HEAD': unknown revision or path not in the working tree.

Creating a new branch gh-pages manually before running the deploy fixed this.

Collapse
 
devchrisdev profile image
Chris Joshua

What is wrong with mine, i do set up the ssh key. but i still got this error.

Cloning into 'node_modules\gh-pages.cache\git@github.com!DevChrisDev!ChrisJoshuaManuel.git'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chris-resume@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chris-resume@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Client\AppData\Roaming\npm-cache_logs\2020-06-20T00_08_24_598Z-debug.log

all help would be much appreciated.

Collapse
 
christopherdent profile image
Christopher James Dent

Just wanted to add my thanks for this guide, it's the best one I've seen and I reference it whenever I'm deploying a React app! Plus your follow up to people's questions below have gotten me out of a few sticky situations. Thank you very much!

Collapse
 
ian1202 profile image
ian1202

Hi Ibrahim, I have recently built my first react project. Despite having followed all your instructions on the thread, my app won't deploy. Would appreciate it if you could take a look at it for me:

ian1202.github.io/react-project/

Thank you!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab • Edited

Not all the instruction I think, do this changes to package dot json, change home to homepage and add the right value "http://{username}.github.io/{repo-name}" . Solved

Collapse
 
ian1202 profile image
ian1202

It worked! Sorry for having missed that detail. Thank you!

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

Your are welcome, Alawys happy to help 🙂

Collapse
 
marissa profile image
Marissa Wong • Edited

Hello, Ibrahim! Thank you for your tutorial. I was just wondering what changes would be necessary if I wanted to deploy the react app directly to the homepage (eg.: username.github.io), if that's even possible.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Hey Marissa, yea check this dev.to/javascripterika/deploy-a-re...
Happy hacking!

Collapse
 
mjach2 profile image
mjach

I deployed my react app to GitHub and its working but not what I expected. When I run the app on the localhost its works perfectly and I can see all the pictures and all the navigation works. After deploy on Github, I can not see anymore the images which were a relative path link to my app and also navigation back button seems not working. Any hints on how to overcome these issues. Here is react app Github deployed Link- Your site is published at mjachowdhury.github.io/mjacportfolio/

would you please look into this

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

hey mjach your problem-specifically in routing there's a difference between routing on dev server and the production double-check this point I know you can do it, and if not sadly contact me and I will fix this for you

Collapse
 
kriviears profile image
Kriviears • Edited

I followed the instructions and got the same messages from the terminal up to right under the "gh-pages -d build" and then I get these lines

gh-pages -d build

bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'github.com': Invalid argument

my repo is github.com/Kriviears/React-Portfolio

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

hey Kriviears, first you should fix all bugs before deploy, second check this repo this is your app running successfully, and double-check the fix commit after you fix this problem notify me to delete you repo = >
yuribenjamin.github.io/React-Portf...
github.com/Yuribenjamin/React-Port...

Collapse
 
irenkaaa profile image
Irena Mishonova

Helloooo :)
So, I am begginer... and I did what you "said"...and it worked... although I have two issues that I dont understand.

  • that is supposed to be my project page - irenkaaa.github.io/sweet-shop-proj... ... when u go is showing my 'not found page'... but when u click on the header parts, it is working - but with changed address - irenkaaa.github.io/{home?store?login ..etc.}..and it is only working the views... my node.js server is not exactly on there..
  • also the other thing... after the deploying , i got that build folder.. and basically...all my files changed and i caouldnt working on the project..Idk how but I managed to return them and now I can work, but I am totally lost...
Collapse
 
yuribenjamin profile image
Ibrahim Ragab

first issue check routing, second cuz you watch gh-branch change to master
happy hacking!

Collapse
 
irenkaaa profile image
Irena Mishonova

Thanks a lot! On my way to check the stuff!!!

Keep safe from Covid!

Collapse
 
erfanmashari profile image
erfanmashari

hello and thanks for tutorial
i have problem when i run deploy and i get this error and it's not published

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

41.33 KB build\static\js\2.be6fabde.chunk.js
1.62 KB build\static\js\3.335c5c5e.chunk.js
1.18 KB build\static\js\runtime-main.81677a80.js
588 B build\static\js\main.d0ad4d5b.chunk.js
556 B build\static\css\main.a617e044.chunk.css

The project was built assuming it is hosted at /erfanmashari/digikala.git/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

cra.link/deployment

digikala@0.1.0 deploy D:\Programming\Projcts\digikala
gh-pages -d build

fatal: A branch named 'gh-pages' already exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! digikala@0.1.0 deploy: gh-pages -d build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the digikala@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ghaem\AppData\Roaming\npm-cache_logs\2021-10-27T09_58_01_094Z-debug.log

what should i do?
my repo url: github.com/erfanmashari/digikala

Collapse
 
lakinduk profile image
Lakindu Kariyawasam • Edited

Really important tutorial. Thank you!

There's an error when I try to install react-bootstrap to my app.

react-bootstrap error

any suggestions on that?
Im very new to react.

Collapse
 
pauluzo profile image
pauluzo

Hello Ibrahim. I followed your tutorial and I am trying to deploy my first app to github pages. I keep getting this error when I run "npm run deploy".

gh-pages -d build

Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Any help please?

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

make sure that you provide the right credentials

Collapse
 
shvmsrma profile image
Shivam Sharma

Hi Ibrahim, First Thank you for a such a wonderful and helping blog.I have one doubt that i was able to succesfully deploy my react app but when i make changes locally i am unable to get those changes on my react app. Can you please guide how to do that in a proper way?

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Yeah make changes commit and run the deploy again to generate fresh build your terminal will tell you the rest,
Another way delete build delete gh branch make changes rub deploy
Happy Hacking

Collapse
 
bhargav_25 profile image
Bhargav Gohil • Edited

hey, Ibrahim I don't know where I am going wrong can you please check where is the issue

github.com/Bhargav252000/fakegram

the error I am getting

Cloning into 'C:\Users\BHARGAV\Desktop\React-Apps\fake-gram\node_modules\.cache\gh-pages\github.com!Bhargav252000!fake-gram.git'...
fatal: invalid branch name: init.defaultBranch =

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fake-gram@0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fake-gram@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\BHARGAV\AppData\Roaming\npm-cache\_logs\2020-10-09T13_30_51_074Z-debug.log
Collapse
 
safinghoghabori profile image
Safin Ghoghabori

Thank you so much for this much easy to follow explanation.

However i have one question to ask that is after deploying my portfolio site i got url something like username.github.io/dir-name but i want my portfolio website name something like this username.github.io, so how can i do this? Plesae let me know.

Collapse
 
andrii profile image
Andrii

Hi, I have this error:
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

can you provide your github repo

Collapse
 
andrii profile image
Andrii

Sure: github.com/andrii1
I'm trying github pages here: github.com/andrii1/andrii1.github.io

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

in this tutorial, I introduced deploying react App to Github pages, I see your app didn't consume react packages, so you can deploy your app using the normal process by open settings navigate to GitHub Pages then in Source choose the master branch if you want run your app from the master branch.
happy hacking!

Thread Thread
 
andrii profile image
Andrii

Sorry, can you specify a bit? I need to push it in separate repository inside /andrii1.github.io?

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

what I need to say your app not a react app so you don't need this tutorial to deploy it to gihtub you can deploy it from the setting

Thread Thread
 
andrii profile image
Andrii • Edited

So, I have my React app in separate folder my-app, when I'm trying to upload it to GitHub, I see this:
dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
 
andrii profile image
Andrii

Update: issue was solved with:
git push -f origin master

But, still andrii1.github.io/my-app is not live..
github.com/andrii1/my-app

Collapse
 
shazena profile image
shazena

Thank you for the amazing article! I did have one question. Is it possible to add on to that URL to make the page more specific? So instead of doing "githubusername.github.io/Repo-Name", is there a way we can do "githubusername.github.io/Repo-Name..." so that we could use that Repo for multiple projects? Or would you suggest just having a separate repo for each React project?

Collapse
 
devghai profile image
Dev Ghai

I have it initialized but where do I commit my actual code for my react project? gh-pages? I tried adding it to the main branch but when I deploy it just shows the starter react app page.

here is my repo:
github.com/devghai/myweb

Collapse
 
deven96 profile image
Diretnan Domnan

Nice article ... love your github page even more

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks mate :)

Collapse
 
puru profile image
Puru

ERROR IS COMING IN AT THE TIME OF PUSHING AN ALREADY EXISTING FILE..
HELP.
git push origin master
error: src refspec master does not match any
error: failed to push some refs to 'github.com:PuruDeveloper/indecision-appp.git'

Collapse
 
nechestephen profile image
Chinecherem Ubawike

I keep getting this when i try to deploy

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

Do i have to do all the task in git bash? Because i ran the npm commands with vscode, the rest with vscode

Collapse
 
hemang2199 profile image
hemang2199 • Edited

Hi , i got 404 when trying to access my URL , specified in "homepage" . However i got published message on my terminal . I followed the steps suggested by you . And i am using private repo of git hub . Also i didn't get this confirmation message i.e. "your site is published at ...(url)" . How i can fix this ?

Collapse
 
mathcodes profile image
Jonathan P Christie

First of all thank you for your time and kind help to all us junior developers here. Much appreciated!!!! I'm having the same issue as others here. I get this far:

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

81.32 KB build\static\js\main.92314488.js
65 B build\static\css\main.d41d8cd9.css

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

The build folder is ready to be deployed.
To publish it at mathcodes.github.io/jonchristiepor..., run:

npm run deploy

personalportfolio@0.1.0 deploy C:\Users\jonpc\Desktop\JonChristiePortfolioMASTER\jonchristieportfolio
gh-pages -d build

Published

BUT it still doesn't work. I tried using different combinations of branches and root/ vs doc/ in githb pages in settings, I tried pushing just the build folder. I've tried an embarassing amount of things to where I need your help!

Should I be in /root or docs/ for in github pages? What do I do after I get to the step above. It says its built and that I should run npm run deploy again... tried that no luck. What is the next step? Here is my repo. I hope you can drag me out of this vortex!!! Thank you in advance :)

github.com/mathcodes/jonchristiepo...

Collapse
 
oliverwatkins profile image
Oliver Watkins

This doesn't work for me at all. I get a 404 Error.

Are you sure there isn't another step you are missing?

My package.json has this :

"name": "shape-shop-frontend",
"homepage": "oliverwatkins.github.io/alpenhof",

I have connected to my remote repository here :

github.com/oliverwatkins/shape-sho...

And then I have run

"npm run deploy"

Are you sure there you don't have to create some io repository? In the github pages it says something about creating an "io" repo :

.github.io

Collapse
 
eimert profile image
Eimert Vink

Hello everbody,

I fixed the 404: "I ran into this problem myself and finally discovered a simpler solution. The problem is that Jekyll ignores all files that start with _. The simple solution is to add a .nojekyll file to your docs dir."

Here's how:
git checkout gh-pages
mkdir docs/
touch docs/.nojekyll
git push origin gh-pages

And a redeploy:
npm run deploy

Collapse
 
learndeepak profile image
Learn-Deepak

I have deployed my react app on GitHub pages thanks to you Ibrahim. And now I have added some changes in the app, and I have committed the changes, but now when I am deploying it (using npm run build ) it is giving me the error, PLease help.

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module 'D:\APR16\portfolio\run'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Collapse
 
learndeepak profile image
Learn-Deepak

When I added the homepage property in package.json file and then after that, I did "npm start" then it is also showing blank page.
After adding homepage:: localhost:3000/Portfolio
Before adding the homepage:: localhost:3000/

What to do, please guide me.

Collapse
 
hemang2199 profile image
hemang2199

Hi , i got 404 when trying to access my URL , specified in "homepage" . However i got published message on my terminal . I followed the steps suggested by you . And i am using private repo of git hub . Also i didn't get this confirmation message i.e. "your site is published at ...(url)" . How i can fix this ?

Collapse
 
hs844 profile image
hs844

Hello ibrahim,

ive followed your steps exactly, however my app loads on the local host but just opens up a blank page when loaded from my git hub repository? any help that would be greatly appreciated!
thanks!

Collapse
 
roypriyadarshan profile image
Priyadarshan Roy • Edited

I'm having problem in deploying my react app on github pages.
After following the instructions and publishing it, when going to the link a blank page is showing up.
When inspecting via react developer options it is showing the following error
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
ankitbavadiya profile image
ankit

Hello ! I don't know about this plz help!!

npm ERR! Unexpected end of JSON input while parsing near '...zoGC0To0Oe4FmdFXxry04'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ankit\AppData\Roaming\npm-cache_logs\2020-06-03T16_46_52_868Z-debug.log

Collapse
 
oliverwatkins profile image
Oliver Watkins

This does not work for me. Did everything exactly as you wrote but I get this error :

git-upload-pack '.': git-upload-pack: command not found
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Collapse
 
pak11273 profile image
Isaac Pak • Edited

You have some people running into a problem with "Permission denied (publickey). fatal: Could not read from remote repository” when they are deploying. If this is you, then this solution might work for you: superuser.com/questions/1435950/gi...

Collapse
 
shilpi386 profile image
shilpi386

Hi Ibrahim,

Thanks for this post.
I am facing issue in publishing my react app.
Repo path- github.com/shilpi386/SapphireNew
1) In package.json, "deploy": "gh-pages -d dist". I have written dist in place of build because main.bundle and index.html are built in dist folder.
2) Have changed, default path from \ to \SapphireNew in src/componetns/PageRenderer.js file.

3) on running on localhost, npm start, localhost:8080/SapphireNew gives homepage but publishing doesn't work.

4)Output of npm run deploy-
shilpiagrawal@shilpis-MacBook-Pro SapphireNew % npm run deploy

md-license-testapp@1.0.0 predeploy /Users/shilpiagrawal/new/SapphireNew
npm run build

md-license-testapp@1.0.0 build /Users/shilpiagrawal/new/SapphireNew
webpack --mode production

Hash: 76f155d2da45dbea767b
Version: webpack 4.42.1
Time: 8704ms
Built at: 09/01/2021 7:24:20 PM
Asset Size Chunks Chunk Names
./index.html 817 bytes [emitted]

avatar.png 8.12 KiB [emitted]

logo.png 1.14 KiB [emitted]

main.bundle.js 6.83 MiB 0 [emitted] [big] main
pngegg.png 2.73 KiB [emitted]

Entrypoint main [big] = main.bundle.js
[2] ./node_modules/d3/index.js + 292 modules 315 KiB {0} [built]
| 293 modules
[6] ./node_modules/@material-ui/core/esm/styles/withStyles.js + 1 modules 4.71 KiB {0} [built]
| 2 modules
[16] ./node_modules/react-redux/es/index.js + 22 modules 49.6 KiB {0} [built]
| 23 modules
[18] ./node_modules/react-router/esm/react-router.js + 1 modules 53 KiB {0} [built]
| 2 modules
[34] ./node_modules/react-router-dom/esm/react-router-dom.js + 1 modules 38.2 KiB {0} [built]
| 2 modules
[38] ./src/actions/DataUsageDiagram/SourceBrowserAction.js 8.99 KiB {0} [built]
[48] ./src/components/PgmStruChart/PgmStruChart.js + 4 modules 164 KiB {0} [built]
| 5 modules
[56] ./src/components/MainContent.js + 10 modules 75.7 KiB {0} [built]
| 11 modules
[62] ./src/components/DMDChart.js + 2 modules 46.9 KiB {0} [built]
| ./src/actions/DMD/EntRelDiagrams/EntPosAlgo.js 5.9 KiB [built]
| + 2 hidden modules
[63] ./src/actions/setDataUsageProgramActions.js 1.39 KiB {0} [built]
[64] ./src/actions/DataUsageDiagram/DataUsageProgramAction.js 7.56 KiB {0} [built]
69/buildin/global.js 472 bytes {0} [built]
[81] ./src/actions/setDataUsageFileActions.js 1.43 KiB {0} [built]
[134] ./src/components/TopBar.js + 13 modules 81.2 KiB {0} [built]
| ./src/images/logo.png 52 bytes [built]
| ./src/images/pngegg.png 54 bytes [built]
| ./src/images/avatar.png 54 bytes [built]
| + 11 hidden modules
[320] ./src/SapphireDiagrammer.js + 48 modules 132 KiB {0} [built]
| ./src/SapphireDiagrammer.js 741 bytes [built]
| ./src/reducers/index.js 3.9 KiB [built]
| ./src/reducers/sidebarReducer.js 1.73 KiB [built]
| ./src/reducers/MainContentReducer.js 2.02 KiB [built]
| ./src/reducers/TopbarReducer.js 3.52 KiB [built]
| ./src/reducers/SessionInfoReducer.js 1.46 KiB [built]
| ./src/reducers/PageElementsReducer.js 1.49 KiB [built]
| ./src/reducers/fetchentitiesReducer.js 1.38 KiB [built]
| ./src/reducers/fetchProgramsReducer.js 1.49 KiB [built]
| ./src/reducers/fetchSchemaReducer.js 1.38 KiB [built]
| ./src/reducers/fetchPgmSchemaReducer.js 1.4 KiB [built]
| ./src/reducers/fetchEntPgmFilesReducer.js 1.4 KiB [built]
| ./src/reducers/fetchEntViewReducer.js 1.38 KiB [built]
| ./src/reducers/fetchForEntityReducer.js 1.38 KiB [built]
| ./src/reducers/fetchForProgramReducer.js 1.39 KiB [built]
| + 34 hidden modules

  • 753 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
main.bundle.js (6.83 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (6.83 MiB)
main.bundle.js

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit webpack.js.org/guides/code-splitting/
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.12 KiB {0} [built]

md-license-testapp@1.0.0 deploy /Users/shilpiagrawal/new/SapphireNew
gh-pages -d dist

Published

Collapse
 
shilpi386 profile image
shilpi386 • Edited

Hi Ibrahim,

I tried all the changes suggested above, but unable to publish app.
shilpi386.github.io/SapphireNew - doesn't come up.
1)In package.json- I have written gh-pages -d dist instead of build because main.bundle.js and index.html files are build in dist folder.
2) npm run deploy finished without any error
3)I have cloned application from repo using http link.
Repo path- github.com/shilpi386/SapphireNew
4)Have changed default path from \ to \SapphireNew in file components/PageRenderer.js. and also in webpackconfig.js file.
5)I am attaching output of npm run deploy also.
shilpiagrawal@shilpis-MacBook-Pro SapphireNew % npm run deploy

md-license-testapp@1.0.0 predeploy /Users/shilpiagrawal/new/SapphireNew
npm run build

md-license-testapp@1.0.0 build /Users/shilpiagrawal/new/SapphireNew
webpack --mode production

Hash: 76f155d2da45dbea767b
Version: webpack 4.42.1
Time: 8704ms
Built at: 09/01/2021 7:24:20 PM
Asset Size Chunks Chunk Names
./index.html 817 bytes [emitted]

avatar.png 8.12 KiB [emitted]

logo.png 1.14 KiB [emitted]

main.bundle.js 6.83 MiB 0 [emitted] [big] main
pngegg.png 2.73 KiB [emitted]

Entrypoint main [big] = main.bundle.js
[2] ./node_modules/d3/index.js + 292 modules 315 KiB {0} [built]
| 293 modules
[6] ./node_modules/@material-ui/core/esm/styles/withStyles.js + 1 modules 4.71 KiB {0} [built]
| 2 modules
[16] ./node_modules/react-redux/es/index.js + 22 modules 49.6 KiB {0} [built]
| 23 modules
[18] ./node_modules/react-router/esm/react-router.js + 1 modules 53 KiB {0} [built]
| 2 modules
[34] ./node_modules/react-router-dom/esm/react-router-dom.js + 1 modules 38.2 KiB {0} [built]
| 2 modules
[38] ./src/actions/DataUsageDiagram/SourceBrowserAction.js 8.99 KiB {0} [built]
[48] ./src/components/PgmStruChart/PgmStruChart.js + 4 modules 164 KiB {0} [built]
| 5 modules
[56] ./src/components/MainContent.js + 10 modules 75.7 KiB {0} [built]
| 11 modules
[62] ./src/components/DMDChart.js + 2 modules 46.9 KiB {0} [built]
| ./src/actions/DMD/EntRelDiagrams/EntPosAlgo.js 5.9 KiB [built]
| + 2 hidden modules
[63] ./src/actions/setDataUsageProgramActions.js 1.39 KiB {0} [built]
[64] ./src/actions/DataUsageDiagram/DataUsageProgramAction.js 7.56 KiB {0} [built]
69/buildin/global.js 472 bytes {0} [built]
[81] ./src/actions/setDataUsageFileActions.js 1.43 KiB {0} [built]
[134] ./src/components/TopBar.js + 13 modules 81.2 KiB {0} [built]
| ./src/images/logo.png 52 bytes [built]
| ./src/images/pngegg.png 54 bytes [built]
| ./src/images/avatar.png 54 bytes [built]
| + 11 hidden modules
[320] ./src/SapphireDiagrammer.js + 48 modules 132 KiB {0} [built]
| ./src/SapphireDiagrammer.js 741 bytes [built]
| ./src/reducers/index.js 3.9 KiB [built]
| ./src/reducers/sidebarReducer.js 1.73 KiB [built]
| ./src/reducers/MainContentReducer.js 2.02 KiB [built]
| ./src/reducers/TopbarReducer.js 3.52 KiB [built]
| ./src/reducers/SessionInfoReducer.js 1.46 KiB [built]
| ./src/reducers/PageElementsReducer.js 1.49 KiB [built]
| ./src/reducers/fetchentitiesReducer.js 1.38 KiB [built]
| ./src/reducers/fetchProgramsReducer.js 1.49 KiB [built]
| ./src/reducers/fetchSchemaReducer.js 1.38 KiB [built]
| ./src/reducers/fetchPgmSchemaReducer.js 1.4 KiB [built]
| ./src/reducers/fetchEntPgmFilesReducer.js 1.4 KiB [built]
| ./src/reducers/fetchEntViewReducer.js 1.38 KiB [built]
| ./src/reducers/fetchForEntityReducer.js 1.38 KiB [built]
| ./src/reducers/fetchForProgramReducer.js 1.39 KiB [built]
| + 34 hidden modules
+ 753 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
main.bundle.js (6.83 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (6.83 MiB)
main.bundle.js

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit webpack.js.org/guides/code-splitting/
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.12 KiB {0} [built]

md-license-testapp@1.0.0 deploy /Users/shilpiagrawal/new/SapphireNew
gh-pages -d dist

Published

I expect output as attached in image. On localhost, it works fine when i do npm start.

Please help.

Collapse
 
phyleme profile image
PhyleMe

Every tutorial for pages I see has someone create a boilerplate and then start the coding, I already have a multipage react app and after following the tutorial it just creates the readme file for yarn and I cannot see the app until I deploy yarn to local host, how come I cannot get this going? I followed everything and got no errors.

Collapse
 
affectus01 profile image
Affectus01

Im having issues with my components outside of App.js. The im getting 404 errors when i try to go anywhere but my git hub page. Can you take a look at this for me?

affectus01.github.io/nolan-softworks/
github.com/Affectus01/nolan-softworks

Collapse
 
sotomaque profile image
sotomaque • Edited

Hey Ibrahim, thank you for the tutorial, I have previously used it to deploy other apps. At the moment I am trying to use it to deploy a simple CRUD app, but am getting a blank html page. Do you mind taking a look? github.com/sotomaque/graphql-react...
sotomaque.github.io/graphql-react-...

Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy • Edited

After I deploy the application and I make some change but I can't update the change, how can I do that? I use git push -u origin master but not updating the changes. It's updating only again npm run deploy but it's load all file again, I need only update specific changes.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Delete github branch and build file make your changes commit then deploy easy peasy

Collapse
 
makhosii profile image
makhosii • Edited

Ibrahim Ragab, Please help, I followed all the steps above and my site went live for some time and then it started showing these react instructions(check the attached screenshot)

raw.githubusercontent.com/makhosi6... (Image)
makhosi6.github.io/movie-app/ (Site)

Collapse
 
mihaicira profile image
mihaicira

Hello! Thank you for the tutorial - extremely helpful.

Do you have any ideea how a react app behaves if Firebase (Realtime Database) is used?
While development it works just fine - no problems at all - reading data works, writing data works, but when i deploy the application, I suddenly stop recieving anything in my database.

Any ideea why?

Collapse
 
caseycling profile image
caseycling • Edited

Hey Ibrahim,

Thanks for the tutorial. I've got this to work when I am hosting a react app with only one package.json but now that I am trying to deploy an app with two, I'm not sure how to do it. It is some issue with how to fire the scripts once I start the app. I imagine I'll need to put the deploy and predeploy scripts in the client package.json but I'm not sure if there will be any bugs created because of that. Right now, the react front end is up and loads but I can't seem to access my database to display relevant data. Can you help me?

Here is where its hosted: caseycling.github.io/MERN-Stack/
Here is my code: github.com/caseycling/MERN-Stack/t...

Collapse
 
tik9 profile image
Timo Körner • Edited

In localhost:3000 I see the app, but on tik9.github.io/react-app/ I see the readme. But instead I want to see the app similar to localhost.
I tried to upload a screengrab, but does not work.

Collapse
 
ramyathirumalai5 profile image
Ramya

Hi.. I stuck at step4.
When I type 'git init' this is the error I am getting.
Please help me.

PS C:\Users\mail2\Desktop\React\datetoggler> git init
git : The term 'git' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

  • git init
  • ~~~
    • CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException
    • FullyQualifiedErrorId : CommandNotFoundException
Collapse
 
yuribenjamin profile image
Ibrahim Ragab • Edited

You didn't even start to get stuck Install git and alaways Read the error message and search for it

Collapse
 
akeber89 profile image
Rebeka Meszaros

Hi Ibrahim, I wonder if you can help. I have already managed to deploy my React app once but after changing the repo name, then following your instructions again it stopped working. The link is akeber89.github.io/React-App-Table... , what do you suggest I do?

Collapse
 
ramyathirumalai5 profile image
Ramya

Please help me with the issue I am getting. I have followed all your steps. But I get stuck at step: 4.
When I give 'git init', this is what I get:

PS C:\Users\mail2\Desktop\React\datetoggler> git init
git : The term 'git' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

  • git init
  • ~~~
    • CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException
    • FullyQualifiedErrorId : CommandNotFoundException
Collapse
 
lijomloyid profile image
Lijo M Loyid

Is it possible to deploy the React application to a custom url name in github pages rather than the repo name? For example, if my repo name is "my-app", can I deploy it only to "lijomloyid.github.io/my-app" ?. Or is there a way to customize the url? I tried changing the homepage property in package.json but it will not work. If there is any other way?

Collapse
 
codechiha profile image
David Situ

I am trying to install gh-pages. I followed instructions exactly, using npm.

Then I tried using yarn

"predeploy": "yarn build",
"deploy": "gh-pages -d build", 

yarn deploy

Shows this Error with both npm and yarn

Error: spawn git ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:362:16)
at _combinedTickCallback (internal/process/next_tick.js:139:11)
at process._tickCallback (internal/process/next_tick.js:181:9)
at Function.Module.runMain (module.js:696:11)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3

Collapse
 
devfreitag profile image
Alex Freitag

if we have a mono repository, with backend and frontend folder, the backend will works correctly when we deploy the app or do we have to deploy the backend in another place, like heroku, and use the heroku url to connect with the frontend?

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Yes deploy backend in another service and connect

Collapse
 
gabrielmlinassi profile image
Gabriel Linassi

man this gh-pages package is pure magic. Super cool! Took all my suffer of deploying to gh pages. Before it I used to do stuff like track build folder into master branch and do a subtree to gh-pages branch. Like this:

git push origin --delete gh-pages &&
git branch -D gh-pages &&
git subtree split --prefix build -b gh-pages

Collapse
 
piruthuvi22 profile image
Piruthuvi

first, thank you.I deployed my app using github with this article.but after the deployment when i refresh my site’s pages, i got 404 error that indicate “file not found ( must provide an “index.html” file) . Could you please help me?

Collapse
 
rolypolyistaken profile image
Roly Poly Was Taken

I don't understand the steps in 4: "Create a Github repository and initialize it and add it as a remote in your local git repository.

Now, create a remote GitHub repository with your app name and go back initialize this"

What is a Github repository? I know that part. But I don't know how to "initialize it" or "add it as a remote in my local git repository". I can't get past that part. Please advise, someone!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

hi roly kindly this guide will give a solid understanding of what is git and what is these mysterious commands check git-scm.com/docs/gittutoria , simply your projects are the repository and git init = git initialize your projects for git to track your changes.
stay in touch if you need any help, thanks and happy hacking!

Collapse
 
gsus0194 profile image
Jesús Salvador Villegas Cambero

I gave it a try, but I'm getting a 404 error. Any idea what it can be?

repo: github.com/gsus0194/gsus0194.githu...
gitpage: gsus0194.github.io/professional_we...

Thanks

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

hi bro, give your app and repo simple name without any special characters kindly check this commit for fix this bug github.com/Yuribenjamin/gsus/commi...
and your app is running successfully
yuribenjamin.github.io/gsus/
finally, after fixing this issue tell me to delete your repo

Collapse
 
gsus0194 profile image
Jesús Salvador Villegas Cambero

Thanks! you can delete it

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

Happy hacking!

Collapse
 
kunalkashyap855 profile image
Kunal Kashyap

Hey! Thank you for this tutorial, I was able to deploy my react app successfully. I just had one question, now if I have made some changes to the app, how do I upload them on the deployed site? Do I just run npm run deploy again?

Collapse
 
lukasjj profile image
Lukas

Hello,

Thanks for the tutorial. I followed all the steps but for some reason my gh-pages link is left blank (but it still receives the title 'React App'. )

Why is my project not showing up on the gh-pages link?

My repo: github.com/lukas-jj/pomodoro
Link to the page: lukas-jj.github.io/pomodoro/

Cheers

Collapse
 
appukuttanshailesh profile image
appukuttan-shailesh

Hi Ibrahim, thanks for the tutorial. I believe I have followed all the steps, got no errors, but unable to view the final output... it keeps showing "Site not found".
My page is at: appukuttan-shailesh.github.io/live...

The branch I deployed is here:
github.com/appukuttan-shailesh/liv...

Can you give me any tips on what I might be doing wrong? Thanks in advance!

Collapse
 
lidorb94 profile image
Lidor Batino

thank you very much, but i have a problem after i did npm run deploy it shows me a blank page... can you help me on how to fix it?
this is my repo...
github.com/lidorb94/instagram-ui

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Hey Lidor, your problem in routing double-check this point, this causes the black screen because you define your homepage URL as a start point for routing and you did not specify it in app.js, check the difference between dev server and prod.

Collapse
 
mh_shifat profile image
5hfT

Should add 'homepage' : '.' in package.json file !

Collapse
 
ergeerrr profile image
mehdi • Edited

Thanks for this knowledge but when i do ( npm run deploy ) **i get an Error says
**Error: ENOENT: no such file or directory, stat '/home/ysn/Desktop/social-app/build'
at Object.statSync (node:fs:1679:25)
at Object.statSync (/home/ysn/Desktop/social-app/node_modules/graceful-fs/polyfills.js:319:16)
at Object.publish (/home/ysn/Desktop/social-app/node_modules/gh-pages/lib/index.js:90:13)
at /home/ysn/Desktop/social-app/node_modules/gh-pages/bin/gh-pages.js:12:13
at new Promise ()
at publish (/home/ysn/Desktop/social-app/node_modules/gh-pages/bin/gh-pages.js:10:10)
at /home/ysn/Desktop/social-app/node_modules/gh-pages/bin/gh-pages.js:140:12
'

i did everything in the tuto, any help please thanks in advance.

Collapse
 
jurih profile image
Juri Haataja

I was just about to get overwhelmed of the process to deploy my ReactJS app on Google Cloud.
With GitHub Pages it was as easy as it gets!
I read that you can also use your own domains with Pages, which I'm gonna figure out next.

Collapse
 
alohe profile image
Alohe

Anyone with an error use http instead of SSH

git remote add origin http://github.com/username/repo-name.git
Enter fullscreen mode Exit fullscreen mode
Collapse
 
abdelghanydz profile image
mahammedi_abdelghani • Edited

After deploying a Github page, how do you update it with changes?
i'm having the same issue!

Collapse
 
suchitra_13 profile image
Suchitra

Thanks a lot:)

Collapse
 
aaronsoto profile image
Aaron Soto

So after running npm run deploy If i make a change and want it to reflect on than github pages do i just push the pages again and run deploy again?

Collapse
 
somashrirastogi profile image
Somashri rastogi • Edited

I had completed the procedure all files are showiing in master branch then also when I go in settings and open link I get my weather app but now it is not working in this link ike it did in my local host

Collapse
 
scibettas1 profile image
Samantha Scibetta

I have followed your instructions but I keep getting an error at step #4. When I enter "git remote add origin git@github.com:scibettas1/portfolio-website.git", it returns a "fatal: remote origin already exists" and will not deploy. I can't figure out what I am doing wrong. Can you please assist?

github.com/scibettas1/portfolio-we...
scibettas1.github.io/portfolio-web...

Collapse
 
naivedh profile image
Naivedh

I have 2 branches master and gh-pages how to merge them?

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Check git merge or git squash or git rebase

Collapse
 
naivedh profile image
Naivedh

I also am unable to use routes except /

Thread Thread
 
yuribenjamin profile image
Ibrahim Ragab

Use / to describe your root directory after / name your pages for example /portfolio or /contact check react router for further info

Collapse
 
poojakp16 profile image
Pooja Prasad

Nicely explained

Collapse
 
ashishkumar39 profile image
ashishkumar39

Hi Ibrahim, I have deployed my app and it works fine but I try to open some internal link from my app directly into the browser then I get 404 error. Any idea what is the issue here?
Only way to open the app is to use the link that I added in the homepage field in package.json file. No other internal links work directly.
ashishkumar39.github.io/blogs/ <= this works
ashishkumar39.github.io/blogs/depe... <= this does not.
Please help

Collapse
 
ginnerzapata profile image
Ginner Zapata

thanks a lot bro! god bless ya :P

Collapse
 
amansrivastava905 profile image
Aman Srivastava

Hi, i did the same, but if my root page is "/", then using this means, the root page rendered is "/reponame/". As we dont have any routes to handle this path, i got to see an 404 page. Can anyone help me out to solve this issue.

Collapse
 
learndeepak profile image
Learn-Deepak

Thanks a lot my issue is resolved.

Collapse
 
jsubcab profile image
Jorge Cabrera

You sir are the real MVP.

Collapse
 
marcmdion profile image
marcmdion

Hi Ibrahim, How would you update a react app that you have deployed via GitHub? Thanks, Marc

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Hello Mark I hope you're doing well, if you want to updating to new releases check this link below
create-react-app.dev/docs/updating...

Collapse
 
hidaytrahman profile image
Hidayt Rahman

Thanks a lot for the tutorial, Can we deploy with private repo?

Collapse
 
bhanuka94 profile image
Bhanuka94

Thank you very much. It worked well. 🙂🚀

Collapse
 
sajjan_404 profile image
Sajjan Karn

can i deploy as much as i want? or there's some limitations?

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

As much as you can

Collapse
 
apol0x profile image
Apol0x

Nice introductiong man. Saved it ;)

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks :)

Collapse
 
mhkamel profile image
MHKamel

Nice article ... love your github page even more

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks Mohamed :)

Collapse
 
johnmutina profile image
JohnMutina

Thank you for this, Ibrahim! Cheers

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

You are welcome John Cheers :)

Collapse
 
layersofabstraction profile image
Jordan Nash

Thank you. I had to follow every step and re-watch your no-nonsense video for this to work from the beginning but it was actually more helpful than React's documentation for deploying SPAs.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks! I will rework this soon with more detailed steps also enhance video

Collapse
 
tyronenorth profile image
Tyrone North

Thanks for the great instructions. Works for me.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks, Tyrone

Collapse
 
poburi profile image
포부리

thank you so much!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

You're welcome

Collapse
 
caffiendkitten profile image
DaNeil C

Thanks for the post. This was super helpful with setting up my own react app in gh pages.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

You are welcome Daniel!

Collapse
 
whenicode profile image
when-i-code

Thank you! Also I would like to add something:

if you can't do git push use "git push -f origin master"

Collapse
 
andrescampuzano profile image
Andres Campuzano Garzon

Thanks so much, it really helps me a lot!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Thanks Anders

Collapse
 
robpwatkins profile image
robpwatkins

Worked like a charm right away! Thanks so much. This was super helpful.

Collapse
 
ariellb profile image
Ariel Elbahar

hi Ibrahim! i have a problem after i finished doing all the instructions i have a blank page when i try to access the page.
ariellb.github.io/ColorApp/
this is the source code for the project:
github.com/ArielLB/ColorApp

please help me! thanks

Collapse
 
learndeepak profile image
Learn-Deepak

I followed the steps from dot to dot, but could not see the desired result.
When I click the link on which my site is uploaded it just shows a blank page.
Please help.

Collapse
 
smahsru profile image
Shams Ur Rahman

sir my projcet in not open and gives the error of docs folder missing

Collapse
 
naagarjunsa profile image
Nagarjun Avaraddy

Thank you! This was helpful!

Collapse
 
svgpubs profile image
svgpubs

Mine runs smoothly, says "published" but the published site is my README.md file, not my react app. Any advice?

Collapse
 
dzvid profile image
David

Yoo thanks!

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

welcome David

Collapse
 
mitchelln11 profile image
mitchelln11

Does it ever just take some time to start displaying? I'm being sent to a page displaying all of the npm options, which I already did.

Collapse
 
mtsanford profile image
mtsanford

When add the "homepage" property to package.json the local webserver serves from localhost:3000/my-repo-name instead of localhost:3000, and all my links to assets in my public folder break.

Collapse
 
hamzaanis profile image
Hamza Anis

Can we deploy multiple apps to same GitHub repository on different branches?

Collapse
 
ernesthenry profile image
ernestkato

How can specify that root component that will display as our homepage

Collapse
 
stersj profile image
Esther Sim

Hi, Ibrahim thank you for this. It's a very good tutorial. I have successfully deployed the site via your instructions with a few mini changes.

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Hey, Esther
It's my pleasure, happy that my tutorial helps you, good luck 🍀

Collapse
 
zsmithdfw profile image
Zach Smith

Thank you so much for this, Ibrahim!! Exactly what I needed.

Collapse
 
shahzzoda profile image
Shahzoda D.

Thanks for the article! One thing I'd like to add is I had to change my serving branch to gh-pages after running deploy. Otherwise it served the readme file for me.

Collapse
 
shrey profile image
shrey

shrey.github.io/monsters-rolodex-r...

I followed all the steps, and it says it's deployed, can you please click on the link and see what's the issue

Collapse
 
tasharrymax profile image
tasharry-max

Very helpful !

Collapse
 
kshubhranshu profile image
KUMAR SHUBHRANSHU
Collapse
 
macarcillar profile image
markangel

Thank you!

Collapse
 
danielrom383 profile image
danielrom383

hey, it's not worked for me ... when i go to the website i get a white page with my title

Collapse
 
danielrom383 profile image
danielrom383

hey,
trying to do that...
but in the site i see a white page

Collapse
 
ezalivadnyi profile image
Eugene Zalivadnyi

how to deploy it to the root and not in /my-app?

Collapse
 
techmasterz profile image
Ali

Thanks, great tutorial.

Collapse
 
yongchanghe profile image
Yongchang He

Thank you for sharing! And wonder if this tutorial still works for 2022?

Collapse
 
priyesh2109 profile image
Priyesh2109

Hello great article but i am having a few issues on mine. I am not seeing any changes, please could you take a look here.

github.com/Priyesh2109/my-fourthnn

Collapse
 
samantha_scibetta_337ef6b profile image
Samantha Scibetta

I am getting this error:

fatal: remote origin already exists.

I can't seem to get past it. Has anyone else has this issue? If so how did you fix it?

Collapse
 
jashgopani profile image
Jash Gopani

I always forget how to do this 😂. Thanks for this apt article

Collapse
 
alexiosgrig profile image
Alexios Grigoriadis

Thank you. When i make changes again to the project i have to npm run deploy and push again ?

Collapse
 
venkatraja007 profile image
venkatraja007

Hi Ibrahim ,

My app deployed successfully but url is not working for my page its showing readme file onyl.

venkatraja007.github.io/democart54/
If you don't mind can i get help on this .

Collapse
 
felipedsmartins profile image
Felipe Martins

Thanks!!!

Collapse
 
alisina97294831 profile image
AbuAliSina • Edited

If you want to updating the release check
create-react-app.dev/docs/updating

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Yeah thanks ming 😁👍

Collapse
 
kseniyaco profile image
KseniyaCo

Hello. I followed all the instructions, but when I enter npm run deploy I recieve "The "file" argument must be of type string. Received type undefined" error. How to handle this? Thank you

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Can you double Check the package.json file make sure you set correctly the homepage, predeploy, deploy check commas single quotes or double, if not provide me your repo url and make sure I will help

Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Urw welcome bruno, since we're working with react-app you can check
create-react-app.dev/docs/adding-c...

Collapse
 
douglasfeliphe profile image
DouglasFeliphe

Thanks so much, it worked!

Collapse
 
brookebachman profile image
Brooke B

What should I name my repository? Does it need to follow a particular naming convention versus "stream_screen"?

Collapse
 
brookebachman profile image
Brooke B

Also in settings it only gives me options to deploy from /docs or /root. How do I get it to deploy from my public folder?

Collapse
 
itsmacky profile image
itsMacky

Hey Ibrahim, i followed as you mentioned, but i got black screen when i visit my site url= itsmacky.github.io/myapp/

my repo:- github.com/itsMacky/myapp

please do help me.

Collapse
 
idongcodes profile image
Idong Essien

Hello thanks for this however at step 5 I received this error:

Collapse
 
lukaakhalbedashvili profile image
lukaakhalbedashvili

thanks,it works. just don't forget to save changes to package.json

Collapse
 
ratiarahman profile image
Vanya

Thanks for the tutorial. I successfully deployed my project.

But the problem I am facing is - My app.js has not rendered and the project is not showing. How can I solve this?

Collapse
 
shrabani profile image
Shrabani Bhowmick

Hi Ibrahim...thanks for your help. I got my latest files in git...but the page shrabanib.github.io/my-app/ ...shows the original react home page...not my app. Any idea ? Thanks

Collapse
 
udithaishan profile image
Uditha Ishan

I was searching for this. Thank you!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
yuribenjamin profile image
Ibrahim Ragab

Easy way delete branch
Or navigate to pages tab in GitHub settings for this repo and changes branch to none