DEV Community

Tochukwu John
Tochukwu John

Posted on

How to Deploy Your React App to Vercel.

Deploying React app
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
Netlify
GitHub Pages
Render 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. 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

Top comments (2)

Collapse
 
manikantasriram profile image
Manikanta Sriram

Thanks for sharing. I used Netlify to deploy my project and now I want to try vercel after reading this article.

Collapse
 
xeuxdev profile image
Tochukwu John

Thanks ❣️
I promise you you'll love vercel πŸ‘Œ