AI code generators like Lovable, Bolt, v0, Replit, Cursor, and Claude Code are fantastic at creating a working preview but terrible at ensuring that preview survives contact with production. Developer Peterlada argues that the preview is a 'kind place' with your keys and a private database, while production introduces strangers and real money. To bridge this gap, he released a strict eight-step checklist designed to catch the specific configuration failures that plague AI-generated applications after deployment.

Environment Variables and Secret Exposure

The most frequent cause of a blank page post-deploy is missing environment variables. Builders often retain settings locally, but new hosts are ignorant of them. Peterlada advises searching code for process.env and import.meta.env to ensure every variable is set on the host. Crucially, public-prefixed variables like VITE_ or NEXT_PUBLIC_ are baked into JavaScript at build time, meaning host changes require a rebuild. Furthermore, secrets in the browser are public; any key starting with sk_ or containing service_role must be moved to server-side functions to prevent exposure.

Database Security and Auth Configuration

Row-level security (RLS) is often disabled by default in Supabase or misconfigured in Firebase. Peterlada warns that hiding a button is not access control; the database must enforce rules tied to auth.uid(). Sign-in failures are usually due to missing allowed redirect URLs in the auth provider's console. Developers must add production domains, with and without www, to both their appโ€™s configuration and external providers like Google or GitHub. Additionally, the built-in mailers in these platforms are for testing only and require a real provider for production traffic.

Build Integrity and Cost Controls

Development servers forgive errors that production builds do not. Peterlada insists on running npm run build locally to catch type errors and missing files. He also highlights the Linux vs. macOS case sensitivity issue, where import Header from './header' fails if the file is Header.tsx. Beyond code integrity, financial safety is non-negotiable. Rate-limiting sign-ups and setting budget alerts on AI providers are essential to prevent runaway costs from public API access.

Key Takeaways

  • Environment Variables: Public prefixes (VITE_, NEXT_PUBLIC_) are static at build time; changing them on the host requires a rebuild.
  • Secrets: Browser-exposed keys (like sk_) are public; move them to server functions immediately.
  • Database: Enforce Row-Level Security (RLS) and verify auth.uid() policies; never rely on UI hiding.
  • Auth: Update allowed redirect URLs in both your app and external providers (Google/GitHub) for production domains.
  • Builds: Run production builds locally to catch case-sensitivity issues that macOS dev servers ignore.
  • Monitoring: Implement error tracking (Sentry) and uptime checks before launch to detect failures before users do.

The Bottom Line

AI tools optimize for the demo, not the deployment. Until they natively enforce production constraints, developers must treat the preview as a sandbox and the checklist as a mandatory gatekeeper for shipping code.

Sources

https://dev.to/peterlada/works-in-preview-breaks-in-production-a-checklist-for-ai-built-apps-2691