How to Deploy Your React App to Vercel.
Tochukwu John
Posted on March 14, 2023
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.
- After doing that, You will be prompted to choose your Git provider or to continue with your Email as shown below.
- 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
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.
- 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.
- 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.
- 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
Posted on March 14, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.