Showcase your react skills to everyone!

How to Deploy React on GitHub Pages?

This article will help you to deploy your React apps on GitHub pages.

React x GitHub

Introduction:

In this article we are going to see how to deploy React applications on GitHub pages. It will guide you through the process from creating a react project to deploying it on GitHub.

GitHub pages provide hosting for static websites, and it will be very easy to host single page react application. As you all know React is a JavaScript library used to make frontend UI. We can showcase our react skills to everyone on internet using GitHub pages.

Note: This Blog assumes that you have basic knowledge of React and Git.

I tried to keep it simple so anyone can try out the process and host your own website. Hope you will find this artical useful.

Prerequisites:

Need to have Node and npm installed on your device. You can check this by typing npm -v and node -v.

If not use the following links to install requirements

1. Node.js
2. Git

Follow the steps:

Step 1: Create a react app

npx create-react-app <app_name>

For this article we will call the <app_name> as my-app. Note this name as we will need it while creating GitHub repository.

npx create-react-app my-app

This will create a react app. This also initialize a git repository. If not, then you can do it with git init

File structure for react project.

Open my-app directory which we created just now and use terminal in this directory for further process. You will see the above file structure after successfully creating the react app. Now you can test the app by writing following command in terminal.

npm start

This will start a node local server at http://localhost:3000. Open this link in the browser and you will be able to see the react screen.

React Screen on http://localhost:3000

Congratulations we just made a basic working react project.

Now it's time to deploy on GitHub Pages.

Step 2: Install gh-pages

Install gh-pages using npm.

npm install --save gh-pages

This will install required packages to deploy our react app.

Step 3: Edit package.json

Add homepage to package.json

This is an important step. Please don’t skip this!!!

Firstly, add homepage field in package.json

  "homepage": "https://myusername.github.io/my-app",

This determines the root URL. In my case it will be

"homepage": "https://swarajgosavi.github.io/my-app",

Use your GitHub username in place of myusername.

Add deploy in scripts to package.json

Now we will modify the scripts section inside the package.json by adding predeploy and deploy fields.

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

This will run the predeploy script everytime before the deploy

Step 4: Create a new repository on GitHub

Now we will head to GitHub and create a new repository with the same name as my-app

Create a repo with same name as my-app and keep it public.

Set the repository as public this will allow us to use GitHub pages.

Let's link our local folder with GitHub by running the following commands in the terminal. Replace myusername with your GitHub username.

git commit -m "initial commit"
git remote add origin https://github.com/<myusername>/my-app.git
git branch -M main
git push -u origin main

Now we are set to deploy our first react application.

Step 5: Deploy site

Finally run the npm run deploy code in the terminal to deploy the react application.

npm run deploy

Step 6: Steup GitHub pages

Make sure you select gh-pages branch in settings > pages

Set gh-pages branch as root

Successful deploy message

Now let's visit our site at (change myusername with your github username)

https://myusername.github.io/my-app

Here in my case, it will be

https://swarajgosavi.github.io/my-app

You can visit it right now by going to the site. Just click on the below link.

React App (swarajgosavi.github.io)

Congratulations you successfully deployed a React app on GitHub Pages!!!

Conclusion:

GitHub pages allows developers to host static web sites for free. In this article we learned how to deploy a React app on GitHub pages in a simple way.

References:

1. Official React Documentation
2. How to Deploy a Routed React App to GitHub Pages (freecodecamp.org)
3. Deploying React apps to GitHub Pages — LogRocket Blog

Thank You!

Up Next

How to deploy React app with client-side routing on GitHub Pages?

How to deploy React app with client-side routing on GitHub Pages?

Stay tuned…