Vibe Code Rescue

Your app works locally, but the deploy is a 404 or a blank page

You built an app with Lovable, Bolt, or v0. On your machine it runs perfectly. Then you deploy to Vercel or Netlify and get "404: NOT_FOUND", "Page not found", or a blank white screen. Nothing is wrong with your app. It is missing one small piece of production config that the AI never wrote into the repo.

Why this happens to AI built apps specifically

These tools generate Vite single page apps. The Vite dev server quietly handles everything: it serves index.html for every route, reads your .env file live, and never needs a build folder. Production hosts do none of that automatically. They need explicit config, and the AI builds an app that works in its own preview, then stops. Three different symptoms come out of this, each with its own one-line fix. Figure out which one you have.

Symptom 1: home page works, refresh on a subpage gives 404

The home page loads, clicking around works, but refreshing on /dashboard or opening a shared link goes straight to 404. Cause: missing SPA rewrites. Your routes only exist in JavaScript, so the host must serve index.html for every path and let the app take over. On Vercel, add a vercel.json in the repo root:

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

On Netlify, add a file at public/_redirects containing exactly:

/* /index.html 200

Commit, push, redeploy. Refreshing any route now works.

Symptom 2: every page is blank in production, fine locally

Cause: environment variables. Vite inlines import.meta.env.VITE_* values at build time, and the .env file on your laptop never gets uploaded. So production builds with those values undefined, the app throws on startup, and you get a blank page (press F12 and check the console to confirm). Set the variables in the host dashboard: on Vercel under Settings then Environment Variables, on Netlify under Site configuration then Environment variables. Then redeploy. Setting them is not enough on its own, because they are baked in at build, not read at runtime. Two traps: only variables prefixed VITE_ reach the frontend, and a typo in the name fails silently.

Symptom 3: everything 404s, even the home page

The deploy log says success, but every URL including / returns 404 or a directory listing. Cause: wrong publish directory. Vite outputs to dist, not build, and hosts sometimes guess wrong or inherit a stale setting. Check the build settings on the host: build command npm run build, output directory dist. Fix, redeploy, done.

One more thing to check

Open vite.config.ts and look for a base option like base: "/my-app/". That usually comes from a GitHub Pages experiment, and on Vercel or Netlify it breaks every asset path, so the page loads but scripts and styles 404. On those hosts base should be "/" or removed entirely.

Do not do this

Do not delete the project and redeploy over and over, and do not let the AI chat talk you into switching hosts when you paste the error back in. All three symptoms are one missing config file or setting away from fixed, and a fresh deploy without that config fails the exact same way.

Still stuck?

Run the instant diagnosis. Paste your public repo URL into the form and an automated clean-room check reports what is broken: install, build, render, and config, with the exact blocker named, in minutes, free. It specifically detects missing SPA rewrites and missing env examples, so this exact class of deploy failure gets caught automatically. Private repo or zip? Email works too.

Get an instant free diagnosis

Or email me instead. Fixes with 24 hour turnaround start at $95. Prefer self-serve? The $5 instant diagnosis on Apify checks your repo privately, no public issue needed.