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.
- Making an account in Vercel
- Installing Vercel Globally and confirming our credentials
- Verifying Project
- Automatic Deployment Process
- 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.
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.
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 –
- Go to settings of your App in your Vercel dashboard
- Select Domains from the left navbar
- Write your custom domain in the box provided (as shown) and press add
- 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.
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.
I came across your website. It’s awesome, dude. I told someone about it. They bookmarked your site.
Great content I do agree with all the ideas you have presented in your post. You must continue your writing. Im confident, youve a huge readers base already!