Guide

Blank page after publish: why the white screen appears

Updated 3 November 2026

Short answer: A blank page after publish (a white screen after deploy) almost always means the app crashed while starting, before it could draw anything. 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.

Does your live app open for a new visitor? Tell us what broke. Our AI agent tries it on your live app and sends you a screenshot, free. Check my app free

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 does my app show a blank white page after publishing?

The preview and the published site are two different environments, and the live one can crash where the preview did not. 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.

What are the possible causes of a white screen after deploy?

The usual causes are a missing live setting, an error with real data, wrong file paths, a missing rewrite for inner pages, and an old cached version.

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 base setting).
A page behind the home page fails when you open or reload it directly. Single-page apps on a host such as Netlify need a rewrite so every address serves index.html, otherwise the host answers with a 404 (Netlify: Rewrites and proxies). On Vercel, rewrites are set in the rewrites property of the project configuration (Vercel: Project configuration).
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 do I fix a blank page after publishing?

Read the first console error on the live page, then fix the setting or path it names.

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. MDN explains how to read these messages in What went wrong? Troubleshooting JavaScript.
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 base setting 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 or shows a 404 only when you open an inner page directly, add the single-page-app rewrite for your host (see the Netlify and Vercel links above).
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.

App broke after you published it? Our AI agent fixes it in your code, then tests your live app again so you see the result yourself. The first check is free. Check my app free

How do I check 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.

What is 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.

Why can't I see the blank page myself?

Your browser may hold a working cached copy, and the preview still works. You're signed in, your customers aren't, so 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 test your live app again. The price is on the pricing page.

Sources (official documentation)

VibeFix is independent. Lovable, Bolt, Replit, Base44, v0, Supabase, Firebase, Stripe and Vercel are trademarks of their owners.

Fixed it? Prove it works on your live app

A fix that works from your own account proves nothing about a new customer. Your AI fixed it. VibeFix proves it works on the live site.

How it works. Start with a free check: our AI agent tries your live app like a new user and shows you what breaks. Then, on request, it reviews your code independently, because VibeFix isn't part of any app builder. It fixes it in your code and re-checks your live app. The free check signs up once as "VibeFix Test" with its own inbox, needs no account, never changes your app and never emails your users.

Check my app free

Want it fixed?

Our AI agent fixes it in your code and tests your live app again. See pricing.

It starts with a free check that confirms the problem on your live app, no account needed.