Vercel Deployment Guide — Frontend Deployment and Serverless Functions

Vercel is a cloud platform for frontend developers that enables instant Git-based deployments, serverless functions, and global CDN delivery with zero configuration for popular frameworks.

In this tutorial, you will learn how to import a Git repository for automatic deployment, use the Vercel CLI for local development and previews, manage environment variables across environments, write serverless API functions, enable Web Analytics, and leverage preview deployments for every branch. DodaTech uses Vercel to deploy Doda Browser web extensions and marketing dashboards.

What You’ll Learn

By the end of this guide, you will deploy a React application on Vercel, configure serverless functions in the same project, manage per-environment configuration, and analyze real user traffic with Vercel Analytics.

Why Vercel Matters

Vercel provides the fastest path from code to production. A git push automatically builds, deploys, and assigns a URL. Every branch gets its own preview URL, enabling collaborative code review on live sites. Serverless functions run in the same domain as your frontend, eliminating CORS issues.

Vercel Learning Path

    flowchart LR
  A[Git Import] --> B[Vercel CLI]
  B --> C[Environment Variables]
  C --> D[Serverless Functions]
  D --> E[Analytics & Previews]
  E --> F{You Are Here}
  style F fill:#f90,color:#fff
  

Git Import Deployment

1. Push your code to GitHub, GitLab, or Bitbucket
2. Visit vercel.com → Add New Project → Import Git Repository
3. Vercel auto-detects framework and configures build settings

Framework auto-detection

{
  "framework": "create-react-app",
  "buildCommand": "react-scripts build",
  "outputDirectory": "build",
  "devCommand": "react-scripts start"
}

Vercel detects: React, Next.js, Vue, Angular, Svelte, Gatsby, Hugo, and 30+ other frameworks.

Expected deployment output

✅  Production Deployment
   https://my-app.vercel.app

   Inspect: https://vercel.com/your-team/my-app/abc123
   Deployment Summary:
   - Build: 45s
   - Output: 432 kB (gzipped: 142 kB)
   - Available at edge in 95 locations

Vercel CLI

Install and use the CLI for local development:

npm install -g vercel

Common commands

# Log in
vercel login

# Deploy to preview (creates a unique URL)
vercel

# Deploy to production
vercel --prod

# List all deployments
vercel list

# View deployment logs
vercel logs https://my-app.vercel.app

# Pull environment variables locally
vercel env pull

Local development with serverless functions

vercel dev
# Starts at http://localhost:3000
# Functions in /api/* are served at /api/*

Environment Variables

Manage environment-specific configuration:

# Add an environment variable
vercel env add DATABASE_URL

# Prompts for value and environment(s):
# Production, Preview, Development

# Pull to local .env file
vercel env pull .env.local

Configure in vercel.json:

{
  "env": {
    "API_URL": {
      "production": "https://api.example.com",
      "preview": "https://staging-api.example.com",
      "development": "http://localhost:4000"
    }
  }
}

Access in code

// process.env.API_URL is automatically injected
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
// Prefix with NEXT_PUBLIC_ for client-side availability

Serverless Functions

Create an api/ directory in your project root. Files become serverless endpoints:

// api/hello.js
export default function handler(request, response) {
  const { name = "World" } = request.query;

  response.status(200).json({
    message: `Hello, ${name}!`,
    timestamp: new Date().toISOString(),
  });
}

Testing the function

# Local (with vercel dev)
curl http://localhost:3000/api/hello?name=Alice
# → {"message":"Hello, Alice!","timestamp":"2026-06-07T10:00:00.000Z"}

# Production
curl https://my-app.vercel.app/api/hello?name=Alice
# → Same output

Function with body parsing

// api/subscribe.js
export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

  const { email } = req.body;

  if (!email || !email.includes("@")) {
    return res.status(400).json({ error: "Invalid email" });
  }

  // Simulate saving to a database
  console.log(`[Subscribe] New subscriber: ${email}`);

  return res.status(201).json({
    success: true,
    message: "You are subscribed!",
    email,
  });
}

Expected output

curl -X POST https://my-app.vercel.app/api/subscribe \
  -H "Content-Type: application/json" \
  -d '{"email":"alice@example.com"}'
# → {"success":true,"message":"You are subscribed!","email":"alice@example.com"}

curl -X POST https://my-app.vercel.app/api/subscribe \
  -H "Content-Type: application/json" \
  -d '{"email":"bad"}'
# → {"error":"Invalid email"}

Web Analytics

Enable Vercel Web Analytics from the dashboard (Analytics tab) or via the @vercel/analytics package:

npm install @vercel/analytics

// pages/_app.js (Next.js)
import { Analytics } from '@vercel/analytics/react';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

Analytics dashboard shows

Top pages: /, /docs, /pricing
Top referrers: Google, GitHub, Twitter
Device breakdown: 65% Desktop, 30% Mobile, 5% Tablet
Real-time visitors: 142

Preview Deployments

Every branch and every commit gets its own preview URL:

# Create a branch, push, and Vercel deploys
git checkout -b feature/new-dashboard
git push origin feature/new-dashboard
# Vercel creates: https://my-app-git-feature-new-dashboard.vercel.app

Preview URLs are perfect for:

• Code review (reviewers see the live site)
• Client/stakeholder feedback
• Integration testing in CI/CD pipelines

Add comments on preview deployments via the Vercel GitHub App integration.

Common Errors

1. Build Fails Because of Missing Environment Variables

Variables set in the dashboard are not available locally. Run vercel env pull to sync them into a .env file.

2. Serverless Function Timeout

Vercel functions have a 10-second limit (60 seconds on Pro). For long operations, offload to an external service or use Edge Functions (faster, limited to 1MB).

3. Client-Side Routing Returns 404

Single-page apps need a rewrite rule in vercel.json:

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

4. Images Not Loading on Preview Deployments

Absolute paths break when the site is deployed to a preview URL sub-path. Use relative paths in <img> tags and asset references.

5. Environment Variable Not Available in Browser

Only variables prefixed with NEXT_PUBLIC_ (Next.js) or REACT_APP_ (CRA) are exposed to the client. Server-side variables are only available in Serverless Functions.

6. Monorepo Not Building

Vercel expects the root to contain a package.json. For monorepos, configure the root directory in Project Settings → Root Directory.

7. Custom Domain Not Working

DNS propagation can take up to 48 hours. Vercel provides a cname.vercel-dns.com target. Verify DNS records with dig yourdomain.com CNAME.

Practice Questions

1. How do you deploy a project with Vercel CLI without a Git integration?

Run vercel in the project directory. It prompts for setup and creates a deployment. Use vercel --prod for production.

2. What is the difference between a Rewrite and a Redirect in vercel.json?

A rewrite serves content from the destination URL without changing the browser’s address bar. A redirect (301/302) changes the browser URL to the destination.

3. How do serverless functions access environment variables?

Via process.env.VARIABLE_NAME. Functions run in a Node.js environment on Vercel’s infrastructure. Variables are injected at deployment time.

4. What is the purpose of the @vercel/analytics package?

It adds real-user monitoring to your site, tracking page views, visitor counts, geographic distribution, and performance metrics without cookies.

5. Challenge: Create a proxied API endpoint

Create api/proxy.js that forwards requests to an external API and adds a cache header. Use fetch to call the external URL and return the response.

Mini Project: Full-Stack Vercel Application

Build and deploy a serverless application with analytics:

1. Create a Next.js app: npx create-next-app@latest my-vercel-app
2. Add an API route at pages/api/contact.js that accepts name and email and returns a success response
3. Enable Web Analytics by adding @vercel/analytics
4. Configure environment variables in vercel.json:

   {
     "env": {
       "NEXT_PUBLIC_SITE_NAME": "My App"
     }
   }
5. Deploy to Vercel from Git or CLI

# Test the API
curl -X POST https://my-vercel-app.vercel.app/api/contact \
  -H "Content-Type: application/json" \
  -d '{"name":"Alice","email":"alice@example.com"}'
# → {"success":true}

# Check analytics in Vercel dashboard after some traffic

This pattern is how DodaTech deploys and monitors Doda Browser extension dashboards and user-facing web tools.

FAQ

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.