Environment Variables in Netlify, Explained

The short version

• Environment variables are settings and secrets your code reads at the moment it runs, instead of having them written directly into the code itself.
• They let the exact same code behave correctly in different places: your test version, your live version, each with its own values.
• Netlify is where we set them for People in the Loop, one set of values for the live site, a different set for the dev preview.
• This is post three in a short series. The first covered what GitHub is, the second covered dev versus main branches.

The problem environment variables solve

Say you have a key to a building. Not a metaphorical key, an actual login, a password, a connection string to a database. If you write that key directly into your code, two things go wrong immediately. First, anyone who can see the code can see the key, which is a real security problem. Second, your test version and your live version now need two different keys, but the code only has room for one, written in directly.

Environment variables solve both problems. Instead of writing the actual key into the code, you write a label, a name for a setting the code will look up at the moment it actually runs. The real value lives somewhere else, somewhere safer, and it can be different depending on where the code is running.

What environment variables actually are, in plain terms

Q: What is an environment variable?

A named setting your code reads when it runs, instead of having the actual value written into the code itself. Think "SUPABASE_URL" as the label, with the real address kept separately, set per environment.

Q: Why not just put the real value in the code?

Two reasons. Security: code is often visible to more people than a settings panel is, so secrets do not belong inside it. And flexibility: the same code needs to behave differently in different places (your test version should not touch the same database as your live version), and environment variables let one codebase do that safely.

Q: What is an "environment," in this context?

A specific place your code is running: your live production site, your dev preview, or your own computer while you are working locally. Each one is its own environment, and each can have its own values for the same settings.

The code should never have to change to know where it is. It just asks, "what is my SUPABASE_URL right now," and the environment answers.

How this actually works at People in the Loop

We set environment variables inside Netlify, not inside the code itself. Netlify lets you set different values depending on the "context" the code is running in: production (main, the live site), branch deploys (dev, our working preview), and deploy previews (individual feature branches). The code checks which context it is in and behaves accordingly, showing a preview banner on non-live versions, using test payment keys instead of real ones, that kind of thing.

The file .env.example in our codebase lists every setting the site needs, by name only, with no real values, so anyone (or any AI session) picking up the project can see exactly what needs to be set, without ever seeing an actual secret.

What is coming next in this series

You now have the three real building blocks: GitHub holds the code and its history, branches (dev and main) separate "trying something" from "this is now real," and environment variables let the same code behave correctly wherever it is running. The final post in this series puts all three together and walks through exactly how a change moves from an idea, through Claude, into GitHub, onto a dev preview, and finally out to peopleintheloop.app.

Key terms glossary

Environment variable: a named setting a program reads when it runs, instead of having the value written directly into the code.

Environment: a specific place code is running (production, dev preview, local machine), each with its own settings.

Netlify: the hosting service that runs our site and holds our environment variable settings per context.

Secret: a sensitive value (a password, an API key) that should never be written directly into code.