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 create a preview of your product with a unique URL, manage, configure, and deploy any frontend application right from your terminal instead of pushing your codebase to GitHub first and doing the setup 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. Frontend developers use Vercel for deployment to production, and it successfully provides the speed and performance to showcase your work when inspiration strikes, thereby providing a live URL you can share.

For a successful deployment of your source code, using Vercel for your needs integrates well with platforms like 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; installing it requires 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, verify if Vercel is installed correctly with this Vercel command:

vercel --version

Adding environment variables via the CLI

With the CLI, all you need to do is run this command, and you do not need to interact with your Vercel UI dashboard before adding your secret variables:

   vercel env add OPENAI_API_KEY

• Paste your OpenAI API key as the value for the OPENAI_API_KEY when prompted
• Follow the other instructions by selecting the appropriate options

Deploying an app

Use any available frontend application written in React, Next.js, or Vue for this section; 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 your project directory and login into your Vercel account with the command:

vercel login

This vercel command allows you to log in to your account in the terminal and provides different login methods to authenticate your account. Some of these options include:

   ? Log in to Vercel (Use arrow keys)
   ❯ Continue with GitHub
   Continue with GitLab
   Continue with Bitbucket
   Continue with Email
   Continue with SAML Single Sign-On
 ─────────────────────────────────
   Cancel

Next, to start the setup and the efficient deployment process of your project, run the command within the frontend project directory:

vercel

Again, this vercel command will provide you with a list of options for the project. Select the options appropriately, as seen below:

   Send yes to continue
   Connect your Vercel account to the CLI
   Choose the scope of the project (personal or organization)
   Choose N for linking the repository to an existing project
   Pick any project name you like
   Input the path to the source of your project (should be `./`)
   Vercel CLI should detect the framework and set up the 
   correct settings
   Choose N for modifying the project's settings

The preview deployment URL is shown in the terminal. Click the link or paste the production URL into your browser.

Vercel CLI 37.1.2
🔍  Inspect: https://vercel.com/teri-eyenikes-projects/client-with-openai/ATZJWV8hPYUcwDr8SiYhhTdkkMgm [2s]
✅  Production: https://chatapp-sooty-seven.vercel.app/ [2s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/teri-eyenikes-projects/client-with-openai/settings

Use the --prod option flag to deploy the project to production for public usage.

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 it dormant in localhost or the GitHub repository. 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 in the deployment lifecycle of your project.

Try it today; this process won’t take more than 5 minutes to set up.

View the demo app here.

Learn more

• Deployment Protection on Vercel
• Available Vercel command

Working with existing project

It is highly likely that after pushing your codebase to GitHub, you would likely want to work on it later in the future. In this scenario, you want to link your cloned local project to get the environment variables from the settings and add them to the .env file in the root of your project folder.

When cloning a project from GitHub, your secret keys will not be available in the cloned project folder.

First, run this command:

   vercel link

Select the following options:

   Choose yes to continue

   Select the scope of the project (personal or organization)

   Select the project to link

   The CLI should detect the project just created in the previous 
   steps

Pull the environment variables

To activate the retrieval of the environment variables from Vercel, run this command to pull the values:

   vercel env pull

After the action is complete, a new .env file will be created in the root project directory.

Start the development server

On http://localhost:3000, the web application is shown in the browser depending on the project frontend framework or library:

   npm run dev

Check the live URL of the Track Trips app.