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

package.json.png

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
```

package.jsonn.png

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...