# 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).

## Related

- [ENV_SETUP.md](https://github.com/super-productivity/super-productivity/blob/master/docs/ENV_SETUP.md) (full reference in the repo)
- [[2.11-Run-the-Development-Server]]