Skip to main content

Deployment Guide

Uxie is designed to deploy seamlessly to Vercel with minimal configuration. This guide covers production deployment, environment setup, database migrations, and troubleshooting.

Deploying to Vercel

Quick Deploy

The fastest way to deploy Uxie:
1

Import Repository

  1. Go to vercel.com and sign in
  2. Click Add New → Project
  3. Import your Git repository (GitHub, GitLab, or Bitbucket)
2

Configure Environment Variables

Add all required environment variables (see section below)
3

Deploy

Click Deploy and Vercel will:
  • Install dependencies
  • Run type checking
  • Build the application
  • Deploy to production

Vercel Configuration

Uxie uses default Vercel settings with Next.js 14. No vercel.json required. Build Settings:
  • Framework Preset: Next.js
  • Build Command: next build (default)
  • Output Directory: .next (default)
  • Install Command: pnpm install
  • Node Version: 18.x (recommended)
To use pnpm (recommended):
  1. Go to Project Settings → General
  2. Set Install Command to pnpm install
  3. Vercel will auto-detect pnpm-lock.yaml

Automatic Deployments

Production

  • Triggered by pushes to main branch
  • Uses production environment variables
  • Deployed to uxie.vercel.app

Preview

  • Triggered by PRs and branch pushes
  • Uses preview environment variables
  • Unique URL per deployment
  • Great for testing before merge

Environment Variables

Required Production Variables

Add these in Vercel Dashboard → Settings → Environment Variables:
DATABASE_URL="postgresql://user:password@host:port/database"
Important: Use your production Supabase database URL, not localhost.Enable connection pooling for serverless:
DATABASE_URL="postgresql://user:password@host:port/database?pgbouncer=true"
NEXTAUTH_SECRET="<generate-with-openssl-rand>"
NEXTAUTH_URL="https://uxie.vercel.app"

GOOGLE_CLIENT_ID="your-client-id.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="your-client-secret"
Important: Update Google OAuth redirect URIs to include:
  • https://uxie.vercel.app/api/auth/callback/google
UPLOADTHING_TOKEN="your-production-token"
Create a separate UploadThing app for production to isolate uploads.
# Pinecone (Vector Database)
PINECONE_API_KEY="your-api-key"
PINECONE_ENVIRONMENT="your-environment"

# HuggingFace (Embeddings)
HUGGINGFACE_API_KEY="hf_..."

# Google Gemini (LLM)
GOOGLE_GENERATIVE_AI_API_KEY="your-api-key"
Cost Considerations:
  • HuggingFace: Free tier sufficient for moderate usage
  • Pinecone: Free tier includes 1 index with 100k vectors
  • Google Gemini: Pay-per-token, 2.5 Flash is cost-effective
# Liveblocks (Collaboration - currently disabled)
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY="pk_..."

# Node Environment
NODE_ENV="production"

Environment Variable Security

Sensitive Keys

Never commit .env to git.Ensure .gitignore includes:
.env
.env.local
.env.*.local

Public Variables

Only NEXT_PUBLIC_* variables are exposed to browser.Keep API keys private unless intentionally public.

Managing Multiple Environments

Vercel supports three environments:
EnvironmentBranchUse Case
ProductionmainLive app for users
PreviewAny branchTesting PRs
DevelopmentLocalLocal development
Set variables per environment in Vercel dashboard.

Database Migrations

Initial Production Setup

1

Create Production Database

  1. Create new Supabase project for production
  2. Note connection string
  3. Enable connection pooling
2

Run Migrations Locally

Set production database URL temporarily:
export DATABASE_URL="postgresql://..."
pnpm prisma migrate deploy
Or push schema directly:
pnpm prisma db push
3

Verify Schema

Check schema with Prisma Studio:
pnpm prisma studio
Development:
# Create migration and apply
pnpm prisma migrate dev --name add_summary_field
Production:
# Apply pending migrations
pnpm prisma migrate deploy
Schema Push (for prototyping):
# Push schema changes without migration files
pnpm prisma db push
Warning: db push can cause data loss. Use migrations in production.

Automated Migrations

Add migration script to package.json:
{
  "scripts": {
    "postinstall": "prisma generate",
    "build": "prisma generate && prisma migrate deploy && next build"
  }
}
Vercel runs these during build:
  1. Generate Prisma Client
  2. Apply pending migrations
  3. Build Next.js app

Schema Changes Workflow

1

Develop Locally

  1. Modify schema.prisma
  2. Run pnpm prisma migrate dev --name description
  3. Test locally
2

Commit Changes

Commit:
  • prisma/schema.prisma
  • prisma/migrations/ directory
git add prisma/
git commit -m "feat: add summary field to documents"
3

Deploy

Push to main branch.Vercel will:
  • Run migrations automatically
  • Build and deploy

Build Optimization

Environment-Specific Optimizations

next.config.mjs includes production optimizations:
const config = {
  reactStrictMode: true,
  swcMinify: true,  // Fast minification
  images: {
    domains: ["lh3.googleusercontent.com", "utfs.io"],
  },
};

Bundle Analysis

Analyze bundle size:
npm install -g @next/bundle-analyzer
Add to next.config.mjs:
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer(config);
Run:
ANALYZE=true pnpm build

Edge Runtime Support

Some API routes use edge runtime for low latency:
export const runtime = 'edge';
export const maxDuration = 30;
Currently used in:
  • /api/chat - AI chat streaming
  • /api/completion - Text completion
  • /api/evaluate - Flashcard evaluation

Monitoring & Troubleshooting

Vercel Analytics

Enable in project settings:
  1. Web Analytics - Page views, performance
  2. Speed Insights - Core Web Vitals
  3. Log Drains - Export logs to external services

Error Tracking

Build Errors

View in Vercel deployment logs:
  • TypeScript errors
  • Linting errors
  • Build failures

Runtime Errors

View in Vercel Functions logs:
  • API route errors
  • Server-side errors
  • Database connection issues

Common Production Issues

Problem: Serverless functions timeout connecting to database.Solution: Enable connection pooling in Supabase:
  1. Get pooled connection string from Supabase dashboard
  2. Update DATABASE_URL in Vercel
  3. Redeploy
DATABASE_URL="postgresql://...?pgbouncer=true"
Problem: Build fails with missing environment variable.Solution:
  1. Check Vercel dashboard → Settings → Environment Variables
  2. Ensure variable is set for correct environment (Production/Preview)
  3. Redeploy
Verify with:
// src/env.mjs
import { createEnv } from "@t3-oss/env-nextjs";

export const env = createEnv({
  server: {
    DATABASE_URL: z.string().url(),
    // ... all required variables
  },
});
Problem: Build fails with “Cannot find module ‘@prisma/client’”.Solution: Ensure postinstall script runs:
{
  "scripts": {
    "postinstall": "prisma generate"
  }
}
Vercel runs this automatically after pnpm install.
Problem: Google OAuth fails with redirect URI error.Solution: Update Google Cloud Console:
  1. Go to console.cloud.google.com
  2. APIs & Services → Credentials
  3. Edit OAuth 2.0 Client
  4. Add authorized redirect URI:
    https://uxie.vercel.app/api/auth/callback/google
    
  5. Save and wait 5 minutes for propagation
Problem: AI features fail with 429 errors.Solution: Implement rate limiting:
  1. Install Upstash Redis:
    pnpm add @upstash/redis @upstash/ratelimit
    
  2. Add to API routes:
    import { Ratelimit } from "@upstash/ratelimit";
    import { Redis } from "@upstash/redis";
    
    const ratelimit = new Ratelimit({
      redis: Redis.fromEnv(),
      limiter: Ratelimit.slidingWindow(10, "1 h"),
    });
    
  3. Add Upstash environment variables to Vercel

Performance Monitoring

Monitor key metrics:
1

Core Web Vitals

  • LCP (Largest Contentful Paint): < 2.5s
  • FID (First Input Delay): < 100ms
  • CLS (Cumulative Layout Shift): < 0.1
2

API Response Times

Check Vercel Functions logs:
  • tRPC calls: < 500ms
  • AI chat: Streaming (1-3s)
  • Vector search: < 200ms
3

Database Performance

Monitor in Supabase dashboard:
  • Query performance
  • Connection pool usage
  • Slow queries

Rollback Strategy

Instant Rollback

Vercel keeps all deployments:
  1. Go to Deployments tab
  2. Find previous working deployment
  3. Click ⋯ → Promote to Production
  4. Instant rollback

Database Rollback

For schema changes:
# Revert last migration
pnpm prisma migrate resolve --rolled-back 20240306_migration_name

# Apply previous migration
pnpm prisma migrate deploy
Warning: Schema rollbacks can cause data loss. Always backup first.

CI/CD Integration

GitHub Actions Example

Automate checks before deploy:
name: CI
on: [pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'pnpm'
      
      - run: pnpm install
      - run: pnpm typecheck
      - run: pnpm lint
      - run: pnpm build
This runs on every PR before Vercel preview deployment.

Production Checklist

Before going live:
1

Environment Variables

  • All production variables set
  • No development URLs/keys
  • OAuth redirect URIs updated
  • Database connection pooling enabled
2

Database

  • Production database created
  • Migrations applied
  • Backup strategy configured
3

Security

  • NEXTAUTH_SECRET is strong and unique
  • All API keys are production keys
  • CORS configured if needed
  • Rate limiting implemented
4

Performance

  • Images optimized
  • Bundle size checked
  • Edge functions where appropriate
  • Caching strategy verified
5

Monitoring

  • Vercel Analytics enabled
  • Error tracking configured
  • Alerts set up

Custom Domain

Add your own domain:
1

Add Domain in Vercel

  1. Go to Settings → Domains
  2. Enter your domain (e.g., uxie.ai)
  3. Click Add
2

Configure DNS

Add DNS records at your registrar:
Type: CNAME
Name: www (or @)
Value: cname.vercel-dns.com
Or use Vercel Nameservers for easier management.
3

Update Environment Variables

Update NEXTAUTH_URL to your domain:
NEXTAUTH_URL="https://yourdomain.com"
4

Update OAuth Redirects

Update Google OAuth redirect URIs to include your domain.

Scaling Considerations

Database

Supabase Limits:
  • Free: 500 MB, 2 GB bandwidth
  • Pro: 8 GB, 50 GB bandwidth
Consider upgrading as users grow.

Vector Database

Pinecone Limits:
  • Free: 1 index, 100k vectors
  • Standard: Multiple indexes, unlimited vectors
Monitor vector count per user.

File Storage

UploadThing Limits:
  • Free: 2 GB
  • Pro: 100 GB+
Implement file size limits per user.

AI API Costs

Google Gemini Pricing:
  • Input: $0.075 / 1M tokens
  • Output: $0.30 / 1M tokens
Implement rate limiting to control costs.

Next Steps

Architecture

Review system architecture for optimization opportunities

Contributing

Learn how to contribute improvements

Build docs developers (and LLMs) love