Deploying React apps to GitHub pages

Assuming that we have pushed up our React app to our remote Git repo, we will perform the following:

• Install the gh-pages utility
• Edit package.json for deployment
• Deploy our app to GitHub page
• Set up the remote repository for GitHub pages
• Set ourselves up for re-deployment

Installing the gh-pages utility

Let us set up this package as a "dev dependency":

$ npm install gh-pages --save-dev

Editing package.json for deployment

Add this JSON property to the package.json file, replacing yourname and yourrepo with the obvious:

"homepage" : "https://yourname.github.io/yourrepo"

Then, within the scripts property:

"scripts" : {
  "predeploy" : "npm run build", 
  "deploy" : "gh-pages -d build", 
  ...
}

Overall, the package.json file should look something like:

{
"homepage": "https://yourname.github.io/yourrepo",
"name": "reactetc",
"description": "some react stuff",
"version": "1.0.0",
"main": "src/index.js",
"dependencies": {
   "react": "^17.0.0",
   "react-dom": "^17.0.0",
   "react-scripts": "^4.0.1",
},
"scripts": {
   "predeploy" : "npm run build",
   "deploy" : "gh-pages -d build",
   "start": "react-scripts start",
   "build": "react-scripts build"
},
"browserslist": [
   "defaults"
],
"author": "yourname",
"license": "MIT"
}

Deploying the app

In Terminal, we can run the one-liner command:

$ npm run deploy

Setting up the remote repository for GitHub pages

On GitHub, assuming you have an account and everything:

• Create a new remote repository (and note down its URL)
• Go into the repository's Settings
  • Go to the section GitHub Pages
  • Under "Source":
    • Pick "Branch: gh-pages"
      • leave the folder at **** /(root)
    • Save

Wait a few seconds or a few minutes to see the page live on yourname.github.io/yourrepo

Re-deployment

For every time that we wish to re-deploy, we simply run these commands:

$ git add -A
$ git commit -m "pushing another version"
$ git push origin master
$ npm run deploy