GUIDE

Works in the preview, broken when published

This is the most common "it was working an hour ago" moment in AI building, and it has a boring cause: the preview and the published site are two different computers with two different sets of settings. The preview knows things the live site was never told.

The four causes, in order of likelihood

1. The live site never got your keys and settings

Your builder's preview holds your API keys, database URL and similar values. Publishing elsewhere doesn't carry them across, so the live site starts up with blanks where those values should be, then fails the moment it needs one. Symptom: the page loads then goes blank, or data never appears.

Fix: find where your host keeps environment settings and add every value the app needs, exactly as named in the code. Then publish again, because these are read at build time, not afterwards.

2. Something only exists on your machine

A file that was never saved to the shared copy, or a filename whose capitalisation differs. Your laptop usually treats Header.jsx and header.jsx as the same file. The computer that builds your live site does not, and it fails on the mismatch.

3. Paths that assume the site sits at the root

If the published site is at a sub-path, links to images and scripts that start with / point at the wrong place. Symptom: page renders, everything is unstyled, images missing.

4. "Application error: a client-side exception has occurred"

This message means the site loaded and then the code inside it crashed. The real error is one layer down: open the site, press F12, click Console, and reload. The red text there is the actual problem, usually a missing value from cause 1.

The prompt to paste

My app works in the preview but the published version is broken. Don't rewrite features. Instead check, in this order: (1) every environment variable the code reads, and tell me which ones the live site is missing, (2) any file referenced in code but not committed, (3) filename capitalisation mismatches in imports, (4) asset paths that assume the site is at the root. Report what you find before changing anything, and tell me exactly what to paste into my host's settings.

The habit that makes this a five-minute problem

Keep a list of every setting your app needs and where each value comes from, updated whenever your AI adds a service. Most of these disasters are simply a value that exists in one place and not another, and the list turns an evening of guessing into a two-minute check. Keeping the published version and the version that works one click apart helps too: if a publish goes wrong, going back should be instant rather than an investigation.

Plyo is the home for AI-built projects — every version saved, one click to undo, one click to publish, plus a safety check, visitor counts and backups. Free to start: 3 projects, no card needed.

Give your project a home