# Building and Deploying a Lightning-Fast React App with Vite (Latest Version) and GitHub + Vercel Integration.

**Introduction**

In the ever-evolving landscape of frontend development, the need for speed and efficiency is paramount. With Vite, the lightning-fast frontend build tool, and the seamless integration between GitHub and Vercel, deploying React applications has never been more straightforward. In this guide, we will explore how to create a React app using the latest version of Vite and deploy it on GitHub with Vercel, ensuring a smooth and efficient development process.

**Prerequisites**

Before we dive in, make sure you have the following prerequisites installed and set up:

1. **Node.js:** Ensure you have Node.js installed on your system. You can download and install it from [nodejs.org](http://nodejs.org).
    
2. **Git:** Install Git from [git-scm.com](http://git-scm.com).
    
3. **GitHub Account:** If you don’t have a GitHub account, you can sign up for free at [github.com](http://github.com).
    
4. **Vercel Account:** Create a Vercel account at [vercel.com](http://vercel.com).
    

**Step 1: Installing Vite**

First, let’s install the latest version of Vite globally on your system using npm. Open your terminal or command prompt and run the following command:

```plaintext
npm install -g create-vite@latest
```

**Step 2: Creating a New Vite Project**

Create a new React project using Vite by running the following command in your terminal:

```plaintext
create-vite my-react-app --template react
```

This command sets up a new React project in a folder named `my-react-app`.

**Step 3: Navigating to Your Project Directory**

Move into your project directory using the `cd` command:

```plaintext
cd my-react-app
```

**Step 4: Developing Your React App**

Start your development server by running:

```plaintext
npm run dev
```

This command launches a development server, allowing you to preview your React app locally.

**Step 5: Setting Up GitHub Repository**

Initialize a new Git repository in your project folder:

```plaintext
git init
```

Create a new repository on GitHub. Follow the instructions provided on GitHub to add your existing repository to your project folder.

**Step 6: Deploying on Vercel**

1. Install the Vercel CLI globally if you haven’t already:
    

```plaintext
npm install -g vercel
```

1. Deploy your React app on Vercel by running the following command:
    

```plaintext
vercel
```

Follow the prompts, and Vercel will guide you through the deployment process. Once deployed, Vercel will provide you with a unique URL for your React app.

**URL for my React App**

[https://vite-project-psi-seven.vercel.app/](https://vite-project-psi-seven.vercel.app/)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697250589930/c500d8fb-4b30-4e8d-bdc4-cecfcbd4920c.png align="center")

**Conclusion**

In this guide, we explored the process of creating a lightning-fast React app using the latest version of Vite and seamlessly deploying it on GitHub with Vercel. The combination of Vite’s speed and GitHub + Vercel integration provides developers with an efficient workflow, allowing them to focus on building exceptional user experiences.