Blank Page After Deploying a Lovable or Bolt App: How to Fix It

Your app works in the Lovable or Bolt preview. You deploy it to Vercel or Netlify, open the live URL, and get a white screen. The deploy says it succeeded, and nothing shows up. Lovable apps, and many Bolt apps, are Vite projects, so check these build and hosting settings in this order.

Step 1: Open the browser console first

On the blank page, open your browser's developer tools (F12, or right-click and choose Inspect) and look at the Console tab. If the page itself loads but stays blank, the HTML arrived but the JavaScript either crashed or never loaded. The first red error tells you which of the steps below applies:

  • An error mentioning supabaseUrl is required, undefined or an API key points to Step 2.
  • 404 errors for .js or .css files under /assets/ point to Step 3.

If the deploy itself failed, read the build log on your host instead, and check Step 4.

Step 2: Add your environment variables to the host, then redeploy

Your preview has its own environment variables. Your host doesn't get them automatically. Open the .env file in your repo (or the variables listed in your builder) and copy every name that starts with VITE_ into your host's settings:

  • Vercel: Project → Settings → Environment Variables, for the Production environment.
  • Netlify: Site configuration → Environment variables.

Then redeploy. Vite writes VITE_ values into your JavaScript when it builds, so adding a variable doesn't change a site that was already built. Only a new build picks it up.

Step 3: Check the output folder

Vite puts the built site in a folder called dist. If your host is set to publish a different folder, such as build, it serves the wrong files or none at all. Set the build command to npm run build and the publish or output directory to dist.

If your app lives under a subfolder rather than the root of the domain, the base option in vite.config has to match that path, or the /assets/ files won't load.

Step 4: Match the Node version

If the build log shows errors about unsupported syntax or an engine version, your host is building with an older Node.js than your project needs. Set the version your project uses. On Netlify, use a NODE_VERSION environment variable or a .nvmrc file. On Vercel, use Project → Settings → Node.js Version. Then redeploy.

Step 5: Keep secret keys out of VITE_ variables

Anything in a VITE_ variable ends up in the JavaScript that every visitor downloads. Put only public values there, like your Supabase project URL and anon key. Never put a Supabase service-role key, a Stripe secret key or any other secret in a VITE_ variable to make the page work. Secrets belong on a server or in an edge function.

Still blank?

Still blank? Deploy Rescue ($79) fixes failed builds and deploys on Vercel, Netlify and more. Milo, our AI agent, reviews every fix before delivery, and you review and merge the pull request yourself. Nothing is merged without you. No fix, full refund. Questions first? See the FAQ.

Sources