How to host a Lovable project on Vercel or Netlify
Move a Lovable app to Vercel or Netlify: check your stack, set the build and environment variables, fix routing and sign-in, then switch the domain.
Leer en español →
To host a Lovable project on Vercel or Netlify, connect the project to GitHub, import that repository on the host, build with npm run build on Node.js 22, copy the VITE_ values from the project's .env into the host's environment settings, and update your sign-in redirect URLs to the new address. Before any of that, check which stack your project uses: apps created in Lovable since May 13, 2026 run on TanStack Start and need a host that runs server code, while older React + Vite apps are plain static files.
This guide walks through the move in order, including the two settings people forget (routing and auth), how to test before switching your domain, and what you give up by leaving Lovable's hosting.
Should I move hosting at all?
Lovable hosting includes HTTPS, custom domains and, for older React + Vite apps, pages pre-rendered for search engines and social previews. When the frontend runs elsewhere, the deployment pipeline, environment variables, uptime and logs become yours, and Lovable can't monitor or debug infrastructure it doesn't control. Lovable's Publish button keeps publishing only to Lovable hosting.
Good reasons to move: your team already deploys everything through one platform, you need preview deployments per branch, or a policy says where the app must run. "It might be faster" usually isn't one; measure first.
You can move only the frontend and keep the built-in backend (Lovable Cloud). Moving the database is a separate project, described in Lovable's external hosting guide.
Which stack does my project use?
Open package.json in Lovable's Code view.
If package.json… | Your stack | What the host must do |
|---|---|---|
lists @tanstack/react-start | TanStack Start (new projects) | Run the server part: server-side rendering and server functions |
| doesn't list it | React + Vite (older projects) | Serve the static files in dist/, with a fallback to index.html |
For TanStack Start, also check that nitro is listed. Nitro packages the server for each host, and it detects Vercel and Netlify automatically. Without it, the build doesn't produce anything a host can run.
How do I move the frontend, step by step?
1. Connect the project to GitHub
In Lovable, open Project settings → Git, connect GitHub and let it create the repository. Keep the sync on, so every change made in Lovable reaches the repository. (If the sync misbehaves, our GitHub sync troubleshooting guide covers the usual causes.)
2. Run it locally once
Clone the repository and run npm install and npm run dev. If it runs on your machine, you know which variables and dependencies it needs before a host adds its own surprises. If the repository only has bun.lock, either use Bun or run npm install and commit the generated package-lock.json, so the host installs the same versions.
3. Import the repository on the host
- Vercel: add a new project and import the repository. Build command
npm run build, Node.js 22. Vercel doesn't need an output directory setting for TanStack Start; for React + Vite it detectsdist. - Netlify: add a new site from the repository. Build command
npm run build, publish directorydist, Node.js 22.
Pick the branch you deploy production from. It can be the branch Lovable syncs, or a release branch you merge into after review.
4. Set the environment variables
Copy the values from the .env file in your repository into the host's environment settings.
| Variable | Needed by |
|---|---|
VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID | The browser (both stacks) |
SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY | Server code (TanStack Start only) |
| Any secret your server functions read | Server code (TanStack Start only) |
VITE_ values are baked in at build time. If you change one, trigger a new build; editing the variable alone changes nothing. Never give a secret key a VITE_ name: it would ship to every visitor's browser.
5. Fix routing for React + Vite apps
A single-page app has one real file, index.html. If someone opens /settings directly, the host looks for a file called settings, finds nothing, and returns a 404. Tell it to fall back to index.html.
On Vercel, add vercel.json at the root:
{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }On Netlify, add a file named _redirects to the public folder:
/* /index.html 200Skip this step for TanStack Start: the server handles routing.
6. Update sign-in redirect URLs
Add the new address (the host's temporary URL now, your domain later) to your auth Redirect URLs. On Lovable Cloud that's More → Cloud → Users → Auth settings → Advanced. If you use your own Google OAuth credentials, add the address in Google Cloud Console too. If you want sign-in to work on Vercel's per-branch preview URLs, add a wildcard entry for them; Supabase's docs show the pattern. Our guide on Lovable login redirecting to localhost explains the settings in detail.
How do I test before switching the domain?
Use the host's temporary address and compare it with the app on Lovable:
- Open a nested page directly and refresh. A 404 means step 5 is missing (React + Vite) or the server isn't running (TanStack Start).
- Sign in and sign out. A redirect error means step 6 is incomplete.
- Do the reads, writes and uploads the app depends on.
- For TanStack Start, load a server-rendered page and trigger a server function, not just the interface.
If the build fails instead, the log tells you why; see reading a Vercel build error.
How do I move the domain?
When the test deployment works, add your domain in the new host and change the DNS records to the ones it gives you. Then remove the domain from Project settings → Domains in Lovable, so two places don't claim it. Your lovable.app address keeps serving the last version you published there; unpublish it if you don't want two live copies.
Expect DNS changes to take anywhere from minutes to hours. Keep the old setup untouched until the new one answers on your domain with a valid certificate.
Can I keep building in Lovable afterwards?
Yes. With Git sync on, each change Lovable pushes to the repository triggers a deployment on the new host, following the rules you set there. The practical difference is that "publish" now means "merge into the production branch", and the preview in Lovable is no longer exactly what users see. If you're choosing between the two hosts, see Netlify vs Vercel for an AI-built app.
Quick answers
Do I lose Lovable Cloud if I host on Vercel? No. The frontend can move while the database, auth and storage stay on the built-in backend.
Why does my page 404 on refresh? On React + Vite apps, the host is missing the index.html fallback. Add the rewrite for your host.
Will SEO change? Lovable pre-renders older React + Vite apps for crawlers on its own hosting. On a static host you lose that, so check how your pages render for search engines after the move.
Can I download the code instead of using GitHub? On paid plans you can download a ZIP once, but a host that builds from a repository needs Git sync for ongoing deploys.
Want someone to run the move?
A hosting move touches DNS, auth and build settings at once, which is where small mistakes cost real downtime. Check your current setup with the free health check, see how we fix Lovable apps and maintain them afterwards, or ask us about your project.
