Technical Enough
Next: Frontend

Environments: why it works on your machine and breaks online

Chapter 7 of 7 in The Software Map · 7 min · the part’s closing chapter

Last night everything worked. An AI tool assembled your first real build while you watched, you clicked through every page on your laptop, and nothing broke. Tonight you put it on the internet and sent the link to a few friends. The first reply is a screenshot: where your homepage should be, the hosting platform's gray page reads "Application error". Git confirms that not one line of code has changed since the version that ran flawlessly twelve hours ago, so something around the code must be different, and until you can name it, you cannot fix it.

Engineers have a sentence for this moment: "it works on my machine." It means, whatever is happening where you ran it, I cannot see from here. We will solve your failure first; it is the most common way a first build breaks.

The log line that solves the mystery

The error page is written for users and tells you nothing, so you open the log, the running list of text lines a program writes while it works; every host shows it under a tab with that name, and near the bottom sits the answer:

21:14:08 ERROR Missing required environment variable: MODEL_API_KEY
21:14:08 ERROR Application failed to start

The program never started, which is why every page failed. An environment variable is a value a program reads from its surroundings when it starts, not from its own code, so the same code can pick up different values in different places. This one holds your API key, the secret string from the journey of a request that tells the model provider whose account to bill.

On your laptop, that value lives in a small file the AI tool created when it wired the feature:

# .env.local  (a file that stays on your laptop)
MODEL_API_KEY=the-long-secret-string

The tool kept the file out of Git deliberately: a secret tied to your bill should never travel inside code that gets copied around, and the backend, where the real work happens settles where secrets belong. That protection stranded your build: the move to the host carried the code and nothing else.

Deploy means taking code from the place it runs now and starting it in another, almost always one step closer to users.

The machinery of the move belongs to hosting, renting a computer on the internet. The fix takes about five minutes: the host's settings screen has a section labeled Environment Variables, and you paste the key there:

Settings > Environment Variables

  Key              Value         Available in
  MODEL_API_KEY    ..........    Production

You run the deploy again, the log stays quiet, and the link your friends are holding finally shows the homepage. One column remains: the host asked which copies of your product may see the value, a question you cannot answer yet.

What was actually different

One value existed on your laptop and not on the host, and that was enough. The setup around code holds many details like it: the operating system, the version of every installed tool, other configuration values, and the data, sample records in one place, real users' records in another. "It works on my machine" rarely means the other machine is broken; the two setups differ in a detail nobody has found yet.

An environment is the specific setup around the code: the machine, the tool versions, the configuration, and the data. The same code in two environments can behave like two different products.

The three environments most teams run

These differences eventually ambush every build, so teams standardized the places code runs.

  • Development is your own machine, a sandbox where breaking things is cheap and nobody else can see in.
  • Preview is a private copy that matches production closely, where a change auditions before anyone outside meets it. Teams once built it by hand and called it staging; most hosting platforms now create one automatically for every change.
  • Production is the real thing, the version your users touch, where breakage costs trust and sometimes money.

That is the vocabulary the settings screen assumed: it was asking which copies may use your key. An AI tool asking whether a change goes to staging or production is asking the same thing.

How a change moves up to production

A change starts in development, where it can fail with no audience, moves to preview, where realistic configuration and data expose problems your laptop cannot, and only then reaches production. The question at each gate is the same: did the change work in the environment just behind this one? If not, it does not move forward. Whatever slips past both gates is found by real users. Your missing key, sent to preview first, would have crashed in front of you instead of your friends.

The obvious objection: this is ceremony for one person

You are one person with one laptop, so gates can sound like process built for companies, and shipping straight from laptop to production is tempting. But you already run two environments, and the third one is free.

While this chapter was being written, the site you are reading ran as a development environment and nowhere else: one laptop and a dev server answering at an address beginning with http://localhost. Where software lives called the server the remote half; a dev server is the same kind of program doing the same job on your own laptop. Localhost is the name every computer uses for itself, so that address worked on exactly one machine on earth. The page in front of you is the production version that later made the trip.

The third costs nothing because the platform mints the preview copy on its own; the only ceremony left is clicking the preview link and looking, a habit that pays for itself the first time a preview comes up broken.

What happens when a change skips the gates

On July 19, 2024, the security company CrowdStrike shipped a faulty content update to software running deep inside Windows machines. Roughly 8.5 million machines crashed worldwide, grounding flights and halting payment systems.

The lesson widens here. Gates catch environment differences before users meet a change; the post-incident reviews centered on a second discipline for after a change ships: release to a small group of machines, watch, then widen in stages. Watching that first group is work for monitoring, how you know it broke (and what it costs).

The cost of a bad change scales with how many people meet it; environments moved through in order control that number.

What you can now do

This chapter closes the map, so take stock. You can decode the technical questions that stop you, split any product into the three parts from what software actually is, place each part on the map of where software lives, narrate the journey of a request, approve a pick of languages and frameworks, and make a save point with Git, the undo that makes AI edits safe. You can now ask the question that settles every works-on-my-machine argument: which environment are we talking about? And when a deploy fails, you can read the log for the value that exists in one place and not the other.

Try it now

This drill takes about ten minutes and spends nothing.

No setup: Type http://localhost:3000 into your browser. Unless something on your machine is listening, the browser reports it cannot connect, and that failure is the point: localhost names your own computer, so the request never left your machine. Then reread the printed log line and settings row above and write one note, the variable's name, where the laptop kept it, where the host wanted it: the diagnosis to reuse the first time your own deploy breaks.

With your tools: Open a project folder with Claude Code and ask it to start the dev server; if you have no project yet, ask it to create a tiny one-page site first. The terminal prints an address beginning with http://localhost; open it, and that page is your development environment, the leftmost box in the diagram. Turn off your Wi-Fi and the page still answers, because the request never touches the internet. Write down the localhost address and one difference from any live product; that note is the artifact you keep. In Codex or Cursor the move is the same: open the project, start the dev server, visit the localhost address it prints. If nothing is installed yet, the Setup Clinic gets you running.

Chapter Summary

  • An environment is the specific setup around the code: the machine, the tool versions, the configuration, and the data. The same code can behave differently from one environment to the next.
  • The most common first-deploy failure is a missing environment variable, a value a program reads from its surroundings at startup: your laptop held it in a local file that stays out of Git, and the host had no copy.
  • The fix lives in the host's settings screen: add the variable under Environment Variables, run the deploy again, and the app starts.
  • "Deploy" means taking code from one environment and running it in another, almost always one step closer to users.
  • Most teams run three environments: development on your own machine, preview as a private copy that matches production, and production where real users are.
  • Modern hosting platforms create a preview copy automatically for every change you push, so the middle gate costs a solo builder nothing but a look.
  • A change moves from development to preview to production, and it only moves forward after it has worked in the environment behind it.
  • The cost of a bad change scales with how many people meet it, the lesson the industry relearned in the July 2024 CrowdStrike outage.
  • When a tool says a change is "tested," ask where it ran before you trust it.
  • Next, the level turns to the layers every product stands on, starting with Frontend, what users see.

Sources

  • CrowdStrike post-incident review of the July 19, 2024 content update (last verified July 2026).
  • Public news reporting on the July 19, 2024 global IT outage (last verified July 2026).
  • Vercel documentation on environment variables and preview deployments (last verified July 2026).
  • Netlify documentation on deploy previews (last verified July 2026).