super-productivity/docs/wiki/2.16-Set-Up-Development-Environment.md
Corey Newton c2b18683d8
docs/wiki content v0.7 (#6568)
* docs(wiki): add new Quickstart to help with using Sync

There is a slew of notes that try to explain or show this so a
Quickstart can help bring everything into one place.

* docs(wiki): combine "First Steps" into single note with relevant links

* docs(wiki): update index notes

* docs(wiki): fix remaining broken external links

* docs(wiki): add core developer How-To guides to orient first-time devs

The majority of the documentation is currently spread across several
files ins "docs/" and READMEs. Over time these can be consolidated into
the wiki while retaining the common CONTRIBUTING.md as a valid entry
point.

* docs(wiki): add basic guides for plugins and issue integration

As with the core development docs, there is too much to add here right
now. These notes will serve as a simple entry to other resources.

* docs(wiki): add basic reference note for theming

* docs(wiki): add basic Translation guide

* docs(wiki): rename Theming and linting to clean up headings

* docs(wiki): add heading lint exception for GH-specific nav pages; rework sidebar and index pages

Sidebar should be a quick-access for the more common topics grouped
thematically with the X.00 notes simply enumerating all the notes where
appropriate.
2026-02-20 21:13:38 +01:00

1.6 KiB

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

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

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

const value = ENV.SOME_KEY;

Or with helpers:

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: .envsrc/app/config/env.generated.ts (secrets and per-developer values).