DEV Community

loading...
Cover image for Deploy your React app to GitHub Pages in 3 simple steps!

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

pranshujha profile image Pranshu Jha Originally published at voltycodes.hashnode.dev ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion

pic
Editor guide