How to Migrate a Lovable Site to Netlify

Before you start: prerequisites for a Netlify migration

Before you open the Netlify dashboard, inventory everything your Lovable app depends on — environment variables, the Supabase URL and keys, and any client-side routing redirects. A missing variable or skipped redirect causes a silent failure that looks unrelated to what actually went wrong, so work through this prerequisite checklist first.

1. Confirm your Lovable preview is stable — never migrate a broken app.
2. List every variable in Lovable Project Settings → Environment (all VITE_ prefixed keys).
3. Confirm your GitHub repo exists and Lovable has pushed the latest code to it.
4. Check your vite.config.ts for the build output directory — it should be dist for Vite projects.
5. Decide whether you are using the same Supabase project (easiest) or a new one (requires extra steps).
6. If your app uses client-side routing (React Router), note that Netlify needs a _redirects file — you will add it during setup.

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

Netlify, Vercel, and Cloudflare Pages all support Vite and React projects with similar free tiers. The differences that matter for Lovable migrations are: how each host scopes environment variables, how client-side routing is handled, and what happens at build time with VITE_ prefixed variables.

How do I push my Lovable project to GitHub before deploying to Netlify?

Netlify deploys from a GitHub, GitLab, or Bitbucket repository — not from a ZIP or local folder. The first step is connecting Lovable to GitHub so your project has a repo. Once the repo exists, Netlify can watch it and trigger a deploy on every new commit — including commits Lovable makes when you edit in the AI editor.

1. In Lovable, open Project Settings → GitHub.
2. Connect your GitHub account and create a new repository.
3. Click Push to GitHub. Lovable commits your current code.
4. Verify the repo appears at github.com/<your-username>/<repo-name>.

How do I create a new site in Netlify from my Lovable repo?

In the Netlify dashboard, use the Add new site flow to import your GitHub repository. Netlify will attempt to auto-detect the build command and publish directory. For Lovable's Vite-based apps, it usually detects correctly — but confirm before the first deploy because an incorrect publish directory causes a successful build that returns 404 on every page.

1. Log in to app.netlify.com and click Add new site → Import an existing project.
2. Select GitHub and authorise Netlify to access your repositories.
3. Pick your Lovable repo and confirm the branch (usually main).
4. Build command: npm run build. Publish directory: dist.
5. Before clicking Deploy site, open Advanced → Add a variable for each env var.
6. Click Deploy site.

Which environment variables must I copy from Lovable to Netlify?

Every VITE_ prefixed variable in Lovable's Project Settings → Environment must be added to Netlify Site Configuration → Environment Variables before the first deploy. The two you must not miss are VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY — without them the app builds but Supabase is unreachable and the app appears blank or throws uncaught errors.

How do I update Supabase to accept requests from my Netlify domain?

After your first successful Netlify deploy, you will have a *.netlify.app URL. Add it to Supabase Authentication → URL Configuration → Redirect URLs so auth callbacks succeed. If you skip this step, users who try to log in will get a silent failure or a CORS error even though the app loads fine.

1. Copy your *.netlify.app URL from Netlify Site Configuration → General → Site information.
2. Open Supabase → Authentication → URL Configuration.
3. Add the *.netlify.app URL to Redirect URLs.
4. After DNS cutover, add your custom domain too.

Common Netlify deploy errors and fixes

Netlify surfaces most errors in the deploy log, but some failures — especially env-var problems and Supabase auth issues — only appear at runtime in the browser console. The table below maps the most common symptoms to causes and fixes for Lovable apps migrating to Netlify.

What common mistakes break a Lovable-to-Netlify migration?

The most common issues are: publish directory set to build instead of dist (404 on all pages); env vars added to preview context only (production deploys fail); Supabase origin not updated (auth 403); and Netlify's default redirect rules conflicting with Supabase auth callback parameters. Check Netlify deploy logs, the browser network tab, and the Supabase dashboard in that order.

How do I roll back if the Netlify migration breaks?

Netlify's Publish deploy button lets you promote any previous deployment in one click — without a new build. This is faster than reverting DNS and means you can fix env-var or publish-directory issues and re-deploy without touching your DNS records.

1. In Netlify, go to your site → Deploys and find the last known-good build.
2. Click on it → Publish deploy. Your Netlify URL immediately serves that build.
3. If you need to restore the old host entirely, update your DNS CNAME back to Lovable's hostname in your DNS provider.
4. The most common root causes to check: wrong publish directory (build vs dist) and env vars scoped to Deploy Preview instead of Production.

How do I handle Supabase auth password hashes when migrating to a new database?

If you are using a new Supabase project rather than the original one connected to Lovable, user passwords cannot be transferred because Supabase's GoTrue server does not export bcrypt hashes. Trigger a password-reset email to all users before you cut DNS. Let users know the reset is coming so they are not surprised when their old password stops working on the first day after migration.

Post-migration smoke test for Netlify

Run this checklist on your *.netlify.app URL before DNS cutover. Netlify has two failure modes that are specific to Lovable app migrations and easy to miss: the _redirects file required for client-side routing, and environment variables scoped to the wrong deploy context. Both cause silent failures that look unrelated to the actual cause.

1. Navigate directly to a nested route (e.g., /dashboard/profile) — confirm it returns your React app and not a Netlify 404. If it 404s, the _redirects file is missing.
2. Sign in and reload — confirm the Supabase session persists. If it does not, check Supabase Redirect URLs include your *.netlify.app URL.
3. If your app uses Netlify Forms, submit a test entry and confirm it appears under the Netlify dashboard → Forms tab.
4. Open Site Configuration → Environment Variables and verify each VITE_ variable is set for the Production deploy context, not just Deploy Preview.