Environment variables per environment

An environment variable is a value stored outside your code that your app reads at runtime. The same variable name can have different values depending on where the app is running.

Same name, different values

Your app reads GITHUB_CLIENT_ID from the environment. Locally, that value comes from your .env file and points to your development OAuth app. In production, it comes from Vercel's settings and points to your production OAuth app.

Your code doesn't change between environments — it always reads process.env.GITHUB_CLIENT_ID. The environment provides the right value.

VariableLocal (.env)Production (Vercel)
ORIGINhttp://localhost:5173https://yourapp.vercel.app
GITHUB_CLIENT_IDDev app credentialsProduction app credentials
SMTP_CONFIGSame Resend keySame Resend key
DB_URLSame Turso URLSame Turso URL

Some values are the same across environments (database, email). Others differ (OAuth credentials, origin URL). The pattern is always the same: code reads a name, the environment provides the value.

Why not just put values in code?

Two reasons. First, secrets like API keys and database tokens should never be committed to Git — anyone with access to the repo could see them. Second, values that differ between environments (like ORIGIN) need to change without changing code. Environment variables solve both problems.

Where values come from

  • Local development.env file in your project root, loaded automatically by the dev server
  • Production — Vercel's project settings dashboard, injected at build and runtime