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!

Software engineer, dreamer, another cat lover. Just share what I’ve learned.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript: Introduction and Basics of JavaScript | Part 1

JavaScript Basics

React: Implement differential loading to load polyfills only in the legacy/old browser

Some Honey From Javascript

How To Set Up Firebase Push Notifications in a React Native App

Bell

Create a Seed File for Cloud Firestore in Node.js

Js Interview Preparation

Everything Redux — Part 1

ORM: to the rescue

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abby Low

Abby Low

Software engineer, dreamer, another cat lover. Just share what I’ve learned.

More from Medium

How to create a Create React App Template

Deploy React App to GitHub Pages

Publish A ReactJS App for Free

A React component showing written ReactJs code

How to Work with Tables in React