How to Host a React App on GitHub for Free?

In this course you will learn step-by-step how to host your React.js App or Website on GitHub. In just 8 steps your Website will be Live to the world.

There is also a video that shows step by step how to host a React App or website. Watch here.

About us:

We teach computers, coding and programming from very basics to advanced. Visit our YouTube Channel Coding Aqyanoos.

how to host a react app or website on github for free

In just 8 Steps Host your React App or Website on Github:

  1. Install gh-pages library as Dev Dependency: npm install -D gh-pages .
  2. Add these two commands to the scripts in package.json: "predeploy": "npm run build", "deploy": "gh-pages -d build".
  3. Add this to the package.json:
    "repository": { "type": "git", "url": "https://.../repo-name.git" }
  4. If you have not a github repo yet then create a new repo, add the git repo url to your local git repo. If your local git repo already has a remote url then you have to remove it before adding the new remote url:
    git remote remove origin. then add the new remote git remote add origin newURL.
  5. If you are using BrowserRouter then add this to the package.json:
    "homepage": "github repo name". and add basename="github repo name" to the BrowserRouter element normally in App.js.
  6. Run npm run deploy.
  7. Give your github username and password or access token(if you did not allow the GitHub extension).
  8. Go to the github repo settings, then under the Pages you can configure the settings for your React App page. Normally when you run npm run deploy it configures the github page for you and all you have to do is to copy the link for the live page...

Congratulations

You have successfully hosted your first React website on GitHub.