Deploying React apps to GitHub pages

Now we are ready to deploy, or push, our React app up to the Internet!

If we have already created our React app and pushed it up to a repo in GitHub, we can 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":

1$ npm install gh-pages --save-dev

Editing package.json for deployment

Adding this JSON property to the package.json file, let's replace yourname and yourrepo with anything we want:

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

Then, within the scripts property:

1"scripts" : {
2  "predeploy" : "npm run build", 
3  "deploy" : "gh-pages -d build", 
4  ...
5}

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

1{
2"homepage": "https://yourname.github.io/yourrepo",
3"name": "reactetc",
4"description": "some react stuff",
5"version": "1.0.0",
6"main": "src/index.js",
7"dependencies": {
8   "react": "^17.0.0",
9   "react-dom": "^17.0.0",
10   "react-scripts": "^4.0.1",
11},
12"scripts": {
13   "predeploy" : "npm run build",
14   "deploy" : "gh-pages -d build",
15   "start": "react-scripts start",
16   "build": "react-scripts build"
17},
18"browserslist": [
19   "defaults"
20],
21"author": "yourname",
22"license": "MIT"
23}

Deploying the app

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

1$ npm run deploy

Setting up the remote repository for GitHub pages

On GitHub, assuming we 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

Let's 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:

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