aiRepoFix / How-to fixes

App works in preview but is blank (or 401) after deploy: environment variables

Last checked against vendor documentation: October 17, 2026.

Symptoms

• A blank white page on the live site while the preview or local version works.
• Errors in the browser console, often mentioning something undefined or a missing URL or key.
• Requests to your backend that fail with 401 in the browser's Network tab. A 401 means the request reached the service but was not authorized, and a missing or empty key is one common cause.
• It only happens on the live site, not in the editor preview or on your computer.

Check this first (about five minutes)

1. Open the live site, then open the browser developer tools (usually F12). Look at the Console tab for red errors and the Network tab for failed (red) requests. Note the first error. It is often the real cause.
2. Open your project's .env file locally and list the variable names (not the values). Make sure each one is set at your host.
3. If your app uses Vite (Lovable's own docs show VITE_ variables for its projects), check that every value the browser needs starts with VITE_.
4. Check you redeployed after adding the variables.

Why it happens

• Your host builds from your repository, not from your computer. Secrets in .env files should be kept out of git (Vite's docs say to add *.local files to .gitignore), so a build on your host usually does not have those values. One exception: Lovable's docs say a Lovable project's .env file, which holds VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY, is available in its code editor or synced GitHub repository, and that Lovable needs that file committed (it says not to add .env to .gitignore in a Lovable project). Those values are meant to be public in the browser. If that file is in your repository, missing variables are a less likely cause and the section at the end of this page matters more.
• Netlify's build system does not read .env files. Its docs say variables must be set in its UI, CLI or API (or config file) instead.
• Vite only exposes VITE_ variables to browser code. Vite's docs show VITE_SOME_KEY being available and DB_PASSWORD being undefined in client code. Other frameworks use other prefixes (for example NEXT_PUBLIC_ in Next.js, as in Supabase's own examples).
• The values are baked in at build time. Vite replaces them while building, so a change only shows up after a new build and deploy. Netlify and Vercel both say changes need a new deploy to take effect.

Fix by host

Netlify

1. Open your site, then Project configuration > Environment variables.
2. Add each variable (for example VITE_SUPABASE_URL) with its value. Netlify's docs say its build does not read a .env file from your repository, and that you can instead use Add a variable > Import from a .env file to bring the values in to your own Netlify account (the Netlify CLI has env:import). Only import values that belong at the host, and never paste or send a .env file to anyone else.
3. Trigger a new build and deploy. Netlify's docs say environment variable changes require a build and deploy to take effect.

Vercel

1. Open your project, then choose Environment Variables in the sidebar.
2. Enter the Name and Value, pick the environments it applies to (Production for your live site), and click Save.
3. Redeploy. Vercel's docs say changes are not applied to previous deployments, only to new ones.

Replit

1. Open the Secrets tool (Tools, then Setup, then Secrets) and add each value.
2. To check what your published app uses, open Publishing, choose Adjust settings, and look at Production app secrets. Replit notes testing and production can use different values.
3. Replit's docs say Secrets are not available on Static deployments. Apps built with Replit Agent are not compatible with Static deployments (use Autoscale or Reserved VM).
4. Publish again so the live app is rebuilt. Replit's secrets page doesn't spell out whether a new publish is required after a change, so doing one is the safe choice.

Safety: what may go in a VITE_ variable

Anything with the VITE_ prefix is shipped to every visitor's browser. Vite's docs say VITE_* variables should not contain sensitive information such as API keys.

• Fine in the browser: your Supabase project URL and its publishable key (sb_publishable_...), or the legacy anon key. Supabase says these are safe to expose, as long as row level security is on for your tables. Supabase also says it is deprecating the legacy anon and service_role keys by the end of 2026, so use the publishable key for anything new.
• Never in the browser: Supabase's secret key (sb_secret_...) or the legacy service_role key, Stripe secret keys, or any password. Supabase says a secret key bypasses RLS and must never be in a browser or source control. Keep these in server-side code or an Edge Function, set as regular (non-VITE_) variables on the host.
• If a secret already went into a VITE_ variable or into a public repo, treat it as exposed. Create a new key, switch your app to it, and retire the old one. Supabase's API keys guide describes the steps.

After changing variables

1. Wait for the new build to finish on the host.
2. Hard-refresh the live site (Ctrl+Shift+R, or Cmd+Shift+R on a Mac) or use a private window, so you are not looking at a cached copy.
3. Reopen the Console and Network tabs and check the error is gone.

If variables are not the cause

A blank page after deploy has other causes. Two common ones:

• Wrong base path. If the site is served from a sub-path (for example /my-repo/ on GitHub Pages), Vite's base option has to match it. Vite's deploy guide explains this.
• Page links that 404 on refresh. Single-page apps need a rewrite to index.html. On Netlify that is the rule /* /index.html 200 in a _redirects file or in netlify.toml.

If the Console shows an error that mentions your own code rather than a missing value, the cause is probably in the code.

Sources

This page is based on the vendor documentation below. Menu names and defaults change, so check the source if something on your screen looks different.

• Vite docs: Env Variables and Modes
• Vite docs: Deploying a Static Site (base path)
• Netlify docs: Environment variables overview
• Netlify docs: Rewrites and proxies (single-page app rule)
• Vercel docs: Managing environment variables
• Vercel docs: Environment variables
• Replit docs: Secrets
• Replit docs: Deployment types
• Lovable docs: Secrets (VITE_ variables and the project .env file)
• Supabase docs: API keys

Last checked: October 17, 2026. aiRepoFix is not affiliated with or endorsed by the companies named on this page.