Introduction

Deploying a React app on GitHub can be a great way to share your application with others and make it available online. In this article, we will walk through the steps required to create a React app with Vite and deploy it on GitHub.

React is a popular open-source front-end JavaScript library, used for building user interfaces for web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies.

Vite is a build tool and development server that is used to build modern web applications. It is designed to be fast, lightweight, and easy to use. Vite is developed by Evan You, the creator of Vue.js, and is heavily inspired by the development experience provided by Vue.js.

GitHub is a web-based platform that provides a wide range of collaborative tools for software development teams. It is a popular platform for hosting, sharing, and collaborating on code repositories.

Prerequisites

To follow along with this tutorial, you will need:

1- Node.js installed on your system Node >= 16.

2- A GitHub account.

When developing a React app, one important step is to deploy the project to a hosting service so that others can access it. GitHub is a popular platform for hosting and sharing code, and it also provides a simple way to deploy React projects using ‘gh-Pages’.‘gh-pages’ is a package for Node.js that allows you to easily deploy a static website to GitHub Pages.

With this being said, let’s begin the tutorial.

Create a GitHub repository

The first step is to create a GitHub repository for your project. If you already have a repository for your project, you can skip this step. To create a new repository, follow these steps:

1- Go to GitHub.com and log in to your account.

2- Click on the “+” icon in the top right corner and select “New repository”.

3- Give your repository a name, and add a brief description if desired. I will name it react-project.

4- Choose whether to make the repository public or private.

5- Click on the “Create repository” button.

6- After clicking on Create repository you will see this page.

Create a React app with Vite

If you have not yet created a React app, you can use Vite. With Vite, you can create a React app with less build time and the files in the folder are minimal with optimal output. To do this, you will need to have Node.js installed on your computer. Here are the steps:

1- Create a folder and name it whatever you want.

2- Open the folder with your preferred IDE, I will be using Visual Studio Code.

3- Make sure to open your terminal in that folder.

4- To install Vite, you need to run:

npm create vite@latest

5- After running npm create vite@latest, you will be asked to put a project name.

I will name it react-project.

6- You will be asked to select a framework. Since this project is a React project, you need to select React from the list.

7- You will also be asked to choose a variant. I will choose JavaScript.

8- Change your directory to the react-project by running:

cd <Your project name>

In my example, I will run:

cd react-project

9- To install all the dependencies React needs run:

npm install

10- Wait for the installation to finish.

Install the gh-pages package

After the dependencies are installed completely, you need to install ‘gh-Pages’ package.

1- To install ‘gh-pages’ run:

npm install --save-dev gh-pages

2- Wait for the installation to finish.

Update the package.json file

The ‘gh-pages’ package uses the homepage field in the package.json file to determine where to deploy your app. To update the package.json file, follow these steps:

1- Add a homepage field with the URL of your GitHub repository in the following format:

“homepage”: https://.github.io//

2- In the scripts tag add:

“predeploy”: “npm run build”,

“deploy”: “gh-pages -d dist”.

The “predeploy” and “deploy” scripts are used to automate the deployment process.

3- Save the changes.

Update the vite.config.js file

1- Add base: “//”, to vite.config.js, in my example it would be base: “/react-project/”

2- save the changes.

Push the React app to GitHub

With the ‘gh-Pages’ package installed and the package.json and the vite.config.js files updated

1- Initialize a Git repository by running the command:

git init

This will create a new Git repository in your project’s directory.

2- Add all the files in your project to the Git repository by running the command:

git add .

This will stage all the files in your project for committing.

3- Commit the changes by running the command:

git commit -m "Initial commit"

This will create a new commit in the Git repository with the message “Initial commit”.

4- Rename the master branch to main by running the command:

git branch -M main

5- Add the remote repository by running the command:

git remote add origin <repository URL>

This is the repository URL in the GitHub repository that you’ve created

This will add the GitHub repository as a remote for your local Git repository.

6- Finally, push the changes to the remote repository by running the command:

git push -u origin master

This will push the initial commit of your local Git repository to the GitHub repository.

Deploy your React app

With the React app pushed to Github, you can now deploy your React app.
1- Run the command:

npm run deploy

2- Wait for the deployment to finish.

Access your app

Once the deployment is complete, you can access your React app by going to the URL specified in the homepage field of your package.json file. Typically, the URL will be in the form of https://.github.io//.

Or you can find the URL by clicking on the repository setting.

Then click on pages.

Here is the URL.

Click on the URL, and here is your deployed React app.

Conclusion

Deploying a React app to GitHub Pages using the ‘gh-Pages’ package is a simple and convenient way to share your work with others. By following the steps outlined in this article, you can easily deploy your own React projects to GitHub Pages and share your work with the world.