Ibrahim Ragab

Posted on Jun 23, 2019 • Edited on Aug 10, 2021

How to deploy React App to GitHub Pages

#react #javascript #webdev #github

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.

Install Node.js
Install Npm

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:

Visit deployed app

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.

Oldest comments (252)

Apol0x • Jun 27 '19

Nice introductiong man. Saved it ;)

Ibrahim Ragab • Jun 27 '19

Thanks :)

Diretnan Domnan • Jun 27 '19

Nice article ... love your github page even more

Ibrahim Ragab • Jun 27 '19

Thanks mate :)

MHKamel • Jun 28 '19

Nice article ... love your github page even more

Ibrahim Ragab • Jun 28 '19

Thanks Mohamed :)

JohnMutina • Jul 1 '19

Thank you for this, Ibrahim! Cheers

Ibrahim Ragab • Jul 1 '19

You are welcome John Cheers :)

KseniyaCo • Aug 2 '19

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

Ibrahim Ragab • Aug 2 '19

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

DigitalEmma • Aug 16 '19

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

Ibrahim Ragab • Aug 16 '19

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

Ana Beatriz • Nov 19 '21

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

Nidhi pal • Nov 27 '21

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

Piruthuvi • Apr 25 '20

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.

Learn-Deepak • Aug 2 '20

Thanks a lot @Piruthuvi.

Rajat Sawarkar • Oct 5 '20

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

Jordan Nash • Aug 21 '19

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.

Ibrahim Ragab • Aug 22 '19

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

Zac Taylor • Oct 6 '19

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!

Ibrahim Ragab • Oct 6 '19

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

Zac Taylor • Oct 6 '19

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!