Guide
My app shows a blank white page after publishing
Updated
A blank page after publishing almost always means the app crashed while starting, before it could draw anything. The standard fix is to open the live link, read the first red error in the browser console, and fix what it names, most often a setting the preview had and the live site does not.
In our checks of 44 live AI-built apps, 8 (18%) had pages that error, open blank, or links that go nowhere.
What we add from real checks: in every blank page we found, the home page loaded and a page behind it (a results page, a detail page, a menu link) opened blank. The owner checks the home page in the preview, so nothing looks wrong.
Why it happens
The preview and the published site are two different environments. In a React app, React's docs say that by default an error during rendering removes the app's UI from the screen, so one missing value can leave nothing but white.
Possible causes
- A setting the preview had and the live site does not, such as a database address or API key. The app reads an empty value on startup and crashes.
- An error that only happens with real data or a real address, for example code that expects a signed-in user, or a link to the preview address.
- The built files point to the wrong folder, so the app's code never loads (in Vite apps this is the
basesetting). - An old cached version: the browser shows the previous build, which no longer matches the files on the server.
- The crash happens before any error is shown, so nothing on the page explains it.
How to fix it
- Open the live link in a private window. Open the browser console (in Chrome: right-click, Inspect, then Console) and reload. Read the first red error.
- If it names a missing or undefined setting, such as "supabaseUrl is required", add that setting where your builder or host keeps the published app's environment variables, then publish again. In apps built with Vite, only variables whose names start with
VITE_reach the browser, and Vite writes them in when the app is built, so a changed value needs a new publish. - If the console shows the app's .js or .css files failing to load, the built files point to the wrong place. In Vite, the
basesetting must match the path the app is served from (/for a site at the root of its domain). - If the error points to the app's own code (for example "Cannot read properties of undefined"), give the AI the exact error and the page, and ask it to handle the missing value. React's docs also describe an error boundary, which shows a message instead of a white screen.
- If the page is blank only in your usual browser, not in a private window, clear the site's data and reload: you were seeing an old build.
How to tell it's fixed
- In a private window, open the live address and two or three pages behind the home page (a menu link, a detail page). Reload each one.
- The console shows no red errors while the pages load.
- Do the same on a phone.
The main catch
The preview proves nothing about the published site, and your own browser may be showing a cached copy that still works. Check in a private window, on the live address, after every publish, and not only the home page.
You can't see it yourself
You're signed in, your customers aren't. Your browser may hold a working cached copy, and the preview still works. A new visitor gets the white screen and leaves without telling you.
Frequently asked questions
Why does my app work in the preview but show a white page when published?
The preview and the published site are different environments. Usually a setting such as a key or a database address exists in one and not the other, and the app crashes on start.
Where do I see the error behind a blank page?
In the browser console on the live page: in Chrome, right-click, Inspect, then the Console tab, and reload. The first red error is usually the cause.
I added the missing setting. Why is the page still blank?
In apps built with Vite, settings are written into the app when it is built, so publish again after changing one. Then check in a private window so you are not looking at a cached copy.
Can one error really blank the whole app?
Yes. React's docs say that by default an error during rendering removes the app's UI from the screen. An error boundary shows a fallback message instead.
Can VibeFix fix it for me?
Yes, if you ask. The free check confirms the problem first. Our AI agent can find the cause, fix it in your code and re-check your live app: $79 for one bug, paid up front. If we can't complete your re-check, you get your money back.
Sources (official documentation)
- Vite: Env Variables and Modes
- Vite: Shared Options (base)
- React: Component (catching rendering errors with an error boundary)
- Chrome DevTools: Console
Related: My app is stuck on a loading spinner after I publish it · It works in the preview but breaks after I deploy · My builder says the app is tested, but my customers hit problems
VibeFix is independent. Lovable, Bolt, Replit, Base44, v0, Supabase, Firebase, Stripe and Vercel are trademarks of their owners.
Fixed it? Prove a real stranger gets in
A fix that works from your own account proves nothing about a new customer. Your AI reads your code. VibeFix signs up like a stranger.
Free check. Paste your live app's link: an AI agent signs up to your live app once as a brand-new person ("VibeFix Test") with a real inbox of its own, on a phone and on a computer, and shows how many problems a new user still hits, what each one is, and one screenshot. No account needed. It never changes your app and never emails your users.
Want it fixed?
Our AI agent finds the cause, fixes it in your code and re-checks your live app. $79 for one bug, paid up front. If we can't complete your re-check, you get your money back.
It starts with a free check that confirms the problem on your live app, no account needed.