So, today we'll see how to host our react-app in GitHub pages for free.

Pre-requisites

• GitHub account
• Project created in react js
• Node installed
• Code Editor [VS Code preferred]

Steps

1. First of all, install node in your system.

2. Navigate to your project root directory & open that in VS Code. First check whether node is installed in your system or not. Open New Terminal & put the command npm --version.

1. Install the gh-pages npm package using following command - npm install gh-pages --save-dev

1. Now, login to your GitHub account & create a new repo with any name. I'm using demo-react-host for mine.

1. Navigate to VS Code now & open package.json file to edit the homepage property. The homepage's value should be in the format https://{username}.github.io/{repo-name}

1. Add deployement scripts to the same file.

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

1. Add the remote to local git repo by putting following command

git remote add origin https://github.com/{username}/{repo-name}.git

1. Upload all the files to GitHub repo.

1. Deploy the site to GitHub repo using the command npm run deploy

1. Now, navigate to the link given in the "homepage" property of package.json. You must see the homepage you've created.

In case you're getting error while doing remote origin follow below:

1. Just put following command

git remote rename origin upstream

; You can change name of upstream to any name[upstream1, upstream2 etc].

1. Then add new remote origin by putting following command

git remote add origin https://username.github.io/repo_name

1. Then, put the following command to push all commits

git push -u origin --all

1. Now, deploy the site using following command

npm run deploy

It should result in status as 'Published' at the end.

1. Now, navigate to the link given in the "homepage" property of package.json. You must see the homepage you've created.

I've tried to explain how to host your react app in GitHub pages for free in the simplest manner possible. However, if you're facing any difficulty, do mention it in the comment. Will try to help.

You can follow me on LinkedIn, Instagram or check my latest projects on my GitHub. Also, you can check my portfolio too.

[Keep Coding] [Thanks]