How to Move a Lovable App to Vercel

Before you start: what you need ready

Before touching Vercel, inventory everything your app depends on. A missed environment variable or skipped Supabase origin update will cause a silent failure on first deploy that wastes an hour of debugging. Run through this checklist before you open the Vercel dashboard.

1. Confirm Lovable preview is working and all features are stable — don't migrate a broken app.
2. Open Lovable Project Settings → Environment and list every variable (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, and any VITE_STRIPE_* or other keys).
3. Confirm your GitHub repo exists and Lovable is connected — check Project Settings → GitHub.
4. Note your Supabase project reference (the alphanumeric string in your project URL at supabase.com).
5. If your app takes payments, note your Stripe webhook endpoint URL — you will need to update it after DNS cutover.
6. Decide whether you are keeping the same Supabase project (easiest) or migrating to a new one (requires extra steps).

How does Vercel compare to Cloudflare and Netlify for a Lovable app?

Vercel is the most popular destination for Lovable apps because it auto-detects Vite and React, offers instant rollbacks, and has a generous free tier. The key differences versus the other two hosts are runtime model and build-time env-var scoping — both matter for Lovable apps that rely on VITE_ prefixed variables baked in at build time.

How do I connect my Lovable project to GitHub?

In the Lovable editor, open Project Settings and navigate to the GitHub section. Connect your GitHub account and create a new repository or link an existing one. Lovable will push your current code there. All future changes you make in Lovable will be committed automatically to that branch.

1. Open your Lovable project and click the Settings gear icon.
2. Select GitHub Integration → Connect GitHub Account.
3. Authorise the Lovable GitHub app when prompted.
4. Create a new repository or select an existing one.
5. Click Push to confirm. The initial push may take 30–60 seconds.

How do I deploy the GitHub repo to Vercel?

Once the repository exists, go to vercel.com, import the repo, and let Vercel auto-detect the Vite or React build settings. You will be prompted to add environment variables before the first deploy — this is where most migrations break if you skip the env-var step.

1. Log in to vercel.com and click Add New Project.
2. Select Import Git Repository and pick your Lovable repo.
3. Vercel auto-detects Vite/React. Confirm the Framework Preset is Vite (or React if Vite is not shown).
4. Before clicking Deploy, go to Environment Variables and add every variable from Lovable Project Settings → Environment.
5. The critical ones: VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY.
6. Click Deploy. The first build typically takes 60–90 seconds.

Why does my Vercel deploy show a blank page?

A blank page on the first Vercel deploy almost always means one or more VITE_ environment variables are missing. Vercel builds the app at deploy time — if the variables are not present, the Supabase client cannot initialise and the app renders nothing. Open the Vercel build logs, search for 'undefined', and confirm each variable is set.

After adding the missing variables in Vercel, trigger a redeploy: go to Deployments → the latest deploy → Redeploy. This forces a fresh build with the new environment. Do not just refresh the browser — the app is baked at build time, so a new build is required.

Common Vercel deploy errors and fixes

Most Lovable-to-Vercel migration failures fall into a small set of repeating error patterns. The table below maps the error you see in the browser or Vercel build log to the most likely cause and the fastest fix. Work through these before opening a support ticket.

How do I update Supabase to allow my Vercel domain?

Supabase auth restricts which origins can authenticate users. After deploying to Vercel, you must add your *.vercel.app URL and your custom domain to the Supabase allowed-origins list. Skipping this step causes all auth calls to return 403 or redirect incorrectly, even when env vars are correct.

1. In the Supabase dashboard, open Authentication → URL Configuration.
2. Add https://<your-project>.vercel.app to Site URL or Redirect URLs.
3. After DNS cutover, add your real domain (e.g., https://myapp.com).
4. Save and redeploy on Vercel (or wait for the next deploy trigger).

What about Supabase edge functions and auth password hashes?

Edge functions live in your Supabase project, not in Lovable's hosting — so they continue to work as long as you are using the same Supabase project. Auth password hashes, however, cannot be exported. If you are migrating users to a new Supabase project, trigger a password-reset email for all users before DNS cutover so no one is locked out.

How do I point my custom domain to Vercel?

In Vercel, go to your project's Domains settings and add your custom domain. Vercel will show you a CNAME or A record to add in your DNS provider. SSL is provisioned automatically via Let's Encrypt, usually within minutes of the DNS change propagating. Keep your Lovable-hosted URL running until DNS propagation is complete.

1. In Vercel, open Project → Settings → Domains → Add.
2. Enter your domain (e.g., myapp.com) and click Add.
3. Copy the CNAME or A record Vercel provides.
4. In your DNS provider, add the record. TTL of 300 speeds propagation.
5. Wait for propagation (usually 5–30 minutes) and verify HTTPS loads.
6. Update Supabase allowed origins to include your new domain.

How do I roll back if the Vercel migration breaks?

Vercel keeps every deploy permanently and lets you promote any previous build to production in one click — no new build required. If your DNS cutover goes wrong, you can switch back to the last stable build in seconds while you diagnose the root cause, then re-cut DNS once the issue is resolved.

1. In Vercel, go to your project → Deployments.
2. Find the last known-good deployment and click the three-dot menu → Promote to Production.
3. If the issue is purely DNS (not a code or env-var problem), revert your CNAME or A record in your DNS provider while Vercel serves the old build.
4. Once stable, check Vercel build logs and env-var settings before re-attempting cutover.

Post-migration smoke test for Vercel

A successful Vercel build is not the same as a working app. Run this checklist against your *.vercel.app preview URL before cutting DNS — Vercel keeps every preview URL permanently, so you can test the full stack including auth, Supabase data, and Stripe webhooks without exposing anything to live users.

1. Sign up with a new test account — confirm the confirmation email arrives and the account activates.
2. Sign in with an existing account — confirm the Vercel deployment's Supabase session persists across page reloads.
3. Reload a nested route directly (e.g., /dashboard/settings) — confirm Vercel's SPA rewrites serve index.html instead of a 404.
4. If your app uses payments, trigger a Stripe test charge and confirm the webhook URL now points to the Vercel domain.
5. Check the browser console for errors about undefined env vars — the most common Vercel-specific cause of a silent blank page.
6. Verify HTTPS is active on your custom domain after DNS propagation and that the Supabase Site URL is updated.