HeHeedza

Why does my Bolt.new app show a blank white page on Netlify?

Last reviewed

Short answer

Netlify is serving the wrong files or a build without its settings. For a Vite app, the build command must be npm run build and the publish directory dist. Add your VITE_ env vars in Netlify, add the /* /index.html 200 redirect for client-side routes, then Clear cache and deploy.

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.html points at /src/main.tsx, which browsers can't run. Or the folder is build when Vite writes to dist. 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 base path in vite.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.tsx means you deployed source, not dist.
  • supabaseUrl is required or Cannot read properties of undefined means 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 = 200

You 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.

Fix prompt
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.

Questions

Why does the Bolt preview work when Netlify doesn't?

The preview runs a dev server with Bolt's own environment. Netlify needs a production build plus its own copy of the env vars.

Do I need _redirects if I have netlify.toml?

No. Either one works. Use one place for the SPA redirect so they don't conflict.

I published from Bolt's built-in Netlify integration. Do these steps still apply?

Mostly yes. Env vars still have to exist for the build, and the console errors above still tell you which piece is missing.

Can I move a project from Bolt hosting to Netlify later?

According to Netlify's guide, once a project is published to Bolt hosting you can't move that same project to Netlify. You'd start from a fresh copy. Pick Netlify under Domains & Hosting before your first publish.

Sources