Deploy a Lovable App to Vercel, Netlify, or Hostsmith

I shipped my first Lovable app last month and bricked the deploy three times before I got it. Blank white page. Refresh-404. A custom domain that resolved to nothing for forty minutes while I sat at the coffee shop refreshing DNS like it owed me money.

This is the Lovable deploy guide I wish I'd had.

Three real options: Vercel, Netlify, and Hostsmith. I shipped the same Lovable + Supabase app to all three this month to write this piece. They are not equivalent. Vercel and Netlify want a GitHub repo and a CI pipeline. Hostsmith wants the dist folder you already have on your laptop. Pick by how much pipeline you want to own.

I'll show you the exact env var names, the exact SPA fallback file, and the three things that quietly break every Lovable build the first time you ship it. Then a comparison table, the custom domain trap, and a troubleshooting section for the failures people actually hit.

What Lovable's built-in hosting gives you

Lovable's built-in hosting gives you a your-app.lovable.app URL, no custom domain on the free tier, and traffic that counts against Lovable's quotas. Fine for showing your friend the thing. Not fine for a real product.

When you outgrow it, Lovable lets you connect a GitHub repo via Settings -> Connectors -> GitHub. That syncs the code two ways. From there, you own the dist folder after a local npm run build. Everything below assumes you've done that.

The three things that break every first Lovable deploy

Before any of the three hosts, fix these. Same problems, same fixes, every platform.

1. Supabase env vars need the VITE_ prefix.

Vite only exposes variables to the browser bundle if the key starts with VITE_. Lovable's Supabase client reads exactly these:

VITE_SUPABASE_URL=https://xxxx.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGc...
VITE_SUPABASE_PROJECT_ID=xxxx

Note: Lovable uses PUBLISHABLE_KEY, not ANON_KEY like older Supabase tutorials. Same value, different name.

Set these on the host. If you forget, you get a blank white page and a console full of undefined.

2. The build output is a single-page app and needs an SPA fallback.

Any unknown path has to serve index.html, or refreshing /dashboard returns 404. Each host handles this differently. Covered per-platform below.

3. Supabase Auth redirect URLs are an allowlist.

In Supabase dashboard, Authentication -> URL Configuration, add your production URL (and your custom domain) to the redirect allowlist. Otherwise magic links and OAuth bounce back to localhost. I lost an evening to this one.

Option 1: Deploy a Lovable app to Vercel

To deploy a Lovable app on Vercel, you push to GitHub, then Vercel auto-deploys on every push. Here's how to deploy a Lovable app to Vercel step by step.

1. In Lovable, Settings -> Connectors -> GitHub, push your project to a new repo.
2. Go to vercel.com, New Project, import the repo. Framework preset: Vite. Build command: npm run build. Output directory: dist.
3. Before clicking Deploy, hit "Environment Variables" and paste in the three VITE_SUPABASE_ keys from above.
4. Vercel scopes env vars by environment - Production, Preview, Development - check all three boxes or your preview deploys will blow up while production works.
5. SPA fallback: add a vercel.json to the repo root.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Commit, push, Vercel redeploys. Custom domain lives under Project -> Settings -> Domains. Add the domain, copy the A/CNAME records Vercel gives you, paste them at your registrar.

Good fit if: you want git-driven previews per branch and don't mind the pipeline.

Option 2: Deploy a Lovable app to Netlify

To deploy a Lovable app to Netlify, you have two routes: connect the GitHub repo (same shape as Vercel) or drag the local dist folder onto the Netlify dashboard. Here's how to deploy a Lovable app to Netlify step by step.

For the GitHub route:

1. Push your Lovable repo to GitHub.
2. Netlify -> Add new site -> Import from Git. Pick the repo.
3. Build command: npm run build. Publish directory: dist.
4. Site settings -> Environment variables, add the three VITE_SUPABASE_ keys (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID).
5. SPA fallback: add a _redirects file inside public/ so it ends up in dist/.

/*    /index.html   200

For the drag-and-drop route: run npm run build locally, drag the dist folder onto the Netlify dashboard. Your env vars still need to be set locally before npm run build, so this is fine for a quick prototype but not a long-term setup. Auth will work in dev and break in prod the moment you forget.

Custom domain lives under Site settings -> Domain management. Same A/CNAME dance.

Good fit if: you want the Netlify forms / functions ecosystem, or you specifically want the drag-and-drop option.

Option 3: Deploy a Lovable app to Hostsmith

To deploy a Lovable app to Hostsmith, you skip the git pipeline. Run npm run build on your laptop, drag dist onto Hostsmith. Here's how to deploy a Lovable app to Hostsmith step by step.

Heads up before you build: Hostsmith currently serves index.html only at the apex path. Sub-routes like /dashboard will 404 on refresh. The fix is a one-line swap in your Lovable app's router setup - change BrowserRouter for HashRouter from react-router-dom. URLs become /#/dashboard instead of /dashboard, but refresh, bookmarks, and shared deep links all work. If your Lovable app is a single-page landing with no client-side routes, you can skip this.

1. Optional but usually needed: in your router setup (src/main.tsx or wherever you wrap the app in a router), swap BrowserRouter for HashRouter.
2. Locally: create a .env in your project root with the three VITE_SUPABASE_ keys (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID). Run npm run build. You'll get a dist/ folder.
3. Sign in to Hostsmith, create a new site. (Free tier: 5 GB bandwidth, 5,000 visits.)
4. Drag the dist folder into the upload zone. Done.
5. Custom domain: site settings -> domain, paste the records at your registrar. Or buy through Hostsmith and skip the DNS step.

Because env vars are baked into the bundle at build time, there's nothing to configure server-side. The downside: every code change means a fresh npm run build and a fresh drag. No git previews. And the HashRouter swap is a real trade-off if you care about pretty URLs or OG card scrapers (some can't read past the #).

If you want a private staging copy for a client review before going public, Pro plan and up adds Private Sites with password or email whitelist. Drop a password on the staging URL, send the link, ship the public version when they sign off.

Good fit if: you want fewer moving parts, don't need git-driven previews, and the HashRouter trade-off is acceptable (or your app has no client-side routes).

Which host is best for a Lovable app?

For a single dev shipping a Lovable + Supabase app, Hostsmith is the lowest-friction option because there's no pipeline to configure. Vercel wins if you need per-branch previews for a teammate. Netlify sits in between.

The custom domain trap

Same on all three: you add the domain on the host, copy the records, paste at your registrar, wait. The trap is the Supabase auth allowlist. Add your custom domain to Supabase's redirect URL list, or auth works on the .vercel.app URL and silently breaks on yourdomain.com. This bit me on Vercel first, then again on Netlify because I didn't learn the first time.

If you're moving from a .lovable.app URL to a custom domain, also check any hard-coded siteUrl in your Supabase client config. There shouldn't be one in a fresh Lovable build, but I've seen people paste one in for testing and forget.

For the full domain walkthrough, see Custom domain for a Lovable app.

Troubleshooting: the failures you'll hit

Blank white page after deploy. First thing to check: env vars. Make sure all three VITE_SUPABASE_ keys (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID) are set on the host (or in .env before build for Hostsmith). Open browser devtools, Console tab. If you see undefined where the Supabase URL should be, that's the one.

Refresh on any non-root path returns 404. SPA fallback not configured.

• Vercel: vercel.json with the rewrite block. Redeploy.
• Netlify: _redirects file in public/. Redeploy.
• Hostsmith: serves index.html only at apex, so there's no server-side fix. Swap BrowserRouter for HashRouter in your router setup, rebuild, redeploy.

Magic link / OAuth redirects to localhost. Supabase Auth allowlist. Authentication -> URL Configuration. Add your production URL.

Build fails locally before deploy. Almost always a Node version mismatch. Lovable targets Node 22. nvm use 22, rm -rf node_modules package-lock.json, npm install, try again.

Custom domain shows the host's default page. DNS hasn't propagated yet. Give it thirty minutes. If it's been a day, double-check you copied the records exactly.

FAQ

Can I deploy a Lovable app without GitHub? Yes. Use Hostsmith or Netlify's drag-and-drop option. Both take a local dist folder.

Do I have to use Vercel or Netlify? No. Any static host works: Hostsmith, Cloudflare Pages, GitHub Pages, anything that serves static files. Lovable's output is plain HTML/JS/CSS.

How do I go from Lovable to Vercel? Connect Lovable to GitHub via Settings -> Connectors -> GitHub, then import that repo into Vercel as a Vite project. Set the three VITE_SUPABASE_ env vars (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID) and add a vercel.json for the SPA rewrite.

Should I pick Lovable deploy to Vercel or Lovable deploy to Netlify? Lovable deploy to Vercel works best when you need git-driven preview URLs per branch for a teammate. Lovable deploy to Netlify is the pick if you want the drag-and-drop fallback sitting alongside the same CI pipeline.

Why does my Lovable app on Hostsmith 404 on refresh? Hostsmith serves index.html only at the apex path. Any client-side route (/dashboard, /settings) hit directly will 404. Fix: swap BrowserRouter for HashRouter in your router setup, rebuild, redeploy. URLs gain a # (so /dashboard becomes /#/dashboard), but refresh, bookmarks, and shared deep links all work. Trade-off: a few third-party scrapers (OG cards, some analytics) can't read past the hash.

Will my Supabase database move with the deploy? No. Supabase is hosted by Supabase. The deploy only moves the frontend bundle. Your data, auth users, and storage stay where they are. You only need to update the redirect allowlist with the new URL.

What about edge functions or server-side rendering? Lovable currently outputs a client-rendered Vite app. No SSR, no edge functions in the build. If you're using Supabase Edge Functions, those run on Supabase and don't move.

Ship the app

You built something in Lovable. It works. The Lovable deploy step is the boring part - get the env vars right, set the SPA fallback, point the domain. That's it.

Me, today, on this stack? Hostsmith for the first ship, move to Vercel only if I need git-driven previews for a teammate. Three drag-and-drops beat three pipelines when nobody else is looking at the code yet.

Related: Vibe coding website builders compared.