Why does my app work in the preview but not live?
It worked a minute ago. Four causes that between them explain just about every “works locally, not live” problem, and how to see in five minutes which of the four is yours.
Your app runs in your tool's preview or on your own laptop, everything works, you put it live and half of it does not. Frustrating, but hardly ever mysterious: there are four causes, and between them they cover virtually every case I come across.
1. The keys are not there
By far the most common. Your database, your payment provider and your email work through keys that sit locally in a small file that does not go live, and rightly so. In the new place they have to be entered again, and one missing key means that whole part goes quiet, usually without a clear message.
Watch the difference too between keys the browser may see and keys that belong on the server only. In many frameworks the prefix of the name decides that. Use one the wrong way round and it works locally and not live, or worse: it works live and everyone can get at it.
2. Something that only exists on your computer
A reference to localhost, a path to a folder on your own drive, a file you put there yourself that is not in the project. Locally that all checks out; on a server it does not exist. Search your project for the word localhost and you will usually find them within a minute.
3. The split between server and browser
Modern frameworks run part of your code on the server and part in the browser. Code that may only run in the browser, anything touching the screen or the mouse, throws an error on the server. In development that is often still a warning; on going live the build stops or the page stays blank.
If you recognise this as a page that stays white while the rest of the site works, you are almost certainly here.
4. The database does not allow the visitor
Locally you usually test logged in as yourself, and sometimes even with a key that may do anything. Live an actual visitor turns up with fewer permissions, and then the rules on your tables turn out to say something other than you thought. Symptom: empty lists and empty screens without an error, because “you may see nothing” does not produce an error but zero results.
Which of the four is yours?
- Open your live site, press F12 and look at the Console tab. A red message usually points to cause 2 or 3.
- Check in the Network tab whether the requests to your database return an error code, or just an empty list. Empty without an error is cause 4.
- Is a whole part not working, like email or payments, while the rest is fine? Then it is cause 1.
- Does one page stay white while the rest loads? Then it is cause 3.
A preview is a staged environment. Live is the real world, and it has read none of your assumptions.
How to stop this for good
By adding a step in between: an environment set up exactly like live, but with no customers on it. That is where every change lands first. It takes half an hour to set up and it is the difference between discovering problems and explaining problems to a customer on the phone.
If you are stuck, send me a link with what is going wrong. This kind of thing is usually solved within a day, and then you know straight away whether there is more underneath.