Create a React app with Vite and deploy it on GitHub
Tags: javascript, react, vite, github
Published: 2023-03-26 13:13:39

## 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](https://nodejs.org/en) installed on your system Node >= 16.

2- A [GitHub](https://github.com/) 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.

![GitHub log in page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsuhumcp086thk6w92bk.png)

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

![GitHub repository options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rks9y8tswxqcpwuflca.png)

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

![Create new repository page, add the repository name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0elr74hg1we6fetd2em.png)

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

![Create new repository page, choose public or private](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oka6id0qjyknollmutb8.png)

5- Click on the “Create repository” button.

![Create new repository page, click create repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq3obaphnpq0ik54rbvy.png)

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

![The page after creating new repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czbd9u8dvt68mo9bz5ur.png)

## 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.

![Create a folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz1ufirlvm8xl6wez878.png)

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

![Open folder with visual studio code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aotpsu37ub5xd6gsy4wn.png)

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

![Open terminal in visual studio code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1b02ahkuc6uoi2hrak4.png)

4- To install Vite, you need to run:

```
npm create vite@latest
```

![In the terminal, run npm create vite@latest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9beyejoih35srfvoxpl.png)

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

![In the terminal, write the project name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuop3zantf2i3ynyhgfb.png)

I will name it react-project.

![In the terminal, the project is named react-project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy8fwterasrovkl8qyrz.png)

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

![In the terminal, select React from the list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jllayz60gla7rtnk61x1.png)

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

![In the terminal, choose a variant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3d3m3nyb6u0v8eoahuwc.png)

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

```
cd <Your project name>
```

![In the terminal, run cd <your project name>](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hkjn517wykxqh811mbz.png)

In my example, I will run:

```
cd react-project
```
9- To install all the dependencies React needs run:

```
npm install
```

![In the terminal, run npm install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6a1gkwdw3xqsm1jlfwb.png)

10- Wait for the installation to finish.

![In the terminal, wait for the installation to finish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlcjzmknl7gspbn0a7jx.png)


## 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
```

![In the terminal, run npm install — save-dev gh-pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f31jc0k1vu5wlnpw1n6t.png)

2- Wait for the installation to finish.

![In the terminal, wait for the installation to finish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr9ah19ua501x0wmpf60.png)

## 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://<your-github-username>.github.io/<your-repository-name>/

![Update the package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6u6dkmjg445ysh4y1bl.png)

2- In the scripts tag add:

“predeploy”: “npm run build”,

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

![Update the package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssxtw2kkdrrrog9jdrud.png)

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: “/<repo>/”, to vite.config.js, in my example it would be base: “/react-project/”

![Update vite.config.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qaeg9rrcpx5ezjoelhs.png)

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
```

![In the terminal, Initialize a Git repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5664zp493odo9tfftfd9.png)

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 .
```

![In the terminal, Add all the files in your project to the Git repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3k8z97kpi8s99bbx8rr.png)

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

3- Commit the changes by running the command:

```
git commit -m "Initial commit"
```

![In the terminal, Commit the changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ugzhelii608m07bkuyt.png)

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
```

![In the terminal, Rename the master branch to main](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttuzt2ramjwqpckvwm1t.png)

5- Add the remote repository by running the command:

```
git remote add origin <repository URL>
```

![The GitHub repository page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys1gw5q4qyurdup1exhv.png)

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

![In the terminal, add the remote repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em5b3suyhi4qf6n8dna6.png)

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
```

![In the terminal, push the changes to the remote repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k66pxr8iw741f9u042bz.png)

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
```

![In the terminal, deploy the React app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayqfdr1dlebvjla4qf50.png)

2- Wait for the deployment to finish.

![In the terminal, the deployment is finished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqv0kypv1eb1lqevfz1s.png)

## 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://<your-github-username>.github.io/<your-repository-name>/.

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

![The GitHub repository setting page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gfaifdpgap4aoi6l5e4.png)

Then click on pages.


![In the GitHub repository page click on pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf3iiny4an2ej37ec8tk.png)


Here is the URL.

![The GitHub repository setting pages page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edq9hd7or9eu83d86vhg.png)

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

![The project page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fo347w624kufje21vgi4.png)

## 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.