How to Deploy Your React App to Vercel.

xeuxdev

Tochukwu John

Posted on March 14, 2023

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

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
xeuxdev
Tochukwu John

Posted on March 14, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About