JavaScript Academy · Lesson

Env variables & config patterns

Configure apps with small defaults, safe env reads, and explicit objects. Avoid leaking secrets in the browser. Beginner-friendly patterns.

Env variables & config patterns is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Big picture

Goal: Read config safely in any runtime.

Defaults first
Feature-detect env (do not assume process.env)
Parse strings to numbers/booleans
No secrets in browser bundles

Env variables & config patterns — illustration 1

Safe env read

Use feature detection to read env only when it exists. Provide a tiny demo store for runnable examples.

// Read an env var if available; otherwise use a fallback
function readEnv(name, fallback) {
  // detect Node-like env
  const hasProcessEnv = typeof process !== "undefined" && process && process.env && typeof process.env === "object";
  if (hasProcessEnv && typeof process.env[name] === "string") {
    return process.env[name];
  }
  // demo fallback store so this snippet runs everywhere
  const DEMO = { API_URL: "https://api.example.com", NODE_ENV: "development" };
  if (typeof DEMO[name] === "string") return DEMO[name];
  return fallback;
}

console.log("API_URL:", readEnv("API_URL", "https://fallback.local"));

Env variables & config patterns — illustration 2

Config from defaults+env

Defaults first, then override from env. Convert strings to number/boolean explicitly.

// Build config from defaults, then override via env when present
function buildConfig() {
  const defaults = {
    apiUrl: "https://api.example.com",
    port: 3000,
    debug: false
  };

  // env values are strings; parse to right types
  const apiUrl = readEnv("API_URL", defaults.apiUrl);
  const portStr = readEnv("PORT", String(defaults.port));
  const debugStr = readEnv("DEBUG", defaults.debug ? "1" : "0");

  return {
    apiUrl: apiUrl,
    port: Number.parseInt(portStr, 10),
    debug: debugStr === "1" || debugStr === "true"
  };
}

const cfg = buildConfig();
console.log("config:", cfg);

Env variables & config patterns — illustration 3

Explicit config param

Pass a small config object to functions. It avoids global state and surprises.

// Pass config into functions explicitly (easier to test)
function startApp(config) {
  // use values directly
  const mode = config.debug ? "debug" : "prod";
  return "Starting " + mode + " at " + config.apiUrl + " on :" + config.port;
}

console.log(startApp(cfg));

Env variables & config patterns — illustration 4

Parse env safely

Env values are strings. Write tiny parsers for booleans and integers to avoid bugs.

// Helpers to parse common env shapes safely
function toBool(s, fallback) {
  if (typeof s !== "string") return fallback;
  const v = s.trim().toLowerCase();
  if (v === "1" || v === "true" || v === "yes") return true;
  if (v === "0" || v === "false" || v === "no") return false;
  return fallback;
}

function toInt(s, fallback) {
  const n = Number.parseInt(s, 10);
  return Number.isFinite(n) ? n : fallback;
}

console.log("toBool:", toBool("yes", false), toBool("no", true));
console.log("toInt :", toInt("8080", 3000), toInt("oops", 3000));

Env variables & config patterns — illustration 5

Secrets & client code

Important:

Do not put secrets in client-side JS; users can read them.
Keep only harmless flags/URLs in the browser.
In Node, read real secrets from process.env or a vault.
Always keep a default config for local runs.

Env variables & config patterns — illustration 6

Env/config basics quiz

Quick check: Portable config pattern.

Env variables & config patterns — illustration 7

Recap

Recap: Build config from defaults + safe env reads, parse strings, and pass an explicit config object. Never ship secrets in client code.

Env variables & config patterns — illustration 8

Frequently asked questions

Is the “Env variables & config patterns” lesson free?

Yes — the full text of “Env variables & config patterns” is free to read here on the web, and the JavaScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Env variables & config patterns”?

Configure apps with small defaults, safe env reads, and explicit objects. Avoid leaking secrets in the browser. Beginner-friendly patterns. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Env variables & config patterns” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Globals, fetch availability, file/network APIs
ESM loader quirks, path/URL differences
Env variables & config patterns

← Back to JavaScript Academy