Deploy to Vercel

Complete guide to deploying your ArchitectGBT project to Vercel.

Prerequisites

A Vercel account
Your project pushed to GitHub
All required API keys ready

Quick Deploy

The fastest way to deploy:

Push your code to GitHub
Go to vercel.com/new
Import your repository
Configure environment variables (see below)
Click Deploy

Your app will be live in under 2 minutes! 🚀

Step-by-Step Guide

1. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

2. Import to Vercel

Go to vercel.com/new
Click Import Git Repository
Select your repository
Vercel will auto-detect Next.js settings

3. Configure Environment Variables

Add these variables in Vercel's project settings:

Required Variables

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
CLERK_SECRET_KEY=sk_live_...
CLERK_WEBHOOK_SECRET=whsec_...

# Supabase Database
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

# AI API
ANTHROPIC_API_KEY=sk-ant-...

# Stripe (if using payments)
STRIPE_SECRET_KEY=sk_live_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# App URL
NEXT_PUBLIC_APP_URL=https://your-domain.vercel.app

Note: Use production keys, not test keys!

4. Deploy

Click Deploy and wait ~1 minute for the build to complete.

Post-Deployment Setup

Update Clerk Settings

Go to Clerk Dashboard
Add your Vercel domain to allowed origins
Update webhook URL to: https://your-domain.vercel.app/api/webhooks/clerk

Update Stripe Settings

Go to Stripe Dashboard
Add webhook endpoint: https://your-domain.vercel.app/api/webhooks/stripe
Select all checkout and subscription events
Copy the signing secret to Vercel env vars

Update Supabase Settings

Go to Supabase Dashboard
Settings → API → Add your Vercel domain to allowed origins

Custom Domain

To use your own domain:

Go to Vercel project → Settings → Domains
Add your domain (e.g., app.yourdomain.com)
Update DNS records as instructed
SSL certificate is automatically provisioned

Update NEXT_PUBLIC_APP_URL to your custom domain.

Monitoring & Logs

View your deployment:

Logs: Vercel Dashboard → Logs
Analytics: Built-in with Vercel Analytics
Errors: Check Runtime Logs for issues

Environment Management

Vercel has 3 environments:

Production: Main branch deployments
Preview: Pull request deployments
Development: Local development

Set environment variables for each as needed.

Troubleshooting

Build Fails

Check the build logs in Vercel:

Verify all dependencies are in package.json
Check for TypeScript errors
Ensure Node.js version is 18+

Environment Variable Issues

Make sure all required variables are set
Check for typos in variable names
Redeploy after adding new variables

Webhook Errors

Verify webhook URLs in Clerk/Stripe dashboards
Check webhook signing secrets match
Review function logs for errors

Database Connection Failed

Verify Supabase credentials
Check if IP is whitelisted (Vercel IPs are dynamic)
Ensure service role key is correct

Automatic Deployments

Vercel automatically deploys when you:

Push to main branch (production)
Create a pull request (preview)

Disable in Settings → Git if needed.

Rollback

To rollback to a previous deployment:

Go to Deployments
Find the working deployment
Click ••• → Promote to Production

Performance Tips

Enable Vercel Edge Network for global distribution
Use ISR (Incremental Static Regeneration) where possible
Monitor Core Web Vitals in Vercel Analytics
Set up proper caching headers

Cost Management

Hobby Plan: Free for personal projects
Pro Plan: $20/month for production apps
Monitor usage in Settings → Usage

Need Help?

Your app is now live! Share it with the world 🌍

Quick Links