Deploying to Vercel

Overview

This guide covers deploying the build-elevate monorepo to Vercel, the platform purpose-built for Next.js.

The monorepo contains multiple applications that can be deployed independently:

• Web (apps/web) - Next.js 16 frontend application
• API (apps/api) - Express.js REST API backend

Prerequisites

• A Vercel account
• GitHub, GitLab, or Bitbucket account with monorepo access
• All environment variables configured

Deploying the Web Application

Step 1: Link Repository

1. Go to vercel.com and click Add New Project
2. Select your Git provider and authorize Vercel
3. Find and select your monorepo
4. Click Import

Step 2: Configure Web App

1. Set Root Directory

   • Root Directory: apps/web
   • Vercel auto-detects Next.js configuration

2. Environment Variables

   • Navigate to Settings → Environment Variables
   • Add the variables required by the web application:
     • NEXT_PUBLIC_API_URL - Backend API URL (e.g., https://api.example.com)
     • NEXT_PUBLIC_APP_URL - Frontend URL (auto-set by Vercel)

3. Build Settings

   • Build Command: pnpm build
   • Output Directory: .next (auto-detected)

Step 3: Deploy

Click Deploy to build and deploy your Next.js application.

Deploying the API

Step 1: Create API Project

1. Click Add New Project in your Vercel dashboard
2. Select the same repository
3. Set Root Directory to apps/api

Step 2: Configure API

1. Framework Detection

   • Vercel may not auto-detect Express.js
   • Ensure package.json at apps/api/package.json has correct exports

2. Environment Variables

   • Add all required environment variables:
     • DATABASE_URL - PostgreSQL connection string
     • BETTER_AUTH_SECRET - Authentication secret
     • GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET
     • RESEND_TOKEN - Email service API key
     • UPSTASH_REDIS_REST_URL and token - Rate limiting

3. Build Settings

   • Build Command: pnpm build
   • Output Directory: Leave empty or set to dist
   • Serverless Function: Node.js runtime

Step 3: Deploy

Click Deploy to deploy your Express.js API as Vercel Functions.

Environment Variables Reference

All applications share these core variables:

Post-Deployment

Verify Applications

1. Test Web Application

   • Visit the provided Vercel URL
   • Verify authentication flows
   • Test API connectivity

2. Test API Endpoints

   • Use curl or Postman to test endpoints
   • Verify database connectivity
   • Check rate limiting works

Database Migrations

Run database migrations after deploying API:

pnpm db:migrate

Or use a custom build step in Vercel:

cd apps/api && npm run db:migrate && npm run build

Custom Domains

1. Go to your project Settings → Domains
2. Add your custom domain
3. Follow DNS configuration steps

Monitoring

Monitor your deployments:

• Analytics - View traffic and performance
• Logs - Check build and runtime logs
• Deployments - Toggle between versions
• Preview URLs - Test pull requests automatically

Troubleshooting

Build Fails with Module Not Found

Ensure pnpm configuration is correct:

• pnpm-workspace.yaml exists at root
• All workspace dependencies are installed: pnpm install

Environment Variables Not Loading

• Verify variables are set in Vercel dashboard
• Check variable names exactly match your code
• Redeploy after updating variables
• For public variables, prefix with NEXT_PUBLIC_

API Not Connecting

• Verify API_URL matches deployed API domain
• Check CORS configuration in Express app
• Ensure ALLOWED_ORIGINS includes web domain

Next Steps

• Set up GitHub integration for preview deployments
• Configure custom domains and SSL
• Enable Analytics for performance monitoring
• Set up error tracking