How to deploy React App to GitHub Pages

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 [e-mail]: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.

Comments

[mehdi]

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.

[Yongchang He]

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

[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

[Boateng Dickson]

Very helpful article, thanks very much!

[Ibrahim Ragab]

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

[svgpubs]

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

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

[Alexios Grigoriadis]

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

[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

[Ali]

Thanks, great tutorial.