Bolt.new App Shows a Blank Page After Deploy? Fix the White Screen

It worked inside Bolt. You hit Publish, or deployed to Netlify, and now there's just a white page. A blank page means the HTML loaded but your JavaScript either never ran or crashed. The browser console almost always tells you which.

Step 0: open the console

On the live site, open DevTools (F12) → Console, then the Network tab, and reload. Match what you see below.

Cause 1: missing environment variables

Console shows something like Uncaught Error: supabaseUrl is required, or values logged as undefined.

Your Supabase URL and anon key, or another API key, existed in Bolt but not in the production build. In a Vite app, VITE_-prefixed variables are compiled in at build time. So:

1. Add the variables in your host's settings, e.g. Netlify → Site configuration → Environment variables.
2. Redeploy. Changing variables doesn't touch a site that's already built.
3. If you build locally and upload dist/, the variables must be in your local .env when you run npm run build.

Cause 2: wrong publish directory

Network tab shows 404s for /assets/index-xxxx.js, or the page is literally empty.

Vite outputs to dist/ and Create React App outputs to build/. Netlify's own Bolt guide calls out pointing at the wrong folder as a classic cause of a blank page. If your app sits in a subfolder, set the base directory too (e.g. base app, publish app/dist).

Cause 3: homepage loads, refresh on a route 404s or goes blank

Client-side routes like /dashboard don't exist as files on the server. Add an SPA fallback:

• Netlify: public/_redirects containing /* /index.html 200
• Vercel: a rewrite of all paths to /index.html in vercel.json

Cause 4: wrong asset base path

If you deploy to a sub-path (e.g. GitHub Pages at /repo-name/), set base: '/repo-name/' in vite.config.js. Otherwise the browser looks for scripts at the domain root and finds nothing.

Cause 5: a runtime crash in your code

Errors like Cannot read properties of undefined mean a component crashed on first render, often because an API returned something unexpected in production. Add an error boundary so users see a message instead of a white screen. Then paste the exact error into Bolt and ask it to fix the cause.

Cause 6: an API only allowed Bolt's preview domain

Netlify's guide notes that features working in Bolt can break live because a backend only accepted requests from the preview origin. Update allowed origins and CORS settings, and your Supabase Redirect URLs, to include your production domain.

Cause 7: it's your network, not your site

Bolt's support docs say some ISPs and security filters block .bolt.host domains, which shows up as ERR_SSL_PROTOCOL_ERROR. Test on mobile data. If it loads there, the site is fine.

Cause 8: stale chunks after redeploy

Uncaught SyntaxError: Unexpected token '<' can mean the browser asked for an old hashed file that no longer exists after a new deploy. A hard refresh fixes it for one user. Netlify's docs discuss longer-term fixes for code-split SPAs.

Prevent it next time

• Run npm run build && npm run preview locally before publishing.
• Keep a checklist of required env vars.
• Re-check the live site after every deploy, not just the editor preview.

How FlowCanary's free check detects this

FlowCanary opens your live URL in a real headless browser and reports:

• Blank page detection: how much visible text actually rendered
• every console error with its message, e.g. supabaseUrl is required
• failed requests, such as 404 JS bundles that point to a wrong publish directory or base path
• status of /signup, /login and /pricing, plus broken links

Each issue comes with a paste-ready prompt for Bolt, Lovable, Replit, v0 or Cursor.

Scan your Bolt app free in 30 seconds →