Skip to content

deployment-vercel.md

Latest commit

 

History

History
449 lines (315 loc) · 9.93 KB

deployment-vercel.md

File metadata and controls

449 lines (315 loc) · 9.93 KB
Raw

Deploying to Vercel

Vercel (creators of Next.js) is a premium hosting platform with an excellent free tier, lightning-fast deployments, and world-class CDN. Perfect for static landing pages.

Prerequisites

  • A Vercel account (free) - Sign up at vercel.com
  • Your code in a Git repository (GitHub, GitLab, or Bitbucket)

Cost

FREE tier includes:

  • 100GB bandwidth/month
  • Unlimited sites
  • Automatic SSL
  • Custom domain support
  • Serverless Functions (100GB-Hrs)
  • 6,000 build minutes/month

Excellent for landing pages!

Method 1: Deploy from Git Repository (Recommended)

Automatic deployments on every git push.

Step 1: Import Your Repository

  1. Log in to Vercel
  2. Click "Add New" → "Project"
  3. Click "Import Git Repository"
  4. Choose your Git provider and authorize Vercel
  5. Select your landing page repository

Step 2: Configure Project

Vercel auto-detects most settings, but verify:

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

Root Directory: Leave empty (unless your project is in a subdirectory)

Step 3: Deploy

  1. Click "Deploy"
  2. Vercel will:
    • Clone your repository
    • Install dependencies
    • Run build command
    • Deploy to global CDN
  3. Your site goes live in 30-60 seconds!

You'll get a production URL: https://your-repo-name.vercel.app

Step 4: Automatic Deployments

Every push to your main branch automatically deploys to production. Pull requests get unique preview URLs!

Method 2: Vercel CLI

For developers who prefer the command line.

Step 1: Install Vercel CLI

npm install -g vercel

Step 2: Login

vercel login

Enter your email to receive a verification link.

Step 3: Deploy

Navigate to your project directory and run:

vercel

Follow the prompts:

  • Set up and deploy? Y
  • Which scope? (Select your account)
  • Link to existing project? N (first time)
  • What's your project's name? (Enter a name)
  • In which directory is your code located? ./
  • Want to override settings? Y
  • Build command: npm run build
  • Output directory: dist
  • Development command: npm start

Your site is now deployed!

Step 4: Deploy to Production

For subsequent deployments:

vercel --prod

Or for preview deployments:

vercel

Method 3: Deploy with Vercel Button

Add a deploy button to your repository's README:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/your-repo)

Anyone can click this button to deploy their own copy!

Configuration File

Create a vercel.json file in your project root for advanced configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm start",
  "installCommand": "npm install",
  "framework": null,
  "regions": ["iad1"],
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

This ensures:

  • Correct build settings
  • SPA routing support (all routes serve index.html)
  • Consistent deploys across team

Adding a Custom Domain

Step 1: Add Domain in Vercel

  1. Go to your project dashboard
  2. Click "Settings" → "Domains"
  3. Enter your domain (e.g., yourdomain.com or landing.yourdomain.com)
  4. Click "Add"

Step 2: Configure DNS

Vercel will show you which DNS records to add.

For apex domain (yourdomain.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain:

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

For custom subdomain (landing.yourdomain.com):

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

Step 3: Verify Domain

  1. Add the DNS records at your domain registrar
  2. Click "Verify" in Vercel
  3. Wait for DNS propagation (usually 5 minutes to a few hours)
  4. SSL certificate is automatically provisioned

Step 4: Set as Production Domain (Optional)

  1. Go to Domains settings
  2. Click the three dots next to your domain
  3. Select "Set as Primary Domain"

Environment Variables (If Needed)

If your build process needs environment variables:

  1. Go to Settings → Environment Variables
  2. Add variables for different environments:
    • Production
    • Preview
    • Development
  3. Click "Save"

Access them in your build process via process.env.VARIABLE_NAME

Preview Deployments

Vercel automatically creates preview deployments for every push:

Branch Deployments

  • Every branch gets its own URL
  • https://your-repo-git-branch-name-username.vercel.app

Pull Request Deployments

  • Every PR gets a unique preview URL
  • Vercel bot comments on PR with deployment link
  • Perfect for reviewing changes before merging

Production vs Preview

  • Production: Deployments from your main branch
  • Preview: All other branches and PRs

Deployment Protection (Optional)

Protect your preview deployments:

  1. Go to Settings → Deployment Protection
  2. Enable password protection or Vercel Authentication
  3. Share password with team members

Free tier includes basic protection!

Analytics (Optional)

Vercel Analytics shows real user metrics:

Free tier includes:

  • Core Web Vitals
  • Page views
  • Top pages
  • Real user metrics

To enable:

  1. Go to Analytics tab
  2. Click "Enable Analytics"
  3. Add analytics script (optional for static sites)

Cost: Free for up to 100k data points/month

Speed Insights

Get detailed performance metrics:

  1. Go to Speed Insights tab
  2. Enable for your project
  3. See real-world performance data

Included in free tier with limits!

Build Optimization

Build Cache

Vercel automatically caches:

  • node_modules
  • npm/yarn cache
  • Build outputs

Subsequent builds are much faster!

Build Logs

View detailed build logs:

  1. Go to Deployments tab
  2. Click on any deployment
  3. View Build Logs and Function Logs

Perfect for debugging build issues.

Rollback Deployments

Made a mistake? Instant rollback:

  1. Go to Deployments tab
  2. Find the previous working deployment
  3. Click the three dots → "Promote to Production"
  4. Previous version is live instantly!

Team Collaboration

Vercel's free tier supports team collaboration:

  1. Go to Settings → Team
  2. Invite team members by email
  3. Set permissions (View, Edit, Admin)

Everyone gets access to deployments, logs, and settings.

Performance Features

Vercel automatically optimizes:

  • Global Edge Network: 100+ locations worldwide
  • Smart CDN: Caches at the edge
  • HTTP/2 & HTTP/3: Modern protocols
  • Brotli Compression: Smaller file sizes
  • Image Optimization: (if you upgrade plan)
  • Automatic HTTPS: Free SSL for all domains

Monitoring

Monitor your site:

  1. Deployment Health: See deployment status
  2. Uptime Monitoring: Get alerts for downtime (paid)
  3. Error Tracking: View build and runtime errors

Git Integration Features

Automatic Comments on PRs

  • Deployment status
  • Preview URL
  • Build logs link

GitHub Checks

  • Build status in PR
  • Preview deployment ready status

Branch Protection

  • Require successful deployment before merging

Troubleshooting

Build Fails

  1. Check build logs in deployment details
  2. Test build locally: npm run build
  3. Verify package.json dependencies
  4. Check Node version compatibility

404 on Routes

Add to vercel.json:

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

Custom Domain Not Working

  • Check DNS records: dig yourdomain.com
  • Wait 24-48 hours for DNS propagation
  • Verify domain in Vercel dashboard
  • Check for conflicting DNS records

Build Times Too Long

  • Enable build cache
  • Remove unnecessary dependencies
  • Optimize build script
  • Check for large files in repo

CLI Commands Cheat Sheet

# Deploy to preview
vercel

# Deploy to production
vercel --prod

# List deployments
vercel ls

# View deployment logs
vercel logs <url>

# Remove deployment
vercel rm <deployment-url>

# Link local project
vercel link

# Pull environment variables
vercel env pull

# Get deployment info
vercel inspect <url>

Deployment Badges

Show deployment status in README:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/yourusername/your-repo)

Advanced: Monorepo Support

If your landing page is part of a monorepo:

  1. Set Root Directory to your project's subdirectory
  2. Vercel will only build that directory
  3. Perfect for multi-site repositories

Comparison: When to Choose Vercel

Choose Vercel if you want:

  • Fastest deployments (30-60 seconds)
  • Best developer experience
  • Excellent preview deployments
  • Built-in performance monitoring
  • Top-tier CDN performance

Choose alternatives if:

  • You need unlimited bandwidth (GitHub Pages)
  • You need form handling (Netlify has built-in forms)
  • You want to avoid vendor lock-in

Next Steps

  • Set up custom domain for professional branding
  • Enable Analytics to track performance
  • Configure preview deployments for team collaboration
  • Add deployment badges to README

Cost Summary

Free tier:

  • Cost: $0/month
  • Bandwidth: 100GB/month
  • Build minutes: 6,000 minutes/month
  • Serverless Functions: 100GB-Hrs
  • Sites: Unlimited

Perfect for multiple landing pages!

Deployment Time: 30-60 seconds per deployment Difficulty: Very Easy 🟢 Developer Experience: Excellent ⭐⭐⭐⭐⭐