Vercel Deployment Guide

Vercel is a modern frontend deployment platform that supports multiple frameworks and static sites. VUP projects provide two simple deployment methods.

Deployment Methods

Method 1: Local Deployment

Use the deployment commands in the project root directory:

# Deploy to Vercel
pnpm deploy:prod

# Deploy preview version
pnpm deploy:preview

Method 2: GitHub Automatic Deployment

1. Connect GitHub Repository

   • Import GitHub repository in Vercel console
   • Select project root directory as deployment directory

2. Automatic Deployment

   • Push to main branch automatically deploys to production
   • Push to other branches automatically generates preview links

Project Configuration

The project root directory already includes a vercel.json configuration file:

{
  "version": 2,
  "builds": [
    {
      "src": "apps/homepage/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "apps/homepage/.output"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/homepage/.output/$1"
    }
  ]
}

Environment Variables

Development Environment

Create .env.local file:

# .env.local
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Production Environment

Set environment variables in Vercel console:

1. Go to project settings
2. Select "Environment Variables"
3. Add variables and select environment

Custom Domain

1. Go to project in Vercel console
2. Select "Settings" > "Domains"
3. Add custom domain
4. Configure DNS records

Related Resources

• Vercel Official Documentation
• Vercel CLI Documentation
• Environment Variables Management