Skip to main content

​
Overview

Vercel is optimized for modern web frameworks and provides excellent developer experience with instant deployments and built-in CI/CD.

​
Features

Instant Deployments

Deploy in seconds with global CDN

Automatic HTTPS

Free SSL certificates

Git Integration

Auto-deploy from GitHub, GitLab, or Bitbucket

Preview Deployments

Unique URL for every PR

Analytics

Web Analytics and Speed Insights

Edge Network

Global CDN with edge caching

​
Option 1: Deploy from Git Repository

1

Import Project

  1. Go to Vercel
  2. Click “Add New…” → “Project”
  3. Import your Git repository:
    • GitHub: Connect and select repo
    • GitLab: Connect and select repo
    • Bitbucket: Connect and select repo
2

Configure Project

Vercel auto-detects Vite settings:
  • Framework Preset: Vite
  • Build Command: npm run build
  • Output Directory: dist
  • Install Command: npm install
No changes needed unless you have custom configuration.
3

Add Environment Variables

Before deploying, add Supabase credentials:
  1. Click Environment Variables
  2. Add both variables:
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here
  1. Select all environments: Production, Preview, Development
4

Deploy

Click “Deploy”. Vercel will:
  1. Clone your repository
  2. Install dependencies
  3. Build the project
  4. Deploy to global CDN
First deployment takes 1-2 minutes.
5

Verify Deployment

  1. Click the deployment URL (e.g., https://portal-ciudadano-manta.vercel.app)
  2. Test authentication and database operations
  3. Check browser console for errors

​
Option 2: Deploy with Vercel CLI

1

Install Vercel CLI

npm install -g vercel
2

Login to Vercel

vercel login
Enter your email to receive a verification link.
3

Deploy Project

In your project directory:
vercel
Follow the prompts:
  • Set up and deploy: Yes
  • Which scope: Select your account
  • Link to existing project: No (first time)
  • Project name: Accept default or customize
  • Directory: ./ (current directory)
  • Auto-detected settings: Yes
4

Add Environment Variables

vercel env add VITE_SUPABASE_URL
vercel env add VITE_SUPABASE_ANON_KEY
For each:
  1. Enter the value
  2. Select environments: Production, Preview, Development
5

Deploy to Production

vercel --prod

​
SPA Routing Configuration

For Vue Router to work correctly, create vercel.json in your project root: 
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}
This ensures all routes are handled by Vue Router instead of returning 404. Location: Project includes vercel.json:2

​
Custom Domain Setup

1

Add Domain

In Vercel dashboard:
  1. Select your project
  2. Go to Settings → Domains
  3. Click “Add” and enter your domain
2

Configure DNS

Vercel provides DNS configuration:Option A: Use Vercel nameservers
ns1.vercel-dns.com
ns2.vercel-dns.com
Option B: Add CNAME record
CNAME: www → cname.vercel-dns.com
A: @ → 76.76.21.21
3

Wait for SSL

Vercel automatically provisions SSL certificate (takes 1-2 minutes).

​
Environment Variables

​
Adding Variables via Dashboard

1

Navigate to Settings

Project dashboard → Settings → Environment Variables
2

Add Variable

For each variable:
  1. Enter Key (e.g., VITE_SUPABASE_URL)
  2. Enter Value
  3. Select Environments:
    • ✅ Production
    • ✅ Preview
    • ✅ Development
  4. Click Save
3

Redeploy

Variables take effect on next deployment:Option A: Push to Git (automatic)Option B: Manual redeploy
  1. Go to Deployments
  2. Click ⋯ on latest deployment
  3. Select Redeploy

​
Required Variables

VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

​
Continuous Deployment

Vercel automatically deploys:
  • Production: Pushes to main branch
  • Preview: Pull requests and other branches

​
Preview Deployments

Every PR and branch gets a unique URL: 
https://portal-ciudadano-manta-git-feature-abc.vercel.app
Comment on PRs includes:
  • Preview URL
  • Build status
  • Deployment logs

​
Build Configuration

​
Build Settings

Vercel auto-detects from package.json: 
{
  "scripts": {
    "build": "vue-tsc -b && vite build",
    "dev": "vite",
    "preview": "vite preview"
  }
}

​
Custom Build Command

Override in vercel.json: 
{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "vite"
}

​
Troubleshooting

​
Build Fails

Problem: Build exits with error Solutions:
  1. Check build logs in Vercel dashboard
  2. Test build locally: npm run build
  3. Verify Node version compatibility: 
    {
  "engines": {
    "node": ">=20.0.0"
  }
}
  4. Check all dependencies are in package.json

​
404 on Page Refresh

Problem: Refreshing a route returns 404 Solution: Ensure vercel.json exists with rewrite rules: 
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

​
Environment Variables Not Working

Problem: Variables are undefined in production Solutions:
  1. Verify variables are added in Vercel dashboard
  2. Ensure names start with VITE_ prefix
  3. Redeploy after adding variables
  4. Check build logs for warnings

​
Supabase Connection Fails

Problem: “Failed to fetch” errors in production Solutions:
  1. Add Vercel domain to Supabase Authentication → URL Configuration: 
    https://your-project.vercel.app
https://your-project-*.vercel.app
  2. Add to Redirect URLs: 
    https://your-project.vercel.app/**
  3. Verify environment variables are correct

​
Performance Optimization

​
Automatic Optimizations

Vercel provides:
  • Image optimization (using <Image> component)
  • Asset compression (Brotli/gzip)
  • Edge caching (static assets)
  • Global CDN (edge network)

​
Build Cache

Vercel caches dependencies between builds:
  • node_modules/
  • .next/cache (if using Next.js)
To clear cache: Settings → General → Clear cache

​
Analytics

​
Web Analytics

Enable analytics:
  1. Go to Analytics tab
  2. Click “Enable Analytics”
  3. View metrics:
    • Page views
    • Top pages
    • Top referrers
    • Devices and browsers

​
Speed Insights

Monitor real-world performance:
  1. Go to Speed Insights tab
  2. View Core Web Vitals:
    • First Contentful Paint (FCP)
    • Largest Contentful Paint (LCP)
    • Cumulative Layout Shift (CLS)
    • First Input Delay (FID)

​
Next Steps

Environment Variables

Configure required variables

Supabase Setup

Complete backend configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us