Deploy to Vercel

Overview

Vercel deployment automates frontend application deployment with zero-configuration builds, automatic SSL, and global CDN. This skill guides through production-ready Vercel deployments for modern web applications.

Prerequisites Check

Install Vercel CLI

npm install -g vercel

Authentication

vercel login

Verify Setup

vercel --version
vercel whoami

Project Configuration

Vercel Configuration File

Create vercel.json in project root:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ],
  "env": {
    "NODE_ENV": "production"
  },
  "build": {
    "env": {
      "VITE_API_URL": "@api_url"
    }
  }
}

Build Configuration

Ensure package.json has proper build scripts:

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "type-check": "tsc --noEmit"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Deployment Workflows

Production Deployment

# Deploy to production
vercel --prod

# Deploy with custom domain
vercel --prod --domain your-app.com

Preview Deployment

# Deploy preview (staging)
vercel

# Deploy specific branch preview
vercel --target preview --git-branch staging

Environment-Specific Deployment

# Deploy with environment
vercel --prod --env NODE_ENV=production --env API_URL=https://api.production.com

Environment Configuration

Environment Variables Setup

# Add production environment variables
vercel env add VITE_API_URL production
vercel env add VITE_APP_NAME production
vercel env add DATABASE_URL production

# Add preview environment variables
vercel env add VITE_API_URL preview
vercel env add DATABASE_URL preview

# List all environment variables
vercel env ls

Local Environment Sync

# Pull environment variables to local
vercel env pull .env.local

# Link project to Vercel
vercel link

Framework-Specific Configurations

React/Vite Applications

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@emotion/react']
        }
      }
    }
  },
  optimizeDeps: {
    exclude: ['lucide-react']
  }
});

Next.js Applications

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true
  },
  images: {
    domains: ['your-image-domain.com']
  },
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY
  }
};

module.exports = nextConfig;

SvelteKit Applications

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      runtime: 'nodejs18.x'
    })
  }
};

Custom Domain Setup

Add Custom Domain

# Add domain to Vercel project
vercel domains add your-domain.com

# Set domain as alias
vercel alias set your-deployment-url.vercel.app your-domain.com

DNS Configuration

Update DNS records with your domain provider:

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

Type: A
Name: @
Value: 76.76.19.61

Advanced Deployment Features

Edge Functions

// api/edge-function.ts
import { NextRequest } from 'next/server';

export const config = {
  runtime: 'edge'
};

export default function handler(req: NextRequest) {
  return new Response(
    JSON.stringify({
      message: 'Hello from Edge Function',
      timestamp: new Date().toISOString(),
      location: req.geo?.city || 'Unknown'
    }),
    {
      status: 200,
      headers: {
        'content-type': 'application/json',
        'cache-control': 'max-age=60'
      }
    }
  );
}

Serverless Functions

// api/serverless.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Handle POST request
    const { data } = req.body;

    res.status(200).json({
      success: true,
      message: 'Data processed',
      data: data
    });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

ISR (Incremental Static Regeneration)

// pages/products/[id].tsx
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);

  return {
    props: { product },
    revalidate: 60 // Regenerate page every 60 seconds
  };
}

export async function getStaticPaths() {
  const products = await fetchProducts();

  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking'
  };
}

CI/CD Integration

GitHub Actions Deployment

# .github/workflows/vercel-deployment.yml
name: Deploy to Vercel

on:
  push:
    branches: [main, staging]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Run tests
      run: npm test

    - name: Build application
      run: npm run build

    - name: Deploy to Vercel
      uses: amondnet/vercel-action@v25
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
        vercel-args: '--prod'
      if: github.ref == 'refs/heads/main'

GitLab CI/CD

# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy

variables:
  NODE_VERSION: "18"

test:
  stage: test
  image: node:$NODE_VERSION
  script:
    - npm ci
    - npm run test
    - npm run type-check

build:
  stage: build
  image: node:$NODE_VERSION
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/

deploy_production:
  stage: deploy
  image: node:$NODE_VERSION
  script:
    - npm install -g vercel
    - vercel --token $VERCEL_TOKEN --prod --yes
  only:
    - main
  environment:
    name: production
    url: https://your-app.vercel.app

Monitoring and Analytics

Vercel Analytics Integration

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Performance Monitoring

// lib/analytics.js
export function trackPageView(url) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('config', 'GA_MEASUREMENT_ID', {
      page_location: url
    });
  }
}

export function trackEvent(action, category, label, value) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value
    });
  }
}

Security Configuration

Security Headers

// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
        }
      ]
    }
  ]
}

Environment Security

# Secure environment variable management
vercel env add SECRET_KEY production --sensitive
vercel env add API_KEY production --sensitive

# Use Vercel's built-in secrets
vercel secrets add my-secret-name "secret-value"

Troubleshooting Common Issues

Build Failures

# Check build logs
vercel logs

# Local build debugging
vercel dev --debug

# Clear build cache
vercel --force

Domain Issues

# Verify domain configuration
vercel domains inspect your-domain.com

# Check DNS propagation
nslookup your-domain.com

# Force SSL certificate renewal
vercel certs issue your-domain.com

Performance Issues

# Analyze bundle size
npm install -g @vercel/ncc
ncc analyze dist/

# Check Core Web Vitals
vercel inspect https://your-app.vercel.app

Best Practices

Optimization Strategies

Code Splitting:

// Lazy load components
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Dynamic imports for large dependencies
const loadChartLibrary = () => import('chart.js');

Image Optimization:

// Next.js Image component
import Image from 'next/image';

<Image
  src="/hero-image.jpg"
  alt="Hero"
  width={800}
  height={600}
  priority
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Caching Strategy:

{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "s-maxage=60, stale-while-revalidate"
        }
      ]
    }
  ]
}

Deployment Checklist

Pre-Deployment:

• All tests pass locally
• Build completes without errors
• Environment variables configured
• Dependencies up to date
• Security headers configured
• Performance optimizations applied

Post-Deployment:

• Deployment URL accessible
• Custom domain working
• SSL certificate valid
• Analytics tracking functional
• Error monitoring active
• Performance metrics baseline established

Additional Resources

Reference Files

For detailed deployment configurations, consult:

• references/framework-configs.md - Framework-specific Vercel configurations
• references/performance-optimization.md - Performance optimization strategies
• references/security-best-practices.md - Security configuration guidelines

Example Files

Working deployment examples in examples/:

• examples/react-vite-config.js - Complete React+Vite Vercel setup
• examples/nextjs-deployment.js - Next.js deployment configuration
• examples/ci-cd-pipeline.yml - Complete CI/CD pipeline

Scripts

Deployment utility scripts in scripts/:

• scripts/deploy-production.sh - Automated production deployment
• scripts/setup-vercel-project.sh - Initial Vercel project setup
• scripts/performance-check.sh - Post-deployment performance validation

Deploy modern web applications with confidence using Vercel's powerful platform and these production-ready configurations.