How to Host React App for free using Vercel CLI

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 Vercel CLI.

Let’s begin…

Index

1.  Making an account in Vercel
2. Installing Vercel Globally and confirming our credentials
3.  Verifying Project
4.  Automatic Deployment Process
5.  Bonus Section

Unlike the Vercel dashboard where we have to do all the work, in this, we need to run only one command to initialize the deployment process that is again automatic.

Step I – Making a Vercel 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 – Installing Vercel Globally and confirming our Credentials

To install Vercel globally, we need to run a command in the CLI – 

npm i -g vercel

or

yarn global add vercel

After the installation is complete, type the “vercel” command that will initialize the project setup.

vercel

Before that, you will be asked to log in to your account.

There are two ways, either use your email address or log in through your GitHub account.

Step III – Verifying the Project Details

Now that you have your Vercel account and Vercel globally installed in your system, we can start the deployment process

Before that, you have to answer some questions related to the project that you in yes or no, but for that, you have to understand them. So here are the questions with their explanations.

Set up and deploy “path to your project”? [Y/n] y

This command not only verifies that you want to deploy the project but will also find the working directory of the project and will set up a Vercel Project. 

Enter “y” as an answer.

Which scope do you want to deploy to? Your Vercel Account

This command verifies that you want to host the project through your account. Just hit enter and select the default answer to continue.

Link to an existing project? [y/N] n

It’s asking if we want to link it to any existing App or not. 

Enter “n” and press enter.

What’s your project’s name? project-name
In which directory is your code located? ./

The first is self-explanatory as it wants to confirm the name of the project that is the one that you have made with create-react-app

The second command wants to confirm the path that we have already given in the above steps.

Press enter for both of them.

Step IV – Automatic Deployment Process

We have verified all our details for our project with the Vercel CLI, and now it will auto-detect the rest of the things themselves and start the deployment process.

After it has completed the task of auto-detecting our app’s remaining details like how it has been initialized, does it have any build command, etc, it will show us the following message and a command – 

Auto-detected Project Settings (Create React App):
- Build Command: </em><em>`npm run build`</em><em> or `</em><em>react-scripts build`
- Output Directory: build
- Development Command: react-scripts start

Do? Want to override the settings? [y<em>/N] 

We have already verified our project details, and it has too. There is no need to override them.

Just type “n” and press enter 

After this, the deployment will start itself, and after some time (1min – 2min) your app will be deployed.

Bonus Section

Section I – 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

Section II – 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.

Just run the “vercel” command in the CLI after making the changes, and again it will take some time in the deployment process, but afterward, your App with the changes you have made will be hosted on the same link.

Conclusion

Vercel provides two ways by which we can host our Apps – not only React but of any other language with it. The first one is using the Vercel dashboard while the other is using CLI. Both of them are simpler it just depends upon which you feel is simpler.

Vercel not only hosts our App but also provides us with a custom domain name and a free SSL certificate for our Apps in both cases and because of which you can even host your websites with it or if you want, you can host some Apps for your portfolio or resume.