Why this happens
Bolt runs your project in an in-browser dev server, which compiles src/ on the fly. Netlify needs the built output instead. A blank page usually means one of these:
- Wrong publish folder. The source folder was uploaded, so
index.htmlpoints at/src/main.tsx, which browsers can't run. Or the folder isbuildwhen Vite writes todist. Netlify's own guide says the wrong folder "serves an empty page". - Missing env vars. Bolt's environment isn't copied to Netlify, so
createClient(undefined)crashes the app on load. - Wrong
basepath invite.config, so assets load from a path that doesn't exist. - Deep links 404 without the SPA redirect. That one isn't blank, but it's often found in the same session.
How to fix it, step by step
1. Read the console first. Open the live site, then DevTools → Console:
Failed to load module script ... MIME type of "text/html"or a 404 on/src/main.tsxmeans you deployed source, notdist.supabaseUrl is requiredorCannot read properties of undefinedmeans env vars are missing.- 404s on
/assets/...mean the base path or publish folder is wrong.
2. Set the build settings. Add a netlify.toml at the project root so they can't drift:
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200You can also add public/_redirects containing /* /index.html 200 (Vite copies it into dist). Create React App projects publish build instead of dist.
3. Add the env vars in Netlify. Go to Site configuration → Environment variables and add every VITE_... variable the app uses (for example VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY or ..._ANON_KEY). Only VITE_-prefixed variables reach the browser in Vite. Don't add secret keys there.
4. Check vite.config. For a site served from the domain root, leave base unset (default /) or set base: '/'.
5. Match the Node version if the build fails on Netlify but worked in Bolt. Set a NODE_VERSION env var or add an .nvmrc, as Netlify recommends.
6. Redeploy with a clean cache: Deploys → Trigger deploy → Clear cache and deploy site.
7. Dropping files by hand? Run npm install && npm run build locally and drag the dist/ folder, not the project folder, onto Netlify Drop.
Fix prompt for your AI builder
Paste this into Lovable, Bolt, Cursor, Claude, ChatGPT, Replit, v0 or whichever tool you build with. Replace the bracketed parts first.
Our Bolt app works in the preview but shows a blank white page on Netlify. The browser console says: [paste error].
Please:
1. Add a netlify.toml with build command "npm run build", publish "dist", and a /* to /index.html 200 redirect.
2. Make sure vite.config doesn't set a base path that breaks root deployment.
3. List every VITE_ env var the app reads, so I can add them in Netlify. Add a clear error if the Supabase URL or key is missing.
Don't change the app's UI or logic.How to catch this next time
Blank-page deploys are easy to miss. The Bolt preview keeps working and you're unlikely to open the live URL right after every publish.
Heedza opens your live site in a real browser on a schedule and checks the landing page actually shows content, and that your signup, login and checkout pages show their forms. When a deploy goes blank, you get an email with a screenshot and a fix prompt for Bolt. Run the free scan on your Netlify URL to see what it checks.