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-appnpm init react-app my-app

• Install Github Pages package as a dependency

cd my-appnpm install gh-pages --save-dev

• Add properties to package.json: The first property to be added is thehomepagewhich 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 initgit 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...