How to Migrate from Lovable Cloud to Vercel (and Take Control of Your Stack)

No matter how good lovable is, the Lovable cloud is a serious platform lockin and many vibe coders are reporting ‘random’ $$ in subscription for their vibe coded apps hosted in Lovable cloud (which offers no data point on infrastructure cost).

The Platform Lock-in Problem

When you build on Lovable, you’re getting an incredible developer experience. The AI-powered development, instant deployments, and seamless integrations make it feel like magic. But there’s a hidden cost: platform lock-in.

Here’s what happens when you stay on Lovable Cloud:

• Their Supabase, not yours: Your database lives on Lovable’s Supabase instance. If you leave, you lose access to your data.Importantly, it doesn’t support many features like OTP validation (saved you minimum 50 credits and 30 mins of back and forth prompts!)
• Limited customization: You’re constrained by Lovable’s infrastructure decisions.
• Vendor dependency: Pricing changes, feature limitations, or service issues affect your production app.
• Edge function limitations: Your serverless functions are tied to their deployment pipeline.

The good news? You can migrate out. And it’s not as hard as you think.

Why Migrate to Vercel?

Vercel offers several advantages once you’re ready to take control:

1. Full ownership: Your database, your functions, your infrastructure
2. Flexibility: Deploy however you want, use any services you need
3. Scalability: Enterprise-grade infrastructure when you need it
4. Cost control: You choose your hosting tier and services
5. Independence: No vendor lock-in for your production app

The Migration Architecture

Here’s what we’re moving from and to:

Before (Lovable Cloud):

Lovable → Lovable's Supabase → Lovable's Edge Functions → Lovable's Hosting

After (Self-hosted):

GitHub → Your Supabase → Your Edge Functions → Vercel

You’ll still use Lovable for development (it’s that good!), but your production app runs independently.

Prerequisites

Before you start, make sure you have:

• [ ] A GitHub account (free)
• [ ] A Vercel account (free tier available)
• [ ] A Supabase account (free tier available)
• [ ] Basic command line familiarity (or willingness to learn!)
• [ ] Access to your API keys (Stripe, Google APIs, etc.)

Step 1: Connect Your Lovable Project to GitHub

This is the easiest step and the foundation for everything else.

1. In your Lovable project, go to Settings
2. Find the GitHub integration option
3. Connect your GitHub account
4. Authorize Lovable to create/push to a repository
5. Lovable will create a new repo with all your code

Why this matters: Once on GitHub, you can deploy anywhere. This breaks the first layer of lock-in.

Step 2: Deploy Your Frontend to Vercel

Now let’s get your app running on Vercel.

Connect GitHub to Vercel

1. Go to vercel.com and sign up
2. Click “Add New Project”
3. Click “Import Git Repository”
4. Select your Lovable project from GitHub
5. Click “Import”

Configure Build Settings

Vercel is usually smart enough to auto-detect your framework. But if needed:

• Framework Preset: Vite (or whatever you’re using)
• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install --legacy-peer-deps (if you hit dependency errors)

Deploy

Click “Deploy” and wait 1-3 minutes. You’ll get a live URL like your-app.vercel.app.

Important: Your app won’t work yet – it’s still pointing to Lovable’s Supabase. We’ll fix that next.

Step 3: Set Up Your Own Supabase

This is where you take back control of your data.

Create Your Supabase Project

1. Go to supabase.com
2. Sign up/log in with GitHub
3. Click “New Project”
4. Fill in:
   • Name: Your project name
   • Database Password: Create a strong password and save it securely
   • Region: Choose one close to your users
5. Click “Create new project”
6. Wait 2-3 minutes for provisioning

Migrate Your Database Structure

Your GitHub repo contains migration files in supabase/migrations/. These are SQL files that define your database structure.

Option A: Using Supabase SQL Editor (No CLI needed)

1. Go to your Supabase dashboard → SQL Editor
2. Click “New query”
3. Open each migration file from your GitHub repo (oldest first)
4. Copy the SQL content
5. Paste into the SQL Editor
6. Click “Run”
7. Repeat for each migration file in chronological order

Option B: Using Supabase CLI (Faster for many migrations)

First, install the CLI:

# On Mac
brew install supabase/tap/supabase

# On Windows
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

# Or via npm
npm install supabase --save-dev

Then migrate:

# Navigate to your project
cd your-project-folder

# Login to Supabase
npx supabase login

# Link to your project (get ref ID from Supabase Settings → General)
npx supabase link --project-ref YOUR_PROJECT_REF_ID

# Push all migrations
npx supabase db push

Export Data from Lovable (If Needed)

If you have production data on Lovable’s Supabase:

1. Contact Lovable support and request a database export
2. They should provide you with a SQL dump or CSV exports
3. Import this data into your new Supabase using the SQL Editor or psql

Note: If you’re just starting out or can recreate your data, you might skip this step.

Step 4: Deploy Your Edge Functions

Your edge functions (serverless functions) need to move to your Supabase too.

Set Up Environment Secrets

Your functions need API keys. Set them using the CLI:

# Example secrets (use your actual keys)
npx supabase secrets set STRIPE_SECRET_KEY=sk_live_...
npx supabase secrets set OPENAI_API_KEY=sk-proj-...
npx supabase secrets set GOOGLE_CLIENT_ID=your_client_id
npx supabase secrets set GOOGLE_CLIENT_SECRET=your_secret
npx supabase secrets set SENDY_URL=https://your-sendy.com
npx supabase secrets set SENDY_API_KEY=your_key
npx supabase secrets set SENDY_LIST_ID=your_list_id

Find your secrets:

• Stripe: dashboard.stripe.com/apikeys
• OpenAI: platform.openai.com/api-keys
• Google: console.cloud.google.com/apis/credentials

Deploy All Functions

npx supabase functions deploy

This deploys all your edge functions at once. You’ll see each function being deployed with a URL.

Step 5: Update Vercel Environment Variables

Now connect your Vercel frontend to your new Supabase backend.

Get Your Supabase Credentials

In Supabase Dashboard:

1. Go to Settings → API
2. Copy:
   • Project URL (your SUPABASE_URL)
   • anon public key (your publishable/anon key)

Add to Vercel

1. Go to your Vercel project → Settings → Environment Variables
2. Add these variables (adjust prefix based on your framework):

For Vite:

VITE_SUPABASE_URL = https://your-project.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY = eyJhbG...

For Next.js:

NEXT_PUBLIC_SUPABASE_URL = https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = eyJhbG...

For Create React App:

REACT_APP_SUPABASE_URL = https://your-project.supabase.co
REACT_APP_SUPABASE_ANON_KEY = eyJhbG...

3. Add any other frontend secrets:

VITE_STRIPE_PUBLISHABLE_KEY = pk_live_...
VITE_GOOGLE_CLIENT_ID = your_google_client_id

4. Make sure to check all three environments (Production, Preview, Development)
5. Click “Save”

Redeploy

Go to Deployments → Click the “…” menu → “Redeploy”

Your app should now be fully functional on Vercel with your own Supabase! 🎉

Step 6: Test Everything

Before celebrating, test your app thoroughly:

• [ ] User authentication (sign up, log in, log out)
• [ ] Database reads and writes
• [ ] Payment flows (Stripe checkout)
• [ ] Third-party integrations (Google Calendar, etc.)
• [ ] Email sending
• [ ] Any scheduled tasks or webhooks

Step 7: Set Up a Custom Domain (Optional)

Instead of your-app.vercel.app, use your own domain:

1. Go to Vercel project → Settings → Domains
2. Add your domain (e.g., app.yourdomain.com)
3. Follow the DNS instructions (add CNAME or A records)
4. Wait for DNS propagation (5 minutes to 48 hours)
5. Vercel automatically provisions SSL certificates

The Ongoing Workflow

Here’s how development works after migration:

Frontend Changes

1. Make changes in Lovable
2. Lovable pushes to GitHub automatically
3. Vercel auto-deploys
4. ✅ Fully automatic

Database Changes

1. Make schema changes in Lovable
2. Lovable generates migration files → pushes to GitHub
3. Manually run: git pull && npx supabase db push
4. ⚠️ Requires manual step

Edge Function Changes

1. Update functions in Lovable
2. Lovable pushes to GitHub
3. Manually run: git pull && npx supabase functions deploy
4. ⚠️ Requires manual step

Pro tip: You can keep using Lovable for rapid development while maintaining full control of your production infrastructure.

Common Issues and Solutions

Issue: “npm install” fails on Vercel

Solution: Override the install command in Vercel settings:

npm install --legacy-peer-deps

Issue: Edge functions can’t access secrets

Solution: Make sure you set the secrets using npx supabase secrets set, not as environment variables.

Issue: Database connection errors

Solution: Double-check your Supabase URL and keys in Vercel. Make sure you’re using the right prefix (VITE_, NEXT_PUBLIC_, etc.).

Issue: CORS errors when calling edge functions

Solution: Your edge functions should already have CORS headers, but if not, add:

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
}

Issue: Git authentication fails

Solution: Use a GitHub Personal Access Token or set up SSH keys instead of password authentication.

Cost Comparison

Let’s talk numbers (as of 2024):

Lovable Cloud:

• Development tier: ~$20-50/month
• Production tier: ~$100-300/month
• Scaling costs can increase significantly

Self-hosted (Vercel + Supabase):

• Vercel: Free tier (generous) or $20/month for Pro
• Supabase: Free tier (up to 500MB DB, 2GB file storage) or $25/month for Pro
• Total: $0-45/month for most projects

For most indie projects and startups, you can run on the free tier indefinitely. You only pay when you scale.

When Should You Migrate?

Migrate now if:

• You’re planning to launch to real users
• You need cost predictability
• You want control over your infrastructure
• You’re worried about vendor lock-in
• You need specific integrations Lovable doesn’t support

Stay on Lovable if:

• You’re still in rapid prototyping phase
• You haven’t launched yet
• You value convenience over control
• You don’t have time for DevOps

Best of both worlds: Use Lovable for development, self-host for production.

Final Thoughts

Migrating from Lovable Cloud to Vercel isn’t just about avoiding lock-in. It’s about taking ownership of your stack while still leveraging the incredible development experience Lovable provides.

You get:

• ✅ Lovable’s AI-powered development speed
• ✅ Full control over your production infrastructure
• ✅ The flexibility to scale and customize as needed
• ✅ Independence from any single vendor

The migration takes a few hours, but it’s an investment in your app’s long-term independence and flexibility.

Resources

• Vercel Documentation
• Supabase Documentation
• Supabase CLI Reference
• GitHub Personal Access Tokens

---

Ready to take the leap? Start with Step 1 and work your way through. The freedom is worth it.

Have questions or run into issues? The Vercel and Supabase communities are incredibly helpful – you’re not alone in this migration journey.