Deploying Vibe-Coded Apps

You've built something with AI assistance—now let's get it live. This guide covers deploying to popular platforms with best practices for AI-generated code.

Pre-Deployment Checklist

Before deploying, ensure:

• [ ] All TypeScript errors are resolved
• [ ] Environment variables are documented
• [ ] No hardcoded secrets in code
• [ ] Build completes locally (npm run build)
• [ ] Tests pass (npm test)
• [ ] README has setup instructions

Deploying to Vercel

Best for: Next.js, React, static sites

Quick Deploy

1. Push code to GitHub
2. Go to vercel.com
3. Click "Import Project"
4. Select your repository
5. Configure environment variables
6. Click "Deploy"

Environment Variables

# Required for Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...  # Server-side only

# Required for Solana
NEXT_PUBLIC_SOLANA_RPC_URL=https://api.mainnet-beta.solana.com
NEXT_PUBLIC_SOLANA_NETWORK=mainnet-beta

vercel.json Configuration

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "regions": ["iad1"],
  "env": {
    "NEXT_PUBLIC_APP_URL": "https://your-app.vercel.app"
  }
}

Deploying to Render

Best for: Full-stack apps, background jobs, databases

Web Service Setup

1. Go to render.com
2. Click "New" → "Web Service"
3. Connect your GitHub repo
4. Configure:
   • Runtime: Node
   • Build Command: npm install && npm run build
   • Start Command: npm start

render.yaml Blueprint

services:
  - type: web
    name: my-app
    runtime: node
    buildCommand: npm install && npm run build
    startCommand: npm start
    envVars:
      - key: NODE_ENV
        value: production
      - key: NEXT_PUBLIC_SUPABASE_URL
        sync: false
      - key: NEXT_PUBLIC_SUPABASE_ANON_KEY
        sync: false
    autoDeploy: true

Common Deployment Issues

Build Failures

Issue: Module not found errors

# Check for case-sensitivity issues
# Linux servers are case-sensitive, Windows/Mac aren't
import { Button } from '@/components/ui/Button'  # Wrong
import { Button } from '@/components/ui/button'  # Correct

Issue: TypeScript errors in build

# Fix all TS errors before deploying
npm run build  # Run locally first

# Or temporarily ignore (not recommended)
# next.config.js
module.exports = {
  typescript: {
    ignoreBuildErrors: true,  // Only for emergencies!
  },
}

Environment Variable Issues

Issue: Variables undefined at runtime

// Client-side variables MUST start with NEXT_PUBLIC_
const url = process.env.SUPABASE_URL;  // undefined on client
const url = process.env.NEXT_PUBLIC_SUPABASE_URL;  // works

Issue: Variables not updating

# Redeploy after changing env vars
# Vercel: Trigger new deployment
# Render: Manual deploy or push new commit

Runtime Errors

Issue: API routes returning 500

// Add error handling to all API routes
export async function GET() {
  try {
    const data = await fetchData();
    return Response.json(data);
  } catch (error) {
    console.error('API error:', error);
    return Response.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}

Post-Deployment Checklist

After deploying:

• [ ] Test all pages load correctly
• [ ] Verify authentication works
• [ ] Test form submissions
• [ ] Check API endpoints respond
• [ ] Verify environment variables are set
• [ ] Test on mobile devices
• [ ] Set up error monitoring (Sentry)
• [ ] Configure custom domain (optional)

Monitoring & Debugging

Vercel

• View logs: Dashboard → Project → Logs
• Analytics: Dashboard → Analytics
• Edge functions: Dashboard → Functions

Render

• View logs: Dashboard → Service → Logs
• Shell access: Dashboard → Service → Shell
• Metrics: Dashboard → Service → Metrics

Rollback Strategy

If something breaks:

Vercel

1. Go to Deployments tab
2. Find last working deployment
3. Click "..." → "Promote to Production"

Render

1. Go to Events tab
2. Find last working deploy
3. Click "Rollback"

Need help deploying your app? Get expert assistance on CoderVibez.