From Lovable to Production: Complete Migration Guide

Lovable makes it incredibly easy to build beautiful web applications. But when you're ready for production, you need a proper deployment strategy. Here's how to do it right.

Understanding Lovable's Output

Lovable generates real, production-ready code:

Frontend:

• React, Vue, or Svelte
• TypeScript by default
• Tailwind CSS for styling
• Modern component architecture

Backend:

• RESTful APIs
• Supabase integration
• Authentication logic
• Database queries

Infrastructure:

• Environment configuration
• Deployment scripts
• Package management
• Build tooling

The key: it's real code you can export and own.

Step 1: Export from Lovable

Via GitHub Integration

1. Connect GitHub:

   • Click "Export" in Lovable dashboard
   • Authorize GitHub access
   • Choose repository name
   • Select organization (if applicable)

2. Initial Export:

   # Lovable creates repository with:
   ├── src/              # Your application code
   ├── public/           # Static assets
   ├── .env.example      # Environment template
   ├── package.json      # Dependencies
   ├── README.md         # Setup instructions
   └── vercel.json       # Deployment config (if using Vercel)
   

3. Clone Locally:

   git clone https://github.com/yourusername/your-app.git
   cd your-app
   npm install
   

Via Direct Download

If not using GitHub integration:

1. Download ZIP from Lovable
2. Extract to your workspace
3. Initialize Git:

   git init
   git add .
   git commit -m "Initial commit from Lovable"
   

Step 2: Environment Setup

Create .env File

Lovable provides .env.example. Copy and fill it:

cp .env.example .env.local

Typical variables:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-key

# Stripe (if used)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

# Other APIs
OPENAI_API_KEY=sk-...
SENDGRID_API_KEY=SG...

Local Development

# Install dependencies
npm install

# Run development server
npm run dev

# Open browser
open http://localhost:3000

Common issues:

• Missing environment variables → Check .env.local
• Port already in use → Kill process or change port
• Module not found → Delete node_modules and npm install again

Step 3: Choose Hosting Platform

Option A: Vercel (Recommended)

Why Vercel?

• Zero configuration for Next.js/React
• Automatic HTTPS and CDN
• Preview deployments for every PR
• Edge functions for backend
• Generous free tier

Setup:

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy
vercel

# Production deploy
vercel --prod

Environment variables:

1. Go to Vercel dashboard → Your project
2. Settings → Environment Variables
3. Add all variables from .env.local
4. Redeploy: vercel --prod

Custom domain:

1. Go to Domains tab
2. Add your domain
3. Update DNS records as shown
4. Wait for SSL certificate (automatic)

Option B: Netlify

Setup:

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Initialize
netlify init

# Deploy
netlify deploy --prod

Build settings:

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Option C: Railway

Setup:

1. Go to railway.app
2. Connect GitHub repository
3. Railway auto-detects Next.js
4. Add environment variables
5. Deploy automatically on push

Database (if needed):

1. Click "New" → "Database" → "PostgreSQL"
2. Railway provides DATABASE_URL
3. Use in your app

Step 4: Database Migration

Lovable typically uses Supabase. Two paths:

Path A: Keep Using Supabase

Pros:

• No migration needed
• Generous free tier
• Built-in auth, storage, real-time
• Easy to use

Setup:

1. Keep your existing Supabase project
2. Update environment variables in production
3. Enable Row Level Security (RLS)
4. Set up database backups

Production settings:

-- Enable RLS on all tables
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Create policies
CREATE POLICY "Users can read own data"
  ON users FOR SELECT
  USING (auth.uid() = id);

CREATE POLICY "Users can update own data"
  ON users FOR UPDATE
  USING (auth.uid() = id);

Path B: Migrate to Different Database

If you want to move away from Supabase:

1. Export data:

# From Supabase dashboard:
# Database → Backups → Download
# Or use SQL:
pg_dump -h your-project.supabase.co -U postgres -d postgres > backup.sql

2. Set up new database:

• PlanetScale: MySQL, serverless, great scaling
• Neon: Postgres, serverless, branching
• Railway Postgres: Simple, hosted Postgres
• AWS RDS: Traditional, enterprise-grade

3. Import data:

psql $NEW_DATABASE_URL < backup.sql

4. Update connection string:

DATABASE_URL=postgresql://user:pass@new-host:5432/dbname

Step 5: Authentication Setup

Lovable usually integrates Supabase Auth. Production setup:

Email Authentication

Configure:

1. Supabase Dashboard → Authentication → Providers
2. Enable Email provider
3. Configure email templates (verification, reset password)
4. Set redirect URLs for production domain

Custom domain emails:

// Update email templates to use your domain
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password',
  options: {
    emailRedirectTo: 'https://yourdomain.com/auth/callback'
  }
})

Social Authentication

Google:

1. Google Cloud Console → Create OAuth 2.0 credentials
2. Add production domain to authorized URLs
3. Copy Client ID and Secret to Supabase

GitHub:

1. GitHub Settings → Developer Settings → OAuth Apps
2. Create new app with production callback URL
3. Copy Client ID and Secret to Supabase

Configuration:

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://yourdomain.com/auth/callback'
  }
})

Step 6: API Integration

Stripe (if applicable)

Development → Production:

# Development
STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

# Production
STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...

Webhook setup:

1. Stripe Dashboard → Developers → Webhooks
2. Add endpoint: https://yourdomain.com/api/webhooks/stripe
3. Select events to listen for
4. Add webhook secret to environment variables

Testing:

# Install Stripe CLI
brew install stripe/stripe-cli/stripe

# Forward webhooks to local
stripe listen --forward-to localhost:3000/api/webhooks/stripe

# Trigger test events
stripe trigger payment_intent.succeeded

Other APIs

SendGrid (email):

// Use production API key
const sgMail = require('@sendgrid/mail')
sgMail.setApiKey(process.env.SENDGRID_API_KEY)

OpenAI (if used):

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
})

Step 7: Performance Optimization

Image Optimization

Next.js Image Component:

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // For above-the-fold images
/>

Cloudinary (recommended):

// Auto-optimize images through Cloudinary
<Image
  src={`https://res.cloudinary.com/${cloudName}/image/upload/f_auto,q_auto/${publicId}`}
  alt="Optimized image"
/>

Code Splitting

Next.js handles this automatically, but you can optimize:

// Lazy load heavy components
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false // Don't render on server if not needed
})

Caching Strategy

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ]
  }
}

Step 8: Monitoring & Analytics

Error Tracking (Sentry)

npm install @sentry/nextjs

// sentry.client.config.js
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 0.1
})

Analytics (Vercel Analytics)

npm install @vercel/analytics

// _app.tsx or layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

Uptime Monitoring

Free options:

• UptimeRobot: 50 monitors free
• BetterUptime: Clean interface, status pages
• Pingdom: Free tier available

Step 9: Security Checklist

• HTTPS enabled (automatic on Vercel/Netlify)
• Environment variables secured
• Database Row Level Security enabled
• API rate limiting configured
• CORS properly configured
• Security headers set
• Secrets rotated from development
• Error messages don't leak info

Step 10: CI/CD Pipeline

GitHub Actions

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm ci
      - run: npm test
      - run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          vercel-args: '--prod'

Common Issues & Solutions

Issue: Build fails with "Module not found"

Solution:

rm -rf node_modules package-lock.json
npm install

Issue: Environment variables not loading

Solution:

• Vercel: Prefix with NEXT_PUBLIC_ for client-side
• Redeploy after adding variables

Issue: Supabase connection fails

Solution:

• Check if IP is allowlisted
• Verify connection pooling settings
• Use connection pooler URL for serverless

Issue: Images not loading

Solution:

• Configure next.config.js with image domains:

module.exports = {
  images: {
    domains: ['your-bucket.supabase.co', 'res.cloudinary.com']
  }
}

Maintenance Schedule

Daily:

• Monitor error rates (Sentry)
• Check uptime status
• Review user feedback

Weekly:

• Check dependency updates
• Review performance metrics
• Analyze user behavior

Monthly:

• Update dependencies
• Review and optimize queries
• Security scan
• Cost optimization review

Conclusion

Migrating Lovable apps to production is straightforward because you're working with quality code from the start. The key steps:

1. Export and set up locally
2. Choose hosting (Vercel recommended)
3. Configure environment properly
4. Set up monitoring
5. Test thoroughly before launch

Unlike other vibe coding platforms, Lovable gives you a head start with professional-quality code. You're not fighting technical debt—you're just taking care of deployment details.

---

Need help deploying your Lovable app to production? We'll handle the entire migration process. Get deployment assistance.