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
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.
Top comments (3)
How about using this method for Deploying a project that has Environmental variables, Also, how do you go about CI/CD with this method?
I think when you run the command,
vercel, it would host your app with all its details in Vercel and you can append the environment variables to the secrets.I haven't tried it out fully but would check it out to know if it works as described.
The article is updated with the recent charges.