How to deploy React apps to GitHub pages?

We might build amazing React applications. It’s not worth it unless it’s available on the internet for others to see and use. To make our app accessible to others, we need to deploy it. There are various ways to deploy our app. You can buy a domain also. We will see how to deploy React apps to GitHub pages. It is free and easy to use.

Deploy React apps to GitHub pages

First, you need to create a GitHub account. You should have node and npm installed on your machine. We will deploy our Todo React app. You can go through my previous post for understanding the code. We will go to our GitHub account and create a new repository. Its name should be the same as our React app.

We will deploy the site we built in one of the previous tutorials. You can have a look at the project here.

How to display lists in React Js

The Github repository should look like this:

Now, we will go to our app and install GitHub pages like this.

cd appName    //Write your React Project name.
npm install gh-pages --save-dev;

 

Now, we will add properties to the package.json file.

"homepage": "http://{username}.github.io/{repo-name}";

Instead of username, write your own username, and instead of repo-name, write your repository name. Second, we will add predeploy and deploy in the existing scripts property.

"predeploy": "npm run build";
"deploy": "gh-pages -d build";

It would look like this:

react json

Next, we will initialize git and add this repository as a remote to our project. Then we will push it as origin master.

git init
git remote add origin {url-of-repository}
git push -u origin master

Deploying it to GitHub pages:

npm run deploy

The site is published at https://muskan0908.github.io/todos/.

Conclusion:

This is how to deploy our React app. Our app is hosted for free on GitHub. Just remember to make your repository public. Keep learning.

Leave a Reply

Your email address will not be published. Required fields are marked *