How to deploy React App to Github Pages

You can build your React app and deploy it directly to GitHub pages by following these simple steps:

Requirements:

• A Github account
• Install Git locally (in you machine)
• Install Node.js
• Install NPM

N/B: You will need to have Node 8.10.0 or later installed in your local machine.

Steps:

• Create react app

  create-react-app
  npm init react-app my-app
  

• Install Github Pages package as a dependency

  cd my-app
  npm install gh-pages --save-dev
  

• Add properties to package.json: The first property to be added is the homepage which will be defined as a string with the value of "https://{username}.github.io/{repo-name}" where {username} is your Github Username, and {repo-name} is the name of the Github repository you created.

It should look this way:- "homepage": "https://kalsonsaint.github.io/test-app"

The next modification to the package.json file will by adding predeploy and deploy to the existing scripts property.

"scripts": {
    // ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
},

The package.json should look this way after all changes have been made

• Create a Github repository with your app name and initialize it and add it as remote in your local git repository.

  git init
  git remote add origin kalsonsaint/my-app.git
  

• Now, deploy to Github Pages

  npm run deploy
  

this will create a branch named gh-pages and this branch host your app, and homepage property you created in package.json file will hold your link for a live preview, or you can open the branch setting scroll down to GitHub Pages section you will find this:

Your site has been published at https://kalsonsaint.github.io/my-app/

• Commit and Push your commit to Github.

  git add .
  git commit -m "Your commit message"
  git push origin master
  

Hope this helped someone?

Happy Coding...