How to Build and Deploy React App on GitHub Pages

How to Build and Deploy React App on GitHub Pages

GitHub Pages

·

1 min read

Play this article

Prerequisites

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