Bolt.new blank page after deploy: causes and fixes
A Bolt.new app that works in the preview but shows a white page after deploy is crashing before it can draw anything. The browser console names the cause: a MIME type error means source files were deployed instead of the dist build, a "supabaseUrl is required" style error means environment variables never reached the host, and 404s on JS or CSS files mean a wrong Vite base path. Fix that one thing and redeploy.
What you'll see
The Bolt preview looks perfect, but the deployed address on Netlify or another host is completely white, or shows a split second of content and then goes blank. The page title may be correct in the tab. Opening the console shows red errors such as "Expected a JavaScript module script but the server responded with a MIME type of application/octet-stream".
Why it happens
1. Source files deployed instead of the build
Dragging the project folder into a host uploads raw files like src/main.tsx, which browsers cannot run. Only the output of npm run build, in the dist folder for Vite, is meant to be served.
2. Wrong publish directory
Vite writes the built site to dist; older Create React App projects use build. If the host publishes the wrong folder, it serves an index.html that points at files which do not exist.
3. Environment variables missing on the host
Keys such as VITE_SUPABASE_URL exist in Bolt but are not copied to Netlify. The app tries to create its database client on start, throws, and React renders nothing.
4. A subfolder base path
If vite.config sets base to something like /Portfolio/, every script and stylesheet is requested from that folder. On a site served at the root, they all return 404.
How to fix it
- Open the deployed URL, press F12, select Console and reload. Write down the first red error; everything after it is usually a consequence.
- If you deploy by hand, run npm run build and upload the contents of dist, not the project root. With Git-connected deploys, set the build command to npm run build and the publish directory to dist.
- If the build fails on the host but works in Bolt, pin the Node version with a .nvmrc file or a NODE_VERSION environment variable matching the one Bolt used.
- Add every VITE_ variable the app reads under Netlify's Site configuration > Environment variables, or your host's equivalent, then start a new deploy so the values are built in.
- Open vite.config and make sure base is '/' unless the site really lives in a subfolder.
- Ask Bolt to show a readable error message when a required setting is missing, so the next failure tells visitors something instead of showing white.
Prompt to paste into Bolt.new
The deployed site shows a blank page but the preview works. Check vite.config for a non-root "base", make sure the build outputs to dist, list every environment variable the app reads at startup (import.meta.env.*), and add a visible error message instead of a blank screen if a required variable is missing.
How to check it's fixed
- Reload the live URL with the console open: no red errors, and in the Network tab every JS and CSS file returns 200 with a JavaScript or CSS content type.
- Open the site on a phone over mobile data to rule out anything cached on your own machine.
What a QAlaunch scan shows for this
- A blank page: the scan flags a page that loads but renders nothing meaningful, on desktop and phone.
- The exact console errors on load, such as MIME type or missing configuration messages.
- Failed requests for JavaScript and CSS files, which points straight at the build folder or base path.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why does the preview work if the deployed site is broken?
The preview runs a development server inside Bolt with your environment variables already loaded and no build step. The deployed site is a separate build on another machine, so anything that only exists inside Bolt is missing there.
What does the MIME type error mean?
The browser asked for a script and got a file it does not recognise as JavaScript, usually a raw .tsx file. It means unbuilt source was uploaded. Build first and deploy dist.
I added the environment variables but it is still blank. Why?
Vite bakes VITE_ variables into the files at build time. Adding them afterwards does nothing until you trigger a new deploy, and names without the VITE_ prefix are never exposed to the browser.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Bolt.new-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
- Bolt.new environment variables not working after deploy
- Bolt.new site shows 404 on refresh: the Netlify fix
- Bolt.new custom domain not connecting: causes and fixes
- Bolt.new Google sign-in not working: causes and fixes
- Bolt.new emails not sending: contact forms and auth emails
- Bolt.new site stopped working: hosting limits and other causes
More for Bolt.new: all Bolt.new fixes · Bolt.new testing · 9 bugs every AI-built site ships with
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Netlify forum: blank page on live site, working in Bolt preview · Netlify: deploy your Bolt app to Netlify · Netlify forum: blank page 404 with React Vite