L1: Install Vercel CLI

Let's set up the tools you need to deploy your React application! 🛠️

Why Vercel CLI?

The Vercel CLI is your deployment tool:

Without CLI:
  Manual uploads
  Error-prone process
  No automation
  Time-consuming

With CLI:
  One command deployment
  Automatic optimization
  Easy rollbacks
  Fast updates

What the CLI does:

vercel
  ↓
Authenticates your account
  ↓
Analyzes your project
  ↓
Builds optimized bundle
  ↓
Uploads to Vercel servers
  ↓
Returns live URL

Create Vercel Account

Before installing the CLI, you need a Vercel account.

Visit Vercel:

Go to vercel.com

Sign up (recommended methods):

Option 1: GitHub (Recommended)

Click "Sign Up"
Choose "Continue with GitHub"
Authorize Vercel
✅ Enables automatic deployments from Git

Option 2: GitLab

Similar to GitHub
Great if you use GitLab

Option 3: Bitbucket

For Bitbucket users

Option 4: Email

Simple email registration
Manual deployment only

Choose Hobby plan:

When prompted, select the Hobby plan (it's free!)

What you get:

Unlimited deployments
Automatic HTTPS
100 GB bandwidth/month
Serverless functions
Edge network
Analytics

Perfect for personal projects and learning! 🎉

Verify account:

Check your email and verify your account if required.

Install Vercel CLI

Now install the Vercel command-line tool.

Terminal

npm install -g vercel

What this does:

-g flag installs globally (available everywhere)
vercel package is the official CLI
Installation takes ~30 seconds

Terminal

yarn global add vercel

Note: Make sure your Yarn global bin is in your PATH.

Terminal

pnpm add -g vercel

Note: pnpm global installs may require PATH configuration.

Installation output:

npm install -g vercel

added 150 packages in 12s

✔ Installed vercel@latest

Verify Installation

Check that Vercel CLI is installed correctly:

Terminal

vercel --version

Expected output:

Vercel CLI 33.0.1

Success! If you see a version number, the CLI is installed correctly.

Error: "command not found"?

Try these solutions:

Close and reopen your terminal
Check if npm global bin is in PATH:
```
npm config get prefix
```
Add [prefix]/bin to your PATH
Try installing with sudo (macOS/Linux):
```
sudo npm install -g vercel
```
On Windows, run terminal as Administrator

Authenticate with Vercel

Link your local CLI to your Vercel account:

Terminal

vercel login

What happens:

Choose authentication method:

Vercel CLI 33.0.1
? Log in to Vercel:
  > Continue with GitHub
    Continue with GitLab  
    Continue with Bitbucket
    Continue with Email

Choose the same method you used to create your account.

Browser opens:

Your default browser will open with a verification page.

Authorize CLI:

Click "Authorize" or "Confirm" in the browser.

Success message:

> Success! GitHub authentication complete for user@example.com
Congratulations! You are now logged in. In order to deploy something, run `vercel`.

Understanding Vercel CLI Commands

Here are the most common commands you'll use:

Prepare Your Project

Before deploying, let's make sure your project is ready.

Navigate to project directory:

Terminal

cd /path/to/your/react-project

Make sure you're in the root directory (where package.json is).

Verify project builds:

Test that your project builds successfully:

Terminal

npm run build

Expected output:

vite v5.0.0 building for production...
✓ 1234 modules transformed.
dist/index.html                   0.45 kB
dist/assets/index-abc123.css     45.21 kB
dist/assets/index-xyz789.js     380.54 kB

✓ built in 5.23s

Build successful! Your project is ready to deploy.

Build errors? Fix them before deploying:

Check for syntax errors
Fix missing imports
Resolve TypeScript errors
Update dependencies if needed
Run npm install to ensure all packages are installed

Check package.json scripts:

Ensure your package.json has correct build scripts:

package.json

{
  "name": "booking-app",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Vercel looks for:

build script (required)
dev script (optional)

Create .gitignore (if needed):

Ensure you're not committing unnecessary files:

.gitignore

node_modules
dist
.env
.env.local
.DS_Store

Why it matters:

node_modules: 100,000+ files, not needed
dist: Build output, generated by Vercel
.env: Contains secrets, security risk
.DS_Store: macOS metadata

Common Setup Issues

What's Next?

Setup complete! You now have:

✅ Vercel account created

✅ Vercel CLI installed and authenticated

✅ Project verified and ready to deploy

✅ Understanding of CLI commands

In the next lesson, you'll deploy your application to production with a single command! 🚀

Key Takeaways

✅ Vercel CLI is the official deployment tool
✅ Global installation makes CLI available everywhere
✅ Authentication links CLI to your account
✅ Project preparation ensures successful deployment
✅ Build verification catches errors early
✅ Free tier is generous for learning and personal projects
✅ One command (vercel) deploys your entire application
✅ PATH issues are common but easy to fix

Ready to deploy? Let's go! →

L1: Install Vercel CLI

vercel - Deploy Current Project

vercel --prod - Deploy to Production

vercel login - Authenticate Account

vercel logout - Remove Credentials

vercel ls - List Projects

vercel env - Manage Environment Variables

vercel inspect - View Deployment Details

vercel help - Get Help

npm install -g fails

vercel command not found

Login browser doesn't open

Build succeeds locally, fails on Vercel

On this page