How to host a React App using Vercel Dashboard

There are many ways by which we can host our React App some of which include GitHub Pages, Netlify, etc one such way is by using Vercel.

Vercel is the creator of a React framework called Next.js, but it also hosts Apps made using different programming languages including React, Angular, polymer, etc.

There are two ways of hosting your App through Vercel

• Using Dashboard
• Using CLI

This blog will only tell you how to host your App. Through the Vercel dashboard.

Let’s begin…

Index

1. Creating a Vercel Account and connecting it to GitHub
2. Adding Repository(s) from GitHub to Vercel dashboard.
3. Deploying our App
4. Hosting updated repository
5. Bonus Section

Step I – Creating an Account

As always, we first have to create our account on Vercel, and we can do this by using our GitHub/ GitLab or BitBucket account, as shown in the image.

Next, we will be authorizing our GitHub/GitLab/BitBucket account with Vercel.

Step II – Adding Repositories from GitHub to Vercel dashboard.

After this, the Vercel dashboard appears, where on the left-hand side, we can see a search bar, while on the other side, there are some pre-defined templates that Vercel provides us to start our journey.

We want to host our App from the GitHub Repo, so we will click on the search bar and choose the Add GitHub Org or Account to give specific authorization of our Repositories also.

After selecting the add option, we will be redirected to a page where we have to choose whether we want Vercel to read all our repositories or just the one we want to host at the moment.

-> We can change this setting any time through the Vercel dashboard.

Step III – Deploying our App

Now, we have our repository(s) in our Vercel dashboard. Click the import button write beside the repository to start the development phase.

We will be redirected to a tab (see above image). Just press the deploy button without changing or filling any entry (it has been filled by default).

After hitting the deploy button, our hosting process will start and we have to wait for some time for its compilation. 

The site will be hosted on the link given to us by Vercel or by clicking the Visit button as shown in the image.

Step IV – Hosting the updated App

Suppose you have hosted your App on Vercel but found some errors that you have missed before hosting it, or some of your clients are having issues with it, etc, there can be many reasons for updating your App after its deployment.

This process will automatically be initiated by the Vercel dashboard and you can check that by going to your project dashboard.

Just like Step III, it will take some time, but afterward, your app with the changes you have made will be hosted on the same link.

Bonus Section

Section I – Importing a new repository

You have hosted your first repository successfully, but how to host the other one.

For this step, you will click on the link Adjust GitHub App Permissions, and the page containing Vercel settings on GitHub will open where we will make changes by selecting all repositories in place of a single repository.

Section II – List of programming languages it can host

As already told at the beginning, it can host Apps made using several languages, and below is the list of all of them. 

Section III – Hosting App with a Custom Domain

Vercel provides us with a platform to host our Apps for free with a free SSL certificate as we have done so far, but it also gives us an option to host that app with our custom domain. Here is how to achieve it.

We need a custom domain that we can easily buy for a domain provider like Godaddy, Hostinger, and BlueHost. 

Follow these steps to add a custom domain for your App – 

1. Go to settings of your App in your Vercel dashboard
2. Select Domains from the left navbar
3. Write your custom domain in the box provided (as shown) and press add
4. Wait for some time, and your App is deployed with a custom domain