Deploy your React app to GitHub Pages in 3 simple steps!

Done making your React app and want to deploy it for the world to see?

Learn how to deploy your app to GitHub instantly in just 3 simple steps!

Step 1: Installing gh-pages

gh-pages is the npm library that will let us deploy our app to GitHub pages.

Install it using the following command

$ npm install gh-pages

Step 2: Making changes to package.json

We will need to add a homepage field in the format https://{github_username}.github.io/{repository_name}

and under scripts we'll add scripts for deploy and predeploy as follows:

"predeploy": "yarn run build"
"deploy": "gh-pages -d build"

The package.json should look something like this after this step:

{
  "name": "portfolio",
  "version": "1.0.0",
  "private": true,
  "homepage": "https://volt9801.github.io/portfolio/",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "gh-pages": "^2.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"},
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step 3: 🚀 Deploy your app!

Now, you just need to run $ npm run deploy to deploy our chat app to GitHub pages. You can now view your app at https://{github_username}.github.io/{repository_name}

---

If you made it so far, kudos to you! Feel free to leave down your thoughts below in the comments. Happy Hacking!