Table of contents
As someone on the internet rightly stated, Vercel is the Apple of developer tools.
In this article, you will learn how to use the Vercel command line interface (CLI) to deploy any frontend application right from your terminal instead of pushing your codebase to GitHub first and doing the setup on your Vercel dashboard. With this method, you minimize the use of your mouse, replacing it with typing in the command prompts to instruct, manage, and configure the program.
What is Vercel?
There are many web hosting services for frontend applications, but one of the most popular ones is Vercel. Vercel is the company behind the popular React framework, Next.js.
Vercel is a collaborative experience that lets you ship your ideas quickly to the web, used by frontend developers that provides the speed and performance to showcase your work when inspiration strikes, thereby providing a live URL you can share. Using Vercel for your needs, it integrates well with GitHub, GitLab, and BitBucket.
Installation
If this is your first time working with the command line, or the terminal, confirm that you have Node installed on your machine. Run this command:
node --version
The above command shows you the version number of Node. Node is a JavaScript runtime environment as installing it comes with the node package manager (NPM). It would be integral for installing packages or dependencies when working with frameworks like React, Next.js, or Vue, as well as backend technologies like Node.js.
For installation guides, check out the official Node documentation to install it on your respective operating system. The standard recommended version to choose is LTS.
Now confirm the presence of npm with this command:
npm --version
Still in your terminal, run the command below to install the Vercel CLI globally on your machine using the -g flag:
npm install -g vercel
Once again, you need to verify if Vercel is installed correctly with this command:
vercel --version
PS: More than 20+ available commands are used with the keyword vercel in the terminal. To learn more about using these commands, check out the Vercel documentation.
Deploying an app
For this section, use any available frontend application written in React, Next.js, Vue, and so on. All the magic happens from the terminal, so you don’t need to open vercel.com on your browser.
Prerequisites Have an account on Vercel. Sign-up is free.
Navigate to the directory of your project and login into your Vercel account with the command:
vercel login
This command allows you to log in to your account through Vercel CLI and provides different login methods to authenticate an account. Some of these options include:
GitHub OAuth
GitHub OAuth
GitLab OAuth
Bitbucket OAuth
Email confirmation
SAML Single Sign-On via your Team's identity provider
Next, to start the setup and deployment of your project, run the command within the project folder:
vercel
This command will provide you with a list of options for the project. Select the options appropriately, as seen below:
The shared screenshot is a live URL to the project; copy and paste the production link into your browser.
Following the above steps systematically, you should have access to your demo app on the browser.
Conclusion
Sharing your work is essential as a frontend developer instead of leaving them dormant in localhost. Vercel is a tool that helps take your idea to production without paying for hosting and getting a domain to host your side project. The Vercel CLI is all you need to make this work.
Try it today, as this process won’t take more than 5 minutes to set up.
View the demo app here.