Skip to content
Antony Budianto edited this page Aug 20, 2016 · 1 revision

As a developer who works with many environments, like local machine, your teammate's machine, staging, QA, or production, you need to make sure that changing app's config won't breaks other environments. The usual way is to have environment variables which varies between environments.

It's one of The Twelve-Factor App and I tried to adapt it as much as possible since some aren't applicable for client-side app.

The usual use cases:

  • Staging server uses stag-api.domain.com where Production server uses api.domain.com
  • My local machine uses localhost where my teammate's machine uses api.domain.dev
  • PORT differences

Currently, the way Angular 2 CLI handle environments is to have a TypeScript file for each environment which violates the Twelve-Factor App :

This method does not scale cleanly:
as more deploys of the app are created, new environment names are necessary, such as staging or qa. 
As the project grows further, developers may add their own special environments like
joes-staging, resulting in a combinatorial explosion of config which makes managing deploys of the app very brittle.

also it's not usable outside TypeScript app

That's why I try to build the env addon which mimic the Twelve-Factor App way (some not applicable due to limitation)

With this addon, now you can have env.json for each environment, which is language-independent and can be stored to the environment's machine and be copied when it's time to build

⚠️ Warning

  • Since this is client-side environment variables, DON'T STORE SENSITIVE INFORMATION like your api tokens, secret keys, or other variables that should be kept secret on server-side
Clone this wiki locally