Fixing Production Issues Not Present in Lovable Preview

Why Lovable apps break in production but work in preview

Lovable's preview uses Vite's development server, which behaves differently from the production build in several important ways. In development, Vite serves files individually without bundling, environment variables are available via import.meta.env even if they are only in a local .env file, and CORS restrictions are relaxed because everything runs on the same localhost origin. When you deploy to production, Vite bundles everything into optimized files in the dist/ folder. Environment variables must be explicitly set on the hosting platform — your local .env file is not deployed. Asset paths change because Vite adds content hashes to filenames for cache busting. CORS policies apply because your frontend and backend now run on different domains. These differences are not bugs — they are fundamental to how modern web tooling works. The solution is to test with the production build before deploying, ensure all environment variables are set on your host, use root-relative asset paths, and configure CORS headers on your backend.

• Environment variables missing on the hosting platform — VITE_ variables from .env are not auto-deployed
• Asset paths break after build — Vite adds content hashes to filenames, changing the URL
• CORS errors on production domain — the API allows the preview domain but not the production domain
• Vite tree-shaking removes code that appears unused but is needed at runtime
• Different Node.js version on the build server — package behavior varies between versions

Error messages you might see

Before you start

• A Lovable project that works in preview but has issues after deployment
• Access to the hosting platform dashboard (Vercel, Netlify, or Cloudflare Pages)
• Browser DevTools open on the production URL to inspect console errors and Network requests

How to fix it

// BAD: hardcoded path breaks after Vite hashing
<img src="./images/logo.png" alt="Logo" />
// BAD: relative path breaks on nested routes
<img src="images/hero.jpg" alt="Hero" />

// GOOD: root-relative path for /public assets
<img src="/images/logo.png" alt="Logo" />
// BETTER: ES import for assets in /src
import heroImage from "@/assets/hero.jpg";
<img src={heroImage} alt="Hero" />

// Edge Function with hardcoded preview origin
const corsHeaders = {
  "Access-Control-Allow-Origin": "https://preview-id.lovableproject.com",
};

// Edge Function with dynamic origin matching
const allowedOrigins = [
  "https://yourapp.lovable.app",
  "https://yourdomain.com",
  "https://preview-id.lovableproject.com",
];
const origin = req.headers.get("Origin") ?? "";
const corsHeaders = {
  "Access-Control-Allow-Origin": allowedOrigins.includes(origin) ? origin : "",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Complete code example

1/**
2 * Centralized environment variable access with validation.
3 * Import from here instead of using import.meta.env directly.
4 * This catches missing variables early with clear error messages.
5 */
6
7function getRequiredEnv(key: string): string {
8  const value = import.meta.env[key];
9  if (!value) {
10    console.error(
11      `Missing required environment variable: ${key}. ` +
12      `Set it in Cloud tab > Secrets (Lovable) or in your hosting platform settings.`
13    );
14    // Return empty string instead of throwing to prevent blank screen
15    return "";
16  }
17  return value;
18}
19
20// Supabase configuration
21export const SUPABASE_URL = getRequiredEnv("VITE_SUPABASE_URL");
22export const SUPABASE_ANON_KEY = getRequiredEnv("VITE_SUPABASE_PUBLISHABLE_KEY");
23export const SUPABASE_PROJECT_ID = getRequiredEnv("VITE_SUPABASE_PROJECT_ID");
24
25// App configuration
26export const APP_URL = import.meta.env.VITE_APP_URL || window.location.origin;
27export const IS_PRODUCTION = import.meta.env.PROD;
28export const IS_DEVELOPMENT = import.meta.env.DEV;
29
30// Log missing variables in development to help debugging
31if (IS_DEVELOPMENT) {
32  const requiredVars = ["VITE_SUPABASE_URL", "VITE_SUPABASE_PUBLISHABLE_KEY"];
33  const missing = requiredVars.filter(key => !import.meta.env[key]);
34  if (missing.length > 0) {
35    console.warn("Missing environment variables:", missing.join(", "));
36  }
37}

Best practices to prevent this

• Always set VITE_ environment variables on your hosting platform — they are not deployed from your local .env file
• Use root-relative paths (starting with /) for assets in /public, and ES imports for assets in /src
• After adding or changing environment variables on your host, trigger a new deployment — changes only apply at build time
• Replace all process.env references with import.meta.env — Vite uses import.meta.env, not Node.js process.env
• Create a centralized env.ts file that validates required environment variables and logs clear errors when they are missing
• Add your production domain to all CORS allow lists, OAuth redirect URLs, and API key restrictions before deploying
• Test with the production build locally before deploying to catch tree-shaking and path issues early

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns