🚀 Live demo: urljourney.vercel.app

Deploying Lovable + TanStack Start to Vercel kept throwing 404s and "No Output Directory" errors no matter what I tried. After hours of debugging, here's exactly what was wrong and the 2-file fix.

What Lovable Generates:

Lovable scaffolds projects using TanStack Start with Nitro as the server engine. This is a full-stack SSR framework, not a static site.

That's the root cause of every Vercel deployment problem.

Why It Fails Out of the Box

Problem 1: Vercel expects public/ but gets nothing

Vercel assumes a static site. TanStack Start + Nitro outputs a server bundle.

So you get:

No Output Directory named "public" found after the Build completed.

Problem 2: Setting outputDirectory: "dist/client" gives 404

Even after pointing Vercel to dist/client, every route returns 404. TanStack Start uses SSR — every route needs the Nitro server to handle it.

Without the server running, nothing works.

Problem 3: The rewrite trick doesn't work

Adding this to vercel.json:

json{ "source": "/(.*)", "destination": "/dist/server/server.js" }

...fails because dist/server/server.js is just an error logger, not the actual server entry.

Problem 4: Vercel functions runtime syntax is wrong

Trying "runtime": "nodejs20.x" throws:

Function Runtimes must have a valid version, for example [email protected]

Problem 5: Default Nitro preset is Cloudflare, not Vercel

The @lovable.dev/vite-tanstack-config comment in vite.config.ts says:

"nitro (build-only using cloudflare as a default target)"

A Vercel preset exists in Nitro but it's never used unless you explicitly set it. That's the real fix.

The Fix (2 Files)

Step 1: Update vite.config.ts

tsimport { defineConfig } from "@lovable.dev/vite-tanstack-config";

export default defineConfig({

tanstackStart: {

server: { entry: "server" },

},

nitro: {

preset: "vercel",

output: {

dir: ".vercel/output",

serverDir: ".vercel/output/functions/__server.func",

publicDir: ".vercel/output/static",

},

},

});

Step 2: Create vercel.json

json{

"buildCommand": "npm run build",

"outputDirectory": ".vercel/output",

"framework": null

}

Step 3: Build and verify locally

bashnpm run build

ls .vercel/output/

Should show: config.json functions/ static/ nitro.json

Step 4: Commit and push

bashgit add vite.config.ts vercel.json

git commit -m "fix: use nitro vercel preset with prebuilt output"

git push

Why This Works

Nitro's Vercel preset generates .vercel/output in Vercel's Build Output API v3 format:

.vercel/output/

config.json ← routing rules

static/ ← static assets served by CDN

functions/

__server.func/

index.mjs ← serverless function handling all SSR routes

.vc-config.json ← tells Vercel this is a Node.js function

Vercel natively understands this format and correctly wires up static asset serving + the serverless function. No manual rewrites needed.

Starting Fresh on Lovable?

Make these two changes before your first push and skip all of this pain.

Common Mistakes to Avoid

❌ Don't set outputDirectory: "dist" or "dist/client"

❌ Don't add manual rewrites in vercel.json

❌ Don't set framework: "vite" or any other framework

❌ Don't skip the output.dir override in vite.config.ts

✅ Always run npm run build locally first and verify .vercel/output/ exists before pushing