Why Lovable Deploy to Vercel Gives 404 (And How to Fix)

Lovable's 404 error on Vercel almost always traces to one of three causes: Lovable switched to TanStack Start, which requires a Nitro adapter that the old SPA-fallback routing config never needed. Your build is succeeding; your app just isn't handling routes correctly at runtime. This guide walks you through diagnosing which issue you have and fixing it--or deciding managed hosting is worth the tradeoff.

What Is This 404 Error?

Lovable builds full-stack web apps, not static sites. Until mid-2025, Lovable generated React apps that ran client-side routing. In early 2026, Lovable migrated to TanStack Start, a full-stack framework with server-side rendering and built-in routing.

When you deploy to Vercel with the old SPA config, Vercel receives a request for /features (or any non-root path) and your server has no handler for it. Vercel returns 404. The error ID bom1:: in Vercel logs means Vercel rejected the request before your function ran--not a 404 from your app, but from the deployment layer itself.

This is not a Lovable bug. It is a config mismatch: Lovable's framework changed, but your Vercel settings did not.

The Three Root Causes

Lovable apps fail to deploy with 404 on Vercel for exactly three reasons. Most of the time it is the first one.

Root Cause #1: Missing Nitro Adapter (Most Common) TanStack Start uses Nitro, a server framework with 11.2K GitHub stars. Lovable's build system should auto-configure Nitro for Vercel, but if you are running an older Lovable version or skipped a build, your vite.config.ts does not have the Nitro adapter. Nitro generates the serverless function that Vercel needs. Without it, Vercel has no function to run--only static files--so all routes beyond index.html return 404.

Root Cause #2: React Router Routing (Less Common) Some Lovable projects still use React Router, not TanStack Router. React Router is a client-side router; Vercel does not know about your routes, so it cannot proxy /dashboard to your index.html for client-side rendering. This needs a vercel.json rewrite, not a Nitro fix.

Root Cause #3: Environment Variables or Node Version (Rare) Your build succeeds, but your app crashes at runtime because a required env var is missing or Node version is too old. Vercel serves a 404 fallback instead of letting your app error visibly. This is hard to diagnose from Vercel logs alone.

How to Diagnose Which Issue You Have

Open your Vercel deployment logs and look for these signals.

Symptom: Blank white screen or hard crash on every route. Cause: Missing env vars (Root Cause #3). Check the "Environment Variables" section of your Vercel project settings. Every variable your app needs at runtime must be listed. If a required Supabase URL, API key, or auth token is missing, your app crashes before rendering anything.

Symptom: 404 on ALL routes, including the homepage. Cause: Nitro adapter missing or broken build (Root Cause #1). Go to Vercel deployment: "Functions" tab. You should see a function like .vercel/output/functions/index.func. If that tab is empty or only shows static files, your build did not generate the serverless function. Redeploy with a cache purge.

Symptom: 404 only on refresh; works when clicking internal links. Cause: React Router without SPA fallback (Root Cause #2). When you click a link inside your app, JavaScript handles the route. When you refresh or link directly, Vercel tries to serve /dashboard as a file and finds nothing. You need the vercel.json rewrite to send all non-file requests to index.html.

Quick check: Open your vite.config.ts file. Search for nitro. If it is not there, or if your config is still using the old @vitejs/plugin-react, you have Root Cause #1. Proceed to the next section.

Fix #1: Add Nitro to vite.config.ts (Recommended for Recent Lovable Projects)

This is the most common fix. If your vite.config.ts does not mention Nitro, do this:

1. Open vite.config.ts in your Lovable project (or export from Lovable to GitHub, then edit there).

2. Add the Nitro preset for Vercel. Your file should look like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [TanStackRouterVite(), react()],
  build: {
    rollupOptions: {
      output: {
        dir: 'dist',
      },
    },
  },
})

Change it to:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import nitro from 'nitropack/config'

export default defineConfig({
  plugins: [
    TanStackRouterVite(),
    react(),
    nitro({
      preset: 'vercel',
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        dir: 'dist',
      },
    },
  },
})

3. Install nitropack if you have not already:

npm install nitropack

4. If you have a vercel.json file in your root, delete it. Nitro handles routing now; the old SPA rewrite will conflict.

5. Commit and push to GitHub. Vercel auto-deploys. The build will generate a .vercel/output/functions/index.func serverless function. Routes now work.

Why this fixes it: Nitro is a server framework. When you add the Nitro plugin to your Vite config with preset: 'vercel', Nitro generates a serverless Node.js function that Vercel runs. That function understands your routes (via TanStack Router, which has 15K GitHub stars) and serves the right content for each request. Without Nitro, Vercel sees only static files and has no way to match /dashboard to your app.

Common follow-up error: After you add Nitro, the Vercel build still fails or the 404 persists. Most likely cause: Vercel is still using the old build cache. Go to Vercel project settings > "Git" > scroll to "Deployment" > click "Purge Cache and Redeploy". This forces a fresh build without old artifacts.

Fix #2: Add vercel.json SPA Rewrite (For Older Lovable Projects)

If you are running an older version of Lovable that uses only client-side React Router (no TanStack Start migration yet), Nitro is not your answer. Instead, use a vercel.json rewrite to tell Vercel to serve index.html for all requests that do not match static files.

Create a vercel.json file in your project root:

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

Commit, push, and redeploy.

Why this works: This tells Vercel: "For any request that does not match a static file (CSS, JS, images), serve index.html." React Router then runs client-side and matches the pathname to the right component. Routes work.

Why this does NOT work for TanStack Start: TanStack Start is server-rendered. It expects routes to be handled on the server before sending HTML to the browser. The vercel.json rewrite sends everything to the client, bypassing server-side logic. If you are on TanStack Start, use Fix #1 instead.

The Quick Wins Checklist

Before you blame Nitro or routing, check these first.

Node Version: Lovable requires Node.js 18 or later. Vercel defaults to Node 20, which is fine. But if your project was created in 2023 and you have never updated, Vercel might be running Node 16. Go to Vercel project settings > "Build & Development Settings" > set "Node.js Version" to "22". Redeploy.

Output Directory: Vercel needs to know where your built app lives. Go to Vercel project settings > "Build & Development Settings": Build Command: npm run build, Output Directory: dist. If Output Directory is wrong, Vercel deploys nothing and returns 404 for everything.

Environment Variables (All Three Environments): Set env vars in Vercel for Production, Preview, and Development (if testing preview deployments). Missing vars in just one environment is the hardest bug to spot. Go to project settings > "Environment Variables" > add each var for all three environments. Common Lovable vars: VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, API keys, auth tokens.

OAuth Redirect URLs: If your app uses GitHub, Google, or third-party auth, you set redirect URLs in the auth provider's dashboard (e.g., console.cloud.google.com). When you deploy to a new Vercel domain, that domain is not in the whitelist. Update the auth provider settings to accept your new Vercel URL. Until you do, auth fails, which can look like a 404 if your auth check crashes the app before rendering.

When to Use Cloudflare Pages, Northflank, or Ship Instead

If you have spent two hours reading Vercel logs and editing config, the math has changed. You are solving the wrong problem.

Cloudflare Pages: Cloudflare has a native Lovable adapter. Sync your Lovable project directly to Cloudflare, no Git required. Builds are instant, deployments are global (300+ edge locations). Free tier supports unlimited deployments. Lovable apps on Cloudflare Pages have zero cold starts and near-instant routing. If you are tired of Vercel config, this is the easiest switch.

Northflank: Northflank is a managed platform for full-stack apps. You point it to your GitHub repo, and Northflank handles builds, databases, preview environments, and scaling. No serverless functions, no cold starts, no routing config. You pay a flat monthly fee (starting around $50). Trade: you lose the zero-config feel, but you gain predictable costs and real debugging tools.

Ship: Ship is Opsily's managed hosting for Lovable apps. You deploy via Git or API. Ship handles the Nitro config, env vars, and routing automatically. No cold starts. No surprise bills. Flat pricing means you know your costs upfront. If you built a 10-person startup and Vercel feels like a side gig that eats your weekend, Ship removes the ops tax--Nitro is already baked in, env vars are managed, and you pay one flat monthly price instead of guessing your Vercel bill.

Decision criteria: Time spent troubleshooting more than 2 hours? Managed hosting wins. Surprised by Vercel bills? Flat-fee hosting makes sense. Want zero config and global edge? Cloudflare Pages. Need production databases and scaling? Northflank or Ship. Want to own your deployment config? Stay on Vercel, fix with Nitro.

Prevention for Your Next Lovable Deployment

Before you export from Lovable to GitHub and push to Vercel, do this:

1. Export to GitHub from Lovable. In Lovable, go to Settings > Export to GitHub. Make sure you choose the right repository. Do not skip this step--deploying without a Git remote leaves you locked into Lovable's hosting if you ever need to fork.

2. Set environment variables in Vercel before deploying. Go to your Vercel project settings. Add every env var your app needs (Supabase URL, API keys, etc.) for all three environments (Production, Preview, Development). Do this before the first push, not after the first 404.

3. Test the build locally. Before pushing to GitHub, run npm install && npm run build on your machine. If the build fails locally, it will fail on Vercel. Fix it now; you have access to proper error messages locally.

4. Deploy to a staging environment first. Push to a staging branch in GitHub. Let Vercel create a staging deployment. Test it, then merge to main. This catches 90% of config issues before production.

5. Check vercel.json and vite.config.ts are in sync. If your repo has a vercel.json file AND a vite.config.ts with Nitro, delete the vercel.json. They are routing config for different frameworks. Mixing them breaks routing.

6. Update auth provider redirect URLs BEFORE deploying. If you use GitHub OAuth, Google Sign-In, or any third-party auth, add your future Vercel domain to the auth provider's settings right now. Vercel domains are predictable: <project-name>.vercel.app. You can set it up in advance.

Frequently Asked Questions

How do you deploy a Lovable app to Vercel?

Export your Lovable project to GitHub via the Settings > Export to GitHub menu. Connect your GitHub repo to Vercel: go to vercel.com, sign in, click "Add New" > "Project", import your repo, and confirm. Vercel auto-deploys on every push to main. Set environment variables in Vercel project settings before the first deploy.

Why does Lovable deployment to Vercel fail with a 404 error?

Lovable migrated from client-side React to TanStack Start (server-side rendering). Vercel's old SPA config (with vercel.json rewrite) does not work for server-rendered apps. You need Nitro, a server framework, to handle routing. Without it, Vercel has no function to process routes.

Do I need to add a vercel.json file for Lovable on Vercel?

Only if you are on an older Lovable version that uses pure React Router (client-side only). Modern Lovable uses TanStack Start with Nitro. If you have Nitro in your vite.config.ts, delete any vercel.json file--they conflict. If you don't have Nitro yet, you can use vercel.json as a temporary fix, but you should migrate to Nitro.

What environment variables does Lovable need on Vercel?

It depends on your app. Common ones: VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY (for databases), API_KEY, JWT_SECRET (for auth), and any third-party service keys. Set them in Vercel project settings for all three environments: Production, Preview, and Development. Missing vars cause runtime crashes that look like 404s.

Should I use Cloudflare Pages or Vercel for Lovable apps?

Cloudflare Pages is simpler if you want zero config. It has a native Lovable adapter and global edge locations. Vercel is more flexible and has better debugging tools. If you want the simplest path with fast deployments, use Cloudflare Pages. If you want more control and don't mind config, use Vercel with Nitro.

What is Nitro and why do I need it for Lovable on Vercel?

Nitro is a server framework. TanStack Start uses Nitro to render routes on the server before sending HTML to the browser. Vercel's serverless functions need a handler--Nitro generates that handler. Without Nitro, you have only static files, so any request beyond index.html returns 404.

How do I fix a 404 on Lovable when refreshing a page on Vercel?

If clicking internal links works but refreshing returns 404, you have a routing config problem. If you are on TanStack Start with Nitro, purge the Vercel build cache and redeploy. If you are on React Router, add the vercel.json SPA rewrite. If neither, check that your Vercel "Output Directory" is set to dist in project settings.

When should I use managed hosting instead of Vercel for Lovable?

When the time cost of troubleshooting exceeds the value of your time. If you have spent more than two hours debugging Vercel config, a managed hosting service (like Ship) costs less than your hourly rate. Also consider managed hosting if you want predictable pricing--Vercel bills on usage; Ship bills a flat monthly fee.

The Bottom Line

Lovable's 404 on Vercel is almost always caused by Nitro config mismatch--TanStack Start needs a server framework that your Vercel deployment settings do not have yet. Diagnosis takes 10 minutes (check vite.config.ts and Vercel logs). Fixes take under an hour.

If you are tired of debugging platform config, Ship removes that entire layer--Nitro is already baked in, env vars are managed, and you pay one flat monthly price instead of guessing your Vercel bill.