Host React app with GitHub Page for free

We all would love to make the app accessible to the world! But what if I don’t want to pay for hosting my web app?

Thanks to the generous development community, there are lots of free hosting service providers. One of my favourites is GitHub Page!

Before we start…

Please ensure that you have your app source code pushed to GitHub and the repository visibility is public. (Well, if you are a GitHub Pro user, you may keep the visibility private.)

We will use React app as the example in this article. You are free to use any other libraries as long as it is a static app.

Creating a React app is not the scope of this article, if you are interested to learn more, you can refer to create-react-app guideline.

Step 1: Install the gh-pages package into your project

npm install gh-pages --save-dev

Step 2: Add homepage property to the package.json file

"homepage": "https://<username>.github.io/<repository>"

For example, my GitHub username is abbylow and my repository name is lottery-frontend then my homepage property will be https://abbylow.github.io/lottery-frontend

Step 3: Add predeploy and deploy script to the package.json file

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

FINAL STEP: Deploy it!

npm run deploy

That’s all! You can enter the URL that you set earlier as the homepage property and see your web app now!

This is my web app hosted on https://abbylow.github.io/lottery-frontend/

Congratulations!

The changes in GitHub repository

You should be able to see a new branch named gh-pages created in your GitHub repository now.

Go to Settings then clicks Pages , you may see that the site is published to the URL that we set in the package.json as homepage property.

If you don’t see the published notification, please check Source section and select gh-pages branch as the source branch and save it.

It might take few mins to deploy your website. Please be patient.

Something to take note

GitHub Pages is a static site hosting service. This means if your app is written in NextJs, you have to export the application as static website before hosting it using GitHub Page.

Thanks for reading!