How to Deploy a Lovable Project to Vercel Without Errors

Why Vercel deployments fail without specific Lovable configuration

Lovable apps are standard Vite + React projects, which makes them fully compatible with Vercel. However, several configuration details must be set correctly or the deployment will fail or produce a broken site. The most common failure is missing environment variables. Lovable's Cloud tab Secrets do not automatically transfer to Vercel. If your app uses Supabase (as most Lovable apps do), the Supabase client throws an error on initialization, and the entire app fails to render — producing a blank white screen with no visible error. The second most common issue is SPA routing. Lovable apps use React Router with BrowserRouter for client-side routing. When a user navigates to /dashboard/settings and refreshes the page, Vercel tries to find a file at that path. Since there is no such file (it is all handled by React), Vercel returns a 404. The fix is a vercel.json rewrite rule that sends all requests to index.html. Vercel auto-detects build settings from package.json, but it sometimes picks the wrong framework or Node version. Lovable projects need Node 22, the build command npm run build, and the output directory dist/. If Vercel auto-detects a different configuration, the build fails.

• Missing environment variables on Vercel — Lovable Secrets do not auto-transfer
• No SPA rewrite rule — direct URL access returns 404 for all routes except /
• Wrong Node version — Lovable projects require Node 22, Vercel may default to an older version
• Output directory misconfigured — Vercel expecting build/ but Lovable uses dist/
• GitHub repo not connected — Vercel needs repository access for automatic deployments
• OAuth redirect URLs not updated for the new Vercel domain

Error messages you might see

Before you start

• A Lovable project connected to GitHub (Settings → Connectors → GitHub → Connect project)
• A Vercel account at vercel.com (free tier works for most projects)
• Your Supabase environment variables from Lovable's Cloud tab → Secrets
• If using OAuth: access to your OAuth provider settings to update redirect URLs

How to fix it

// No vercel.json — direct URL access to /dashboard returns 404

// vercel.json — SPA rewrite sends all routes to index.html
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Complete code example

1{
2  "rewrites": [
3    {
4      "source": "/(.*)",
5      "destination": "/index.html"
6    }
7  ],
8  "headers": [
9    {
10      "source": "/assets/(.*)",
11      "headers": [
12        {
13          "key": "Cache-Control",
14          "value": "public, max-age=31536000, immutable"
15        }
16      ]
17    },
18    {
19      "source": "/(.*)",
20      "headers": [
21        {
22          "key": "X-Content-Type-Options",
23          "value": "nosniff"
24        },
25        {
26          "key": "X-Frame-Options",
27          "value": "DENY"
28        },
29        {
30          "key": "Referrer-Policy",
31          "value": "strict-origin-when-cross-origin"
32        }
33      ]
34    }
35  ]
36}

Best practices to prevent this

• Always set Node.js version to 22 in Vercel project settings — Lovable projects use features that require Node 22
• Add all VITE_ environment variables on Vercel before the first deployment to avoid blank-screen issues on launch
• Use the vercel.json SPA rewrite rule from day one — add it when you first connect GitHub, not after users hit 404 errors
• Set environment variables for all three Vercel environments (Production, Preview, Development) to avoid issues in preview deployments
• Update OAuth redirect URLs immediately after deployment — do not wait until users report login failures
• Enable automatic deployments only on the main branch to avoid hitting Vercel's 100/day deployment limit on active repos
• Test the deployed app in an incognito window to ensure environment variables and authentication are working correctly

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns