Lovable turns a prompt into a working web app: a standard Vite, React, and TypeScript project, usually with Tailwind and shadcn/ui, and Supabase behind any backend features. Once you have the app, you own the code and can host it anywhere. Lovable’s own docs list Netlify among the compatible hosts (Lovable deployment docs).

Netlify publishes a maintained companion for this exact path: Deploy a Lovable site to Netlify. This guide follows it and fills in the Supabase and build details.

The most common route is Lovable to GitHub to Netlify. Lovable has no in-app “deploy to Netlify” button; the connection runs through a GitHub repository. That repository is worth setting up, because it gives you a deploy on every push and a preview URL on every pull request.

Two paths follow. Use the first if you plan to keep editing the app. Use the second for a quick one-off deploy of a static build.

Prerequisites

A Lovable app that runs.
A Netlify account (the free plan hosts production sites within a monthly usage allowance).
A GitHub account for the continuous-deploy path.
If your app uses Supabase, the values from its generated .env file (covered below).

Option 1: Connect through GitHub for continuous deploys

In Lovable, click the GitHub button, then Connect to GitHub. Lovable syncs the project to a repository and keeps it in sync two ways: edits in Lovable commit to main, and commits you push to GitHub flow back into Lovable. (Exporting to GitHub has historically required a paid Lovable plan; check your plan before you start.)
In Netlify, choose Add new site, then Import an existing project, and select the repository.
Confirm the build settings. Netlify auto-detects Vite and fills these in (Vite on Netlify):
- Build command: npm run build
- Publish directory: dist
Pin the Node version to what your project builds with. Netlify’s build image defaults to Node 22; if your project needs a specific version, commit a .nvmrc file (or set a NODE_VERSION environment variable) with that number.
Add your Supabase environment variables (see below) before the first build.
Deploy. Every push to main now builds and deploys to production, and every pull request gets a Deploy Preview.

Option 2: Drag the built files to Netlify Drop

Use this for a fast, no-account deploy when the app has no backend keys to inject.

Get the code onto your machine: sync the project to GitHub and clone it, or download it from the repo.
Build it locally:
```
npm install
npm run build
```
Vite writes the finished site to dist/.
Go to app.netlify.com/drop and drag the dist/ folder onto the page. Netlify returns a live URL.

Netlify Drop does not run a build or inject environment variables. If your app calls Supabase or any API that needs keys, a site deployed this way loads but fails every data call, so use Option 1 for anything beyond a purely static app.

Carry over your Supabase keys

Lovable embeds Supabase configuration through environment variables. Because it is a Vite app, only variables prefixed VITE_ reach the frontend, and Vite bakes them in at build time, so they must be set before the build runs. Copy the exact names from the app’s .env file (in Lovable’s editor or the synced repo). They usually look like this:

VITE_SUPABASE_URL=...
VITE_SUPABASE_PUBLISHABLE_KEY=...
VITE_SUPABASE_PROJECT_ID=...

The exact names vary by project: older projects use VITE_SUPABASE_ANON_KEY instead of PUBLISHABLE_KEY, and VITE_SUPABASE_PROJECT_ID in particular is Lovable-specific rather than a standard Supabase variable. Copy the names verbatim from your generated .env.

Add them in Netlify under Project configuration, then Environment variables, or import the file with the CLI (environment variables):

netlify env:import .env

The publishable (anon) key is public by design; Supabase Row Level Security protects your data, not secrecy of that key. If your app uses Supabase Auth, update the site URL and OAuth redirect URLs in your Supabase project to the new Netlify domain, or logins will bounce back to the old address.

Add the SPA redirect rule

Lovable apps use client-side routing, so a direct visit to a nested route needs to fall back to index.html. Without this rule, refreshing a route returns a 404. Add a _redirects file in public/ (Vite copies it into dist/):

/*    /index.html   200

The 200 status rewrites every path to index.html without changing the URL, letting React Router take over (rewrites and proxies).

Troubleshooting

Routes 404 on refresh. Add the _redirects rule above.

The build fails on Netlify but worked in Lovable. Pin the Node version your project builds with using a .nvmrc file or a NODE_VERSION variable.

The app loads but Supabase calls fail. A VITE_ variable is missing or misnamed, or you set it after the build. Confirm the names against the .env file and redeploy so the values are baked in.

Logins redirect to the wrong domain. Update the Supabase Auth site URL and redirect URLs to your Netlify domain.

Deploy Your Lovable App to Netlify