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 show how to create and deploy React App using create-react-app and GitHub Pages
Prerequisites :
GitHub Account.
Install Git in your machine and Set up Git.
Make sure you have Node.js and Npm installed in your machine.
Notice You’ll need to have Node 8.10.0 or later on your local machine.
Procedure :
1- First create a repository named my-app using create-react-app.
npm init react-app my-app
2- We need to install GitHub Pages package as a dev-dependency.
cd my-app
npm install gh-pages --save-dev
3- Add properties to package.json file.
The first property we need to add at the top level homepage second we will define this as a string and the value will be "http://{username}.github.io/{repo-name}" {username} is your GitHub username, and {repo-name} is the name of the GitHub repository you created it will look like this :
"homepage": "http://yuribenjamin.github.io/my-app"
Second in the existing scripts property we to need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
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
git init
add it as remote
git remote add origin git@github.com:Yuribenjamin/my-app.git
5- Now deploy it to GitHub Pages.
just run the following command :
npm run deploy
this command will create a branch named gh-pages this branch host your app, and homepage property you created in package.json file hold your link for a live preview, or you can open the branch setting scroll down to GitHub Pages section you will find this:
6- commit and push your commit to GitHub. Optionally
git add .
git commit -m "Your awesome message"
git push origin master
Recap
We created React App using create-react-app
then we installed gh-pages as a dev-dependency
and in package.json file we added some properties homepage also in existing scripts property we added predeploy and deploy
and created a remote repository and initialize it
and run npm run deploy to generate a production build and deploy it to GitHub Pages.
if you have any questions, please don't hesitate to ask.
Always happy to hear from you.
Top comments (252)
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 buildnpm 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!
No problem
git remote - vWill display origin and the wrong remote url
To delete it
git remote rm originThen check again
git remote - vWill display nothing time to add the right one
Happy Hacking
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 buildnpm 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?
Use http or ssh
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.
Do you have any suggestions for what I can do? I'll really appreciate it!
or
mejimaru's solution worked if anyone ran into the error that @trishabernicer faced.
Thanks @mejimaru
In response to @trishabernice 's problem with
node_modules/.cache/gh-pages, a fix with this for me was to simply remove/deletenode_modules/.cache/gh-pages, then executenpm run deployonce more.This issue I'm referring to (and its answer) can be found on StackOverflow here: stackoverflow.com/questions/639645...
I'd the same problem and then read a lot of blogs/articles I find the solution. I'd changed the git in my
PATHin this question you can find the solution then open the a new terminal and run the commandnpm run deployI hope this help you.Regards.
If you don't have any commits you're worried about losing, you can just delete the
.gitfolder.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
Make changes commit then deploy again, that's it
Ok! Thanks!
If you want to updating the release check
create-react-app.dev/docs/updating...
Perfect!
Thanks!
so i commit and push to my origin/github master, then i run "npm run deploy" again?
yes
just write a command like below -
npm run deploy
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 buildnpm 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"
Hey I'm getting the same error. Did you resolve it?
Setup ssh key bro
Forgive me but how do I do that ? I am a newbie here
Check this help.github.com/en/enterprise/2.15...
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
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
instead forand in your rendered component change the instead for 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.
Thanks a lot @Piruthuvi.
this should be mentioned in the create-react-app docs, was so frustrated because of this simple code change, thanks alot mate @Piruthuvi
Thanks, double check your process, if the same error occurred please share with me your github repo and I will help immediately
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
I did the changes but a blank page is displayed yet.
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 buildnpm 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
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.
Thank you! It is work
Please what did you do to resolve it. I'm having the same issue.
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.
hi sir, i am experiencing the same error. can you please show me how to fix it?
thank you in advance
Please how where you able to fix that, I'm having same issue here
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!
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 -vyou will see this connected with old repo remove connection bygit remote rmthis command will take one parameter the full command will begit remote rm origin.if you check again
git remote -vwill display nothing to your terminal after that do the change above and make a commit with new changes then push and runnpm run deploy.happy to hear from you Zac, kindly update me if this process success or fail
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!
video is private...
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...
did you try to delete GH-page branch && build directory, and deploying the app again? if not try this
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!
to update run
npm run deployafter each updateas 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)
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!
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/...
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
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/...
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/ ???
Very helpful article, thanks very much!
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.
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.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.