Env Var

You might say

I know a secret key shouldn't go in the code. Where should I put it?

Provide configuration outside the source codeEnvironment variables supply values such as API endpoints, feature settings, and secret keys when a program starts. Public browser variables are visible to visitors, even if their names come from an environment file. Keep real secrets on the server and document the required variable names with safe examples.

Know first

Terminal

.env · Local development configuration OPENAI_API_KEY=sk-proj-•••••• DATABASE_URL=postgres://••••

process.env.OPENAI_API_KEY 🛡 .gitignore rule has been matched; check git status before submitting

You can say this to an AI Agent

Move this third-party secret from code into a server-side environment variable and add a real-value-free example variable name. Confirm neither git diff nor the client build contains the secret; after configuration, make one successful service call.

When to use it

Set different values for development and production
.env
OPENAI_API_KEY=sk-••••••
DATABASE_URL=postgres://••••Keep one local setting per line. Do not commit, screenshot, or forward sensitive values.
Provide server-side credentials
const key = process.env.OPENAI_API_KEYCode reads the variable name, so you can usually change the configuration value without changing code.
Configure an API endpoint
.gitignore
node_modules
.envUntracked files that match the rule are skipped; tracked files need separate handling.
Turn deployment-specific features on or off
💻 Local .env☁️ Platform settings

When NOT to use it

Commit a file containing real secrets
const key = "sk-proj-8fk2…"A secret committed to the repository may appear in history, clones, or build artifacts.
Put private keys in variables exposed to browser code
.env→ Forward to a teammate / share a screenshot in the group chat
Sharing the file or a screenshot may expose sensitive values in it.
Assume changing a value updates a running process automatically
Right-click → View page source<script> key="sk-…" </script>Once written into frontend code, visitors may read it directly.
Leave required variables undocumented
Changed .env, then just refreshed the page…401 Unauthorized (still using the old key)

Anatomy

OPENAI_API_KEY=sk-proj-•••••• # For local development, please do not submit

It is the convention to use all uppercase letters and underlines, so read this name in the code.

After the equal sign is the actual configuration value; when the key is included, it must be covered before taking the screenshot.

Notes starting with # will be ignored by the program.

Variants

.env

For local development use, should usually be excluded by .gitignore

Platform Env

Vercel → Settings → Env

Add another copy to the deployment platform settings page.

.env.example

Telling others what to wear is not true.

Typical use cases

Database connection

.env🔒 Do not submit

        # For local development

        OPENAI_API_KEY=sk-proj-8fk2••••••

        DATABASE_URL=postgres://localhost:5432

API credential

api.js

        const key = process.env.OPENAI_API_KEY;

        const res = await askAI(prompt, key);

The code reads the variable name; changing the configuration value locally usually does not require modifying the code

Site URL

.gitignore

        node_modules

        dist

        .env

🛡 Untracked files that match the rules will be skipped by git add; you still need to check git status before committing

Feature setting

Environment Variables

KEY

VALUE

Environment

OPENAI_API_KEY

••••••••

Production

DATABASE_URL

••••••••

Production

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Quick check

A backend needs a third-party secret without committing it. Where should it live?

A. In frontend configuration, hidden by not rendering itB. In a code comment until just before releaseC. In a server-side deployment environment variable, with a real-value-free local example

ANS Original Methods

Apply this term in a real workflow

Credentials & Cost

Manage Keys, Quotas, and Fallbacks Before Running Models or Workflows

Keep API keys, environment variables, credit usage, and failure states explicit; never commit secrets to frontend code or public repos.