--- title: "Deploy Your Lovable App to Netlify" description: "Deploy a Lovable app to Netlify through GitHub or Netlify Drop, including how to configure the Supabase environment variables it needs." source: "https://www.netlify.com/knowledge-base/deploy-your-lovable-app-to-netlify/" last_updated: "2026-07-24T14:06:31.000Z" --- 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](https://docs.lovable.dev/tips-tricks/deployment-hosting-ownership)). Netlify publishes a maintained companion for this exact path: [Deploy a Lovable site to Netlify](https://developers.netlify.com/guides/deploy-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](https://app.netlify.com/signup) (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 1. 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.) 2. In Netlify, choose **Add new site**, then **Import an existing project**, and select the repository. 3. Confirm the build settings. Netlify auto-detects Vite and fills these in ([Vite on Netlify](https://docs.netlify.com/frameworks/vite/)): - **Build command:** `npm run build` - **Publish directory:** `dist` 4. 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. 5. Add your Supabase environment variables (see below) before the first build. 6. Deploy. Every push to `main` now builds and deploys to production, and every pull request gets a [Deploy Preview](https://docs.netlify.com/deploy/deploy-types/deploy-previews/). ## 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. 1. Get the code onto your machine: sync the project to GitHub and clone it, or download it from the repo. 2. Build it locally: ``` npm installnpm run build ``` Vite writes the finished site to `dist/`. 3. Go to [app.netlify.com/drop](https://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](https://docs.netlify.com/build/environment-variables/get-started/)): ``` 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](https://docs.netlify.com/manage/routing/redirects/rewrites-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. ## Resources - [Deploy a Lovable site to Netlify](https://developers.netlify.com/guides/deploy-lovable-site-to-netlify/) - [Lovable: deploying outside Lovable Cloud](https://docs.lovable.dev/tips-tricks/external-deployment-hosting) - [Vite on Netlify](https://docs.netlify.com/frameworks/vite/) - [Environment variables](https://docs.netlify.com/build/environment-variables/get-started/) - [Redirects and rewrites](https://docs.netlify.com/manage/routing/redirects/rewrites-proxies/)