ContextQMD
Back to Super Productivity

Set Up Development Environment

docs/wiki/2.16-Set-Up-Development-Environment.md

18.4.41.6 KB
Original Source

Set Up Development Environment

How to configure environment variables and generated config for development and builds.

The app uses static environment files for flags (dev/prod/stage) and a .env file for secrets and dynamic values. Values from .env are turned into TypeScript constants so you use type-safe imports, not process.env.

One-time Setup

bash
cp .env.example .env

Edit .env and add any keys you need (e.g. API keys for optional integrations). Do not commit .env; the generated file src/app/config/env.generated.ts is gitignored.

Using Variables in Code

typescript
import { ENV } from './app/config/env.generated';

const value = ENV.SOME_KEY;

Or with helpers:

typescript
import { getEnv, getEnvOrDefault } from './app/util/env';

const value = getEnv('SOME_KEY');
const withDefault = getEnvOrDefault('SOME_KEY', 'default');

Types and keys are derived from .env when you run any build or serve command.

Adding a New Variable

  1. Add the key and value to .env.
  2. Run ng serve or a build command so env.generated.ts is regenerated.
  3. Use ENV.NEW_KEY or getEnv('NEW_KEY') in code.

Static Vs Dynamic Config

  • Static: src/environments/environment.ts, environment.prod.ts, environment.stage.ts (production/stage flags, version).
  • Dynamic: .env → src/app/config/env.generated.ts (secrets and per-developer values).
  • ENV_SETUP.md (full reference in the repo)
  • [[2.11-Run-the-Development-Server]]