How to Deploy Your React App to Vercel.
Tags: javascript, webdev, react, beginners
Published: 2023-03-14 15:02:40


![Deploying React app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0jr2ojjft09omz1v6a8.png)
So you have built your project, whatever it may be, using React, and feeling confident, you decide to deploy it and show it to the world😊. But you have no idea how to do that?🤔.
In this article, you will learn just that.
There are numerous options available for hosting your React app, including but not limited to:

> [Vercel](https://vercel.com/)
> [Netlify](https://www.netlify.com/)
> [GitHub Pages](https://pages.github.com/)
> [Render](https://render.com/) and so on.

In this article, we'll focus solely on **Vercel**, based on my personal experience, it's the best and most user-friendly option.
So, let's dive into it!😊

To deploy your React App to Vercel, simply follow these steps:

* Head over to Vercel's sign up page [Here](https://vercel.com/signup). Once you arrive, you will see a page similar to the one below

- As a beginner, simply click on 'Hobby', enter your name or preferred alias, and click on 'Continue' as demonstrated below.

![Sign Up Page Prompts and how to proceed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzk09ikohlpw07cci557.png)
 
* After doing that, You will be prompted to choose your **Git** provider or to continue with your Email as shown below.

![Connecting your Vercel Account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fys1g4achic1idgd8fz2.png)

- Go ahead and click on 'Connect to GitHub', 'GitLab', or 'Bitbucket'. Since we'll be using GitHub, proceed to click on '**Continue with GitHub**'. You should then see a pop-up similar to this

![Connect to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi765291bkytcqgvtef3.png)
- If you already have a GitHub account, proceed to sign in. If not, go ahead and create an account.

* After signing in, you will be redirected to your Vercel Dashboard, which will look something like this. However, since you are a new user, your dashboard will be empty.

![Add a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phe8mmz3wwt9e10d70ob.png)

* To get started, click on the **Add New** button, which will display a dropdown menu. From there, select **Project**. This will take you to a new page where you can view all the projects in your GitHub repository, as shown below. 

![Add a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odlqt5c5ovzi41q9zmvt.png)

* After clicking on 'Import', you will be taken to a new page where you can configure your deployment settings. However, Vercel is so awesome that it automatically configures everything for you, including your framework, so you don't have to worry about it.
Just go ahead and click on deploy as shown below.

![Configure project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyew3mmf7x61ewzfvcbt.png)

* Clicking on 'Deploy' will initiate the deployment process automatically. Please wait for it to complete. Once it's done, you'll be redirected to a page that displays a congratulatory message, along with a preview of how your page looks. Click on the preview, and you'll be taken to your project's Live site.

Congratulations 🚀🚀🎊🎉🎉, you have successfully deployed your project to Vercel. It's time to show off your hard work to the world! 😋🚀 

Like what you just read? Follow me on [Twitter](https://twitter.com/Headbwoi_1)