DEV Community

Tochukwu John
Tochukwu John

Posted on

16

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

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

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 πŸ‘Œ

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started β†’

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay