How to Build and Deploy React App on GitHub Pages

Prerequisites

• Git installed.

• GitHub Account created.

• Node and npm installed.

Steps

1. Create an empty GitHub repository with visibility as public.

2. Create a simple React app through npm.

    npx create-react-app simple-react-app
    cd simple-react-app
   

3. Install GitHub pages.

    npm install gh-pages --save-dev
   

4. Edit Package.json and add the homepage URL.

    {
      "name": "my-app",
      "version": "0.1.0",
    +  "homepage": "https://gitname.github.io/simple-react-app",
      "private": true,
   

5. Add deployment scripts as well to package.json.

    "scripts": {
    +   "predeploy": "npm run build",
    +   "deploy": "gh-pages -d build",
        "start": "react-scripts start",
        "build": "react-scripts build",
   

6. Set Github remote origin URL.

    git remote add origin https://github.com/gitname/simple-react-app.git
   

7. Deploy or push the react app to GitHub Pages.

    npm run deploy -- -m "Deploy the React app to GitHub Pages"
   

8. Save the source code of the react app in master branch and the react app code in gh-pages .

    git add .
    git commit -m "Configure React app for deployment to GitHub Pages"
    git push origin master
   

9. Now you can test the app deployed by clicking on the below URL.

   Page - https://reevchris100.github.io/simple-react-app/

   Repository - https://github.com/reevchris100/simple-react-app/tree/master