Getting Started with Vercel: Deploy Your First Project in 5 Minutes

Fred· AI Engineer & Developer EducatorOctober 25, 202511 min read

vercel deployment tutorial beginner hosting

Vercel is one of the easiest ways to deploy websites and web applications to the internet. In this guide, you'll learn what Vercel is, how it works, and deploy your first project—all in about 5 minutes.

What is Vercel?

Vercel is a cloud platform for deploying websites and web applications. It's made by the team behind Next.js and focuses on making deployments fast and effortless.

Think of Vercel as:

A place to host your website (like a landlord for your code)
A build system that turns your code into a live website
A global CDN that makes your site fast everywhere in the world

What makes Vercel special:

Zero configuration: Just connect your Git repo and deploy
Automatic deployments: Push code to Git, Vercel rebuilds automatically
Global edge network: Your site loads fast from 70+ locations worldwide
Free tier: Generous limits for personal and small projects

What Can You Deploy on Vercel?

Vercel works best with:

Frontend frameworks:

React (with Vite, Create React App, etc.)
Next.js (Vercel's own framework)
Vue.js, Svelte, Angular
Static HTML/CSS/JavaScript sites

Full-stack applications:

Next.js with API routes
Any frontend + serverless functions
Jamstack sites

What Vercel doesn't support:

Traditional backend servers (Express.js, Django, Rails running 24/7)
Long-running processes
WebSocket servers
Databases (you'd use external services like Supabase, PlanetScale, etc.)

Vercel is designed for frontend and serverless applications, not traditional backend servers.

Vercel Free Tier: What's Included?

The free "Hobby" plan includes:

Resource	Free Tier Limit
Bandwidth	100GB/month
Build Execution	6,000 minutes/month
Serverless Functions	100GB-hours/month
Edge Functions	500,000 invocations/month
Projects	Unlimited
Deployments	Unlimited
Team Members	1 (just you)
Custom Domains	Unlimited (with free SSL)

This is plenty for:

Personal projects
Portfolio sites
Side projects
Small business websites
Most hobby projects

You'll get a warning before hitting any limits.

How Vercel Works: The Deployment Flow

Here's what happens when you deploy to Vercel:

You push code to Git (GitHub, GitLab, or Bitbucket)
Vercel detects the push automatically
Vercel runs your build (npm run build or similar)
Vercel deploys to the edge across 70+ global locations
You get a live URL (.vercel.app domain)

Every push to Git triggers a new deployment. It's completely automatic.

Preview Deployments

Every branch and pull request gets its own preview URL:

Main branch → Production deployment (your-site.vercel.app)
Feature branches → Preview deployments (your-site-git-feature-branch.vercel.app)
Pull requests → Preview with shareable URL

This makes testing changes before merging incredibly easy.

Your First Deployment: Step-by-Step

Let's deploy a simple website to Vercel. We'll use a basic React app, but the process is identical for any framework.

Prerequisites

You need:

A GitHub account (free)
A Vercel account (free - you'll create this in Step 2)
A project to deploy (code in a Git repository)

Don't have a project? Use this starter:

# Create a new Vite React app
npm create vite@latest my-first-vercel-app -- --template react

# Navigate into it
cd my-first-vercel-app

# Install dependencies
npm install

# Test locally
npm run dev

Visit http://localhost:5173 to see it running locally.

Step 1: Push Your Code to GitHub

If your project isn't on GitHub yet:

# Initialize Git (if not already done)
git init

# Add all files
git add .

# Commit
git commit -m "Initial commit"

# Create a repo on GitHub, then:
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
git branch -M main
git push -u origin main

Your code is now on GitHub.

Step 2: Sign Up for Vercel

Go to vercel.com/signup
Click "Continue with GitHub"
Authorize Vercel to access your GitHub account
Complete your profile (name, team name, etc.)

You're now logged into the Vercel dashboard.

Step 3: Import Your Project

Click "Add New..." button
Select "Project"
You'll see a list of your GitHub repositories
Find your project and click "Import"

Vercel will analyze your repository.

Step 4: Configure Project Settings

Vercel auto-detects your framework. For our Vite React app:

Framework Preset: Vite (auto-detected) ✅

Root Directory: (leave blank)

Build Command:

npm run build

(auto-detected) ✅

Output Directory:

dist

(auto-detected) ✅

Install Command:

npm install

(auto-detected) ✅

Environment Variables: (skip for now—we'll cover this later)

Step 5: Deploy

Click "Deploy"

Vercel will:

Clone your repository
Install dependencies
Run the build command
Deploy to the edge network
Give you a live URL

Watch the build logs as Vercel works. You'll see:

Installing dependencies...
Building project...
Deploying...
✓ Deployment ready

Deployment time: Usually 30-90 seconds for simple projects.

Step 6: View Your Live Site

Once deployed, you'll see:

Production URL: https://your-project.vercel.app
Deployment status: ✅ Ready
Build time: ~45 seconds

Click the URL to see your live site!

Congratulations! You just deployed your first project to Vercel.

Making Updates

Now let's make a change and see automatic deployment in action:

Edit Your Code Locally

// src/App.jsx (or any file)
function App() {
  return (
    <div>
      <h1>My First Vercel Deployment! 🚀</h1>
      <p>This deployed automatically from Git!</p>
    </div>
  )
}

Push to Git

git add .
git commit -m "Update homepage message"
git push origin main

Vercel Automatically Rebuilds

Within seconds, Vercel:

Detects your push
Starts a new build
Deploys the updated site

No manual action needed. Visit your dashboard to watch the deployment.

View the Update

Refresh your live site (your-project.vercel.app) and see your changes.

This is the power of Vercel: Push to Git, and your site updates automatically.

Adding a Custom Domain

Your .vercel.app URL works, but you probably want your own domain.

Step 1: Buy a Domain

Get a domain from:

Domains cost $10-20/year typically.

Step 2: Add Domain to Vercel

In your Vercel project, go to Settings
Click Domains in the sidebar
Enter your domain (e.g., example.com)
Click Add

Step 3: Configure DNS

Vercel will show you DNS records to add:

For apex domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain (www.example.com):

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Add these at your domain registrar:

Log in to your registrar
Find DNS settings (often called "DNS Management" or "Name Servers")
Add the A record and/or CNAME record
Save changes

Step 4: Wait for DNS Propagation

DNS changes take time to propagate:

Minimum: 5-10 minutes
Typical: 30 minutes - 2 hours
Maximum: 24-48 hours

Check status at whatsmydns.net

Once propagated, Vercel automatically provisions an SSL certificate. Your site will be live at your custom domain with HTTPS.

Environment Variables

If your project needs API keys or configuration:

In Your Code

Use environment variables instead of hardcoded values:

// Good ✅
const API_URL = import.meta.env.VITE_API_URL

// Bad ❌
const API_URL = "https://api.example.com"

For Vite projects, prefix with VITE_:

const apiKey = import.meta.env.VITE_API_KEY
const apiUrl = import.meta.env.VITE_API_URL

In Vercel Dashboard

Go to Project Settings
Click Environment Variables
Click Add
Enter:
- Name: VITE_API_URL
- Value: https://api.example.com
Select which environments: Production, Preview, Development
Click Save

Redeploy for changes to take effect (push a new commit or manually redeploy).

Using Vercel CLI (Optional)

For more control, install the Vercel CLI:

# Install globally
npm install -g vercel

# Login
vercel login

# Deploy from terminal
vercel

Commands

# Deploy to preview
vercel

# Deploy to production
vercel --prod

# View deployment logs
vercel logs

# List projects
vercel projects list

# Pull environment variables locally
vercel env pull

The CLI is useful for:

Deploying without Git
Testing locally with production environment variables
CI/CD pipelines
Advanced configurations

Common Issues and Solutions

Build Fails: "Command not found"

Problem: Vercel can't find your build command

Solution:

Check your package.json has a build script:

{
  "scripts": {
    "build": "vite build"
  }
}

Update Vercel build settings to match your script name

404 on Routes (SPA Issue)

Problem: /about works locally but shows 404 on Vercel

Solution: Create vercel.json in your project root:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

This handles client-side routing for single-page apps.

Environment Variables Not Working

Problem: import.meta.env.VITE_API_URL is undefined

Solutions:

Ensure variable name starts with VITE_ (for Vite projects)
Add variable in Vercel dashboard under Environment Variables
Redeploy after adding (push a commit or click "Redeploy")

Check you're accessing it correctly:

// Correct
import.meta.env.VITE_API_URL

// Wrong
process.env.VITE_API_URL  // This is for Node.js, not Vite

Deployment Shows Old Version

Problem: Changes don't appear after deploying

Solutions:

Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Check you pushed to the correct branch
Verify deployment completed successfully in Vercel dashboard
Clear browser cache

Exceeded Free Tier Limits

Problem: Hit bandwidth or build minute limits

Solutions:

Bandwidth: Optimize images, enable caching, or upgrade to Pro ($20/month)
Build minutes: Optimize build time, reduce builds, or upgrade to Pro
Check usage in Settings > Usage

When to Use Vercel vs Other Platforms

Use Vercel When:

You're building a frontend application (React, Vue, Svelte, etc.)
You want automatic deployments from Git
You value developer experience and speed
You're using Next.js (Vercel is made for it)
You need serverless functions for APIs

Use Cloudflare Workers When:

You want unlimited bandwidth and more control over deployments
You have very high traffic (Vercel caps at 100GB free)
You prefer the fastest global performance (300+ regions)
You want to combine static sites with edge functions

Use Fly.io When:

You need real Docker containers running 24/7
You're deploying traditional backend servers (Flask, Express, Rails)
You want full control over your runtime environment
You need databases or long-running processes

Use Netlify When:

You're building Jamstack sites
You need form handling without serverless functions
You prefer Netlify's UI and features

For most modern web apps, Vercel is the easiest choice. But if you need unlimited bandwidth, explore Cloudflare Workers. If you need a real backend server, Fly.io runs actual Docker containers on their free tier.

Best Practices

1. Use Environment Variables

Never commit API keys or secrets:

// .env.local (not committed to Git)
VITE_API_KEY=abc123

// In code
const apiKey = import.meta.env.VITE_API_KEY

Add them in Vercel dashboard instead.

2. Enable Preview Deployments

Test changes before merging:

Create a branch: git checkout -b feature/new-ui
Push changes: git push origin feature/new-ui
Vercel creates a preview URL automatically
Test thoroughly
Merge to main when ready

3. Monitor Performance

Enable Vercel Analytics:

Go to Project Settings > Analytics
Click Enable
View Core Web Vitals and performance metrics

4. Optimize Images

Use modern formats and lazy loading:

// Use Next.js Image component (if using Next.js)
import Image from 'next/image'

<Image src="/photo.jpg" alt="Photo" width={500} height={300} />

Or compress images before adding to your project.

5. Add Security Headers

Create vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ]
}

Next Steps

Now that you've deployed your first project:

Explore serverless functions: Create API routes in /api folder
Set up analytics: Track performance with Vercel Analytics
Add a custom domain: Make it professional
Enable preview deployments: Test before going live
Read the Vercel docs: vercel.com/docs

Frequently Asked Questions

Q: Is Vercel really free? A: Yes, the Hobby plan is free forever with generous limits (100GB bandwidth, 6,000 build minutes/month).

Q: Can I use Vercel for commercial projects? A: Yes, but you need the Pro plan ($20/month) for commercial use according to Vercel's terms.

Q: What's the difference between Vercel and GitHub Pages? A: Vercel auto-detects frameworks, includes serverless functions, has better performance (global CDN), and offers more features. GitHub Pages is simpler but less powerful.

Q: Can I deploy backends to Vercel? A: Only serverless functions. You can't run traditional servers (Express.js 24/7) on Vercel. Use serverless functions instead or pair Vercel with a separate backend service.

Q: How many projects can I deploy? A: Unlimited on the free tier.

Q: Can I roll back deployments? A: Yes! Every deployment is saved. Go to Deployments tab and promote any previous deployment to production.

Conclusion

Vercel makes deploying web applications effortless:

Push code to Git
Vercel builds and deploys automatically
Your site is live globally in seconds

The free tier is generous enough for most personal projects, and the developer experience is excellent.

Try it yourself: Deploy your first project today and see why developers love Vercel.

Build Your First Project to Deploy

Don't have a project ready to deploy yet? Build one from scratch with these comprehensive tutorials:

Build a Blog from Scratch - Create a complete blog with vanilla JavaScript, perfect for Vercel deployment
Build a Portfolio from Scratch - Learn web fundamentals while building a professional portfolio site
Build E-Commerce from Scratch - Master JavaScript state management with a shopping cart application

Each tutorial teaches you the fundamentals of modern web development, and your finished project will be ready to deploy to Vercel's free tier.

Have questions? Leave a comment below!

Related guides:

Fred

AUTHOR

Full-stack developer with 10+ years building production applications. I've deployed dozens of Next.js apps to Vercel and know all the gotchas.

About me →More articles →

Getting Started with Vercel: Deploy Your First Project in 5 Minutes

What is Vercel?

What Can You Deploy on Vercel?

Vercel Free Tier: What's Included?

How Vercel Works: The Deployment Flow

Preview Deployments

Your First Deployment: Step-by-Step

Prerequisites

Step 1: Push Your Code to GitHub

Step 2: Sign Up for Vercel

Step 3: Import Your Project

Step 4: Configure Project Settings

Step 5: Deploy

Step 6: View Your Live Site

Making Updates

Edit Your Code Locally

Push to Git

Vercel Automatically Rebuilds

View the Update

Adding a Custom Domain

Step 1: Buy a Domain

Step 2: Add Domain to Vercel

Step 3: Configure DNS

Step 4: Wait for DNS Propagation

Environment Variables

In Your Code

In Vercel Dashboard

Using Vercel CLI (Optional)

Commands

Common Issues and Solutions

Build Fails: "Command not found"

404 on Routes (SPA Issue)

Environment Variables Not Working

Deployment Shows Old Version

Exceeded Free Tier Limits

When to Use Vercel vs Other Platforms

Use Vercel When:

Use Cloudflare Workers When:

Use Fly.io When:

Use Netlify When:

Best Practices

1. Use Environment Variables

2. Enable Preview Deployments

3. Monitor Performance

4. Optimize Images

5. Add Security Headers

Next Steps

Frequently Asked Questions

Conclusion

Build Your First Project to Deploy

Fred

Stay in the Loop