Vercel Deployment Guide

Overview

Vercel is the recommended platform for deploying DevAurva. It provides seamless deployment for both the React frontend and serverless API functions with zero configuration.

Why Vercel?

Automatic CI/CD: Deploy on every push to your repository
Serverless Functions: Native support for API routes
Edge Network: Global CDN for fast content delivery
Preview Deployments: Automatic preview URLs for pull requests
Environment Variables: Secure management of secrets
Zero Configuration: Works out of the box with Vite

Prerequisites

Before deploying to Vercel:

Vercel account (sign up at vercel.com)
Git repository (GitHub, GitLab, or Bitbucket)
MongoDB database (MongoDB Atlas recommended)
Gmail account with app-specific password
Vercel CLI (optional, for command-line deployment)

Vercel Configuration

DevAurva includes a vercel.json configuration file:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist",
        "buildCommand": "npm run build"
      }
    },
    {
      "src": "api/*.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1.js"
    },
    {
      "src": "^/assets/(.*)",
      "dest": "/assets/$1"
    },
    {
      "src": "/(.*)\\.(.+)$",
      "dest": "/$1.$2"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Configuration Breakdown

Builds:

Static Build: Builds the React frontend using Vite
- Output directory: dist/
- Build command: npm run build
Serverless Functions: Deploys all api/*.js files as serverless functions

Routes:

API routes (/api/*) map to serverless functions
Asset files are served directly
All other routes fall back to index.html for client-side routing

The configuration enables Single Page Application (SPA) routing by redirecting all non-asset routes to index.html, allowing React Router to handle navigation.

Deployment Methods

Method 1: Deploy via Vercel Dashboard (Recommended)

Create Vercel Account

Visit vercel.com
Sign up with GitHub, GitLab, or Bitbucket
Authorize Vercel to access your repositories

Import Project

Click “Add New” → “Project”
Select your DevAurva repository
Click “Import”

Configure Project

Vercel will automatically detect the project settings:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

Leave these as detected (no changes needed).

Add Environment Variables

Before deploying, add required environment variables:

Click “Environment Variables”
Add each variable:
- MONGODB_URI: Your MongoDB connection string
- EMAIL_USER: Gmail address for SMTP
- EMAIL_PASS: Gmail app-specific password
- EMAIL_RECIPIENT: Email to receive form submissions
Select environment: Production, Preview, or Development

Deploy

Click “Deploy”
Wait for build to complete (usually 1-3 minutes)
Vercel will provide a deployment URL

Verify Deployment

Visit the deployment URL
Test the contact form
Submit a custom plan request
Check that emails are received
Verify MongoDB data is saved

Method 2: Deploy via Vercel CLI

For developers who prefer command-line deployment:

Install Vercel CLI

npm install -g vercel

vercel login

Follow the authentication prompts.

Add Environment Variables

vercel env add MONGODB_URI production
vercel env add EMAIL_USER production
vercel env add EMAIL_PASS production
vercel env add EMAIL_RECIPIENT production

Enter the value when prompted for each variable.

Deploy to Production

From your project directory:

vercel --prod

For preview deployment:

vercel

View Deployment

vercel ls

This lists all deployments with their URLs.

The first time you run vercel, it will ask questions about project setup. You can accept the defaults, as vercel.json already contains the configuration.

Method 3: Deploy via Git Integration (Automatic)

Once connected, Vercel automatically deploys:

Production: Every push to main branch
Preview: Every push to other branches or pull requests

Connect Repository

Complete Method 1 (Dashboard deployment) to connect your repository.

Push to Deploy

git add .
git commit -m "Your commit message"
git push origin main

Vercel automatically detects the push and starts deployment.

Monitor Deployment

Visit your Vercel dashboard
View real-time build logs
See deployment status and preview URL

Environment Variables Management

Adding Variables via Dashboard

Navigate to your project in Vercel
Go to Settings → Environment Variables
Add new variable:
- Key: Variable name (e.g., MONGODB_URI)
- Value: Variable value
- Environment: Select Production, Preview, or Development
Click Save

Adding Variables via CLI

# Add production variable
vercel env add MONGODB_URI production

# Add preview variable
vercel env add MONGODB_URI preview

# Add development variable
vercel env add MONGODB_URI development

# List all variables
vercel env ls

# Remove a variable
vercel env rm MONGODB_URI production

Required Environment Variables

All variables must be set before deployment for the application to function correctly.

Variable	Description	Required For
`MONGODB_URI`	MongoDB connection string	Custom plans, card plans
`EMAIL_USER`	Gmail SMTP username	All email notifications
`EMAIL_PASS`	Gmail app password	All email notifications
`EMAIL_RECIPIENT`	Notification recipient	All email notifications

Environment-Specific Variables

Production: Used for live site (yoursite.vercel.app or custom domain)
Preview: Used for branch and PR deployments
Development: Used locally with vercel dev

Set variables for all environments you plan to use. Preview environments are useful for testing with production-like settings.

Testing API Functions

Vercel provides serverless function logs for debugging:

View Function Logs

Go to your project dashboard
Click Deployments
Select a deployment
Click Functions tab
Select a function to view logs

Test API Endpoints

# Test contact form
curl -X POST https://your-site.vercel.app/api/contact \
  -H "Content-Type: application/json" \
  -d '{
    "firstName": "Test",
    "email": "[email protected]",
    "message": "Test message"
  }'

# Test custom plan
curl -X POST https://your-site.vercel.app/api/custom-plan \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test User",
    "email": "[email protected]",
    "phone": "1234567890",
    "websiteType": "E-commerce",
    "features": [{"name": "Feature 1", "price": 1000}],
    "totalPrice": 1000
  }'

Local Development with Vercel

Test serverless functions locally:

# Install dependencies
npm install

# Pull environment variables
vercel env pull .env.local

# Start Vercel dev server
vercel dev

This runs your site at http://localhost:3000 with serverless functions.

vercel dev simulates the Vercel production environment locally, including serverless functions and routing.

Custom Domain Setup

Navigate to Domains

Go to your project in Vercel
Click Settings → Domains

Add Domain

Enter your domain name (e.g., devaurva.com)
Click Add

Configure DNS

Vercel provides DNS configuration instructions:Option A: Vercel Nameservers (Recommended)

Update nameservers at your domain registrar
Vercel manages all DNS records

Option B: Custom DNS

Add A record pointing to Vercel’s IP
Add CNAME record for www subdomain

Wait for Verification

DNS propagation takes 24-48 hours
Vercel automatically provisions SSL certificate
Once verified, your site is live on custom domain

After adding a custom domain, update your CORS configuration in API functions to include the new domain.

Automatic HTTPS

Vercel automatically provides:

SSL certificate for your domain
Automatic HTTPS redirect
Certificate renewal

No configuration needed!

Preview Deployments

What are Preview Deployments?

Every branch and pull request gets a unique preview URL:

Test changes before merging
Share work with team members
Verify features in production-like environment

Using Preview Deployments

Create Branch

git checkout -b feature/new-feature

Make Changes and Push

git add .
git commit -m "Add new feature"
git push origin feature/new-feature

Get Preview URL

Vercel automatically deploys the branch
Check GitHub PR for Vercel bot comment with preview URL
Or view in Vercel dashboard under Deployments

Test Preview

Visit preview URL
Test your changes
Share URL with team for review

Preview deployments use Preview environment variables. Ensure sensitive data is protected and test databases are used for previews.

Rollback and Redeploy

Rollback to Previous Deployment

View Deployments

Go to Deployments in your project
Find the working deployment

Promote to Production

Click the three dots menu
Select Promote to Production
Confirm the rollback

Redeploy Current Version

# Via CLI
vercel --prod --force

# Via Dashboard
# Click "Redeploy" on any deployment

Monitoring and Analytics

Built-in Analytics

Vercel provides:

Page views and unique visitors
Top pages and referrers
Device and browser statistics
Geographic distribution

Enable Analytics:

Go to Analytics in project settings
Click Enable

Function Logs

Monitor serverless functions:

Go to Deployments
Select a deployment
Click Functions tab
View real-time logs and errors

Runtime Logs

View console logs from your API functions:

console.log('Debug information');
console.error('Error details');

Logs appear in the Functions tab of your deployment.

Performance Optimization

Edge Caching

Vercel automatically caches static assets at the edge. No configuration needed.

Custom Cache Headers

For API responses, add cache headers:

res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');

Image Optimization

Use Vercel’s Image Optimization:

import Image from 'next/image';

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

Image optimization is available for Next.js projects. For Vite projects, optimize images before deployment.

Troubleshooting

Build Fails

Error: “Build failed” Solutions:

Check build logs in deployment details
Verify package.json scripts are correct
Ensure all dependencies are in dependencies, not devDependencies
Test build locally: npm run build

Serverless Function Errors

Error: “Function error 500” Solutions:

Check function logs for detailed error
Verify environment variables are set
Test function locally with vercel dev
Check MongoDB connection and credentials

CORS Issues

Error: “CORS policy blocked” Solutions:

Verify CORS headers in API functions
Check that OPTIONS method is handled
Test with curl to isolate frontend issues
Review browser console for exact error

Environment Variables Not Working

Issue: API functions can’t access environment variables Solutions:

Verify variables are set for correct environment (Production/Preview)
Redeploy after adding variables
Check variable names match exactly (case-sensitive)
Use vercel env ls to list all variables

Database Connection Fails

Error: “MongoError: connection timeout” Solutions:

Verify MongoDB connection string is correct
Whitelist Vercel’s IP addresses in MongoDB Atlas
Check database user has correct permissions
Test connection string locally

MongoDB Atlas requires IP whitelisting. For Vercel, whitelist 0.0.0.0/0 (all IPs) as Vercel uses dynamic IPs, or upgrade to Atlas M10+ for VPC peering.

Vercel-Specific Features

Environment Variable Secrets

Sensitive variables (like EMAIL_PASS) are automatically encrypted by Vercel and never exposed in logs.

Zero-Downtime Deployments

Vercel routes traffic to new deployment only after successful build:

Old version continues serving requests
New version is built and tested
Traffic switches atomically
Zero downtime for users

Automatic Compression

Vercel automatically compresses:

HTML, CSS, JavaScript
JSON responses
SVG images

No configuration needed.

DDoS Protection

Vercel provides built-in DDoS protection and rate limiting at the edge.

Cost Considerations

Vercel’s free (Hobby) plan includes:

Unlimited deployments
100GB bandwidth per month
100GB-hours serverless function execution
Automatic HTTPS
Preview deployments

Upgrade to Pro if you need:

More bandwidth and function execution time
Team collaboration features
Advanced analytics
Faster builds

Monitor usage in Settings → Usage to avoid unexpected charges.

Best Practices

Use Preview Environments: Test all changes in preview before merging
Monitor Function Logs: Regularly check for errors and warnings
Set Up Alerts: Use Vercel integrations for Slack/Discord notifications
Optimize Bundle Size: Keep dependencies minimal to reduce cold start time
Use Edge Caching: Configure cache headers appropriately
Secure Environment Variables: Never expose secrets in frontend code
Test Locally: Use vercel dev to catch issues before deployment
Regular Backups: Back up MongoDB data regularly

Next Steps

After deploying to Vercel:

Set up custom domain
Enable Vercel Analytics
Configure Web Vitals monitoring
Set up error tracking (Sentry integration)
Add Slack/Discord notifications for deployments
Implement automated testing in CI/CD

Setup

Going Live

​Overview

​Why Vercel?

​Prerequisites

​Vercel Configuration

​Configuration Breakdown

​Deployment Methods

​Method 1: Deploy via Vercel Dashboard (Recommended)

​Method 2: Deploy via Vercel CLI

​Method 3: Deploy via Git Integration (Automatic)

​Environment Variables Management

​Adding Variables via Dashboard

​Adding Variables via CLI

​Required Environment Variables

​Environment-Specific Variables

​Testing API Functions

​View Function Logs

​Test API Endpoints

​Local Development with Vercel

​Custom Domain Setup

​Automatic HTTPS

​Preview Deployments

​What are Preview Deployments?

​Using Preview Deployments

​Rollback and Redeploy

​Rollback to Previous Deployment

​Redeploy Current Version

​Monitoring and Analytics

​Built-in Analytics

​Function Logs

​Runtime Logs

​Performance Optimization

​Edge Caching

​Custom Cache Headers

​Image Optimization

​Troubleshooting

​Build Fails

​Serverless Function Errors

​CORS Issues

​Environment Variables Not Working

​Database Connection Fails

​Vercel-Specific Features

​Environment Variable Secrets

​Zero-Downtime Deployments

​Automatic Compression

​DDoS Protection

​Cost Considerations

​Best Practices

​Next Steps

​Additional Resources

Build docs developers (and LLMs) love

Overview

Why Vercel?

Prerequisites

Vercel Configuration

Configuration Breakdown

Deployment Methods

Method 1: Deploy via Vercel Dashboard (Recommended)

Method 2: Deploy via Vercel CLI

Method 3: Deploy via Git Integration (Automatic)

Environment Variables Management

Adding Variables via Dashboard

Adding Variables via CLI

Required Environment Variables

Environment-Specific Variables

Testing API Functions

View Function Logs

Test API Endpoints

Local Development with Vercel

Custom Domain Setup

Automatic HTTPS

Preview Deployments

What are Preview Deployments?

Using Preview Deployments

Rollback and Redeploy

Rollback to Previous Deployment

Redeploy Current Version

Monitoring and Analytics

Built-in Analytics

Function Logs

Runtime Logs

Performance Optimization

Edge Caching

Custom Cache Headers

Image Optimization

Troubleshooting

Build Fails

Serverless Function Errors

CORS Issues

Environment Variables Not Working

Database Connection Fails

Vercel-Specific Features

Environment Variable Secrets

Zero-Downtime Deployments

Automatic Compression

DDoS Protection

Cost Considerations

Best Practices

Next Steps

Additional Resources