Merge pull request #1026 from mgechev/env-config

feat(config): add app environment specific config

Author: mgechev

README.md

@@ -85,6 +85,18 @@ Configure at runtime
 npm start -- --port 8080 --reload-port 4000 --base /my-app/
 ```
 
+## Environment configuration
+
+If you have different environments and you need to configure them to use different end points, settings, etc. you can use the `./tools/env/config.json` file. The keys in the file are the different environments.
+
+The can be specified by using:
+
+```bash
+npm start -- --config-env ENV_NAME
+```
+
+Currently the `ENV_NAME`s are `dev`, `prod`, `staging`, but you can simply add different key-value pairs to the `config.json` file in order to alter extra such environments.
+
 # Tools documentation
 
 A documentation of the provided tools can be found in [tools/README.md](tools/README.md).

src/client/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ROUTER_DIRECTIVES } from '@angular/router';
 import { HTTP_PROVIDERS } from '@angular/http';
 
-import { NameListService, NavbarComponent, ToolbarComponent } from './shared/index';
+import { Config, NameListService, NavbarComponent, ToolbarComponent } from './shared/index';
 
 /**
  * This class represents the main application component. Within the @Routes annotation is the configuration of the
@@ -15,4 +15,8 @@ import { NameListService, NavbarComponent, ToolbarComponent } from './shared/ind
   templateUrl: 'app.component.html',
   directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent]
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor() {
+    console.log('Environment config', Config);
+  }
+}

src/client/app/shared/config/env.config.ts

@@ -0,0 +1,7 @@
+// Feel free to extend this interface
+// depending on your app specific config.
+export interface IConfig {
+  API: string;
+}
+
+export const Config: IConfig = JSON.parse('<%= ENV_CONFIG %>');

src/client/app/shared/index.ts

@@ -4,3 +4,4 @@
 export * from './name-list/index';
 export * from './navbar/index';
 export * from './toolbar/index';
+export * from './config/env.config';

tools/config/seed.config.ts

@@ -76,7 +76,7 @@ export class SeedConfig {
    * The base path of node modules.
    * @type {string}
    */
-  NPM_BASE = join(this.APP_BASE, '/node_modules/');
+  NPM_BASE = join(this.APP_BASE, 'node_modules/');
 
   /**
    * The flag to include templates into JS app prod file.
@@ -420,7 +420,9 @@ export class SeedConfig {
           [`${this.APP_BASE.replace(/\/$/, '')}`]: this.APP_DEST
         }
       }
-    }
+    },
+    // Note: you can customize the location of the file
+    'environment-config': require('../env/config.json')
   };
 
   /**

tools/env/config.json

@@ -0,0 +1,11 @@
+{
+  "dev": {
+    "API": "https://demo.com"
+  },
+  "prod": {
+    "API": "https://prod.com"
+  },
+  "staging": {
+    "API": "https://staging.com"
+  }
+}

tools/utils/seed/template_locals.ts

@@ -1,9 +1,21 @@
+import { argv } from 'yargs';
 import * as CONFIG from '../../config';
 
 /**
  * Returns the project configuration (consisting of the base configuration provided by see.config.ts and the additional
  * project specific overrides as defined in project.config.ts)
  */
 export function templateLocals() {
-  return CONFIG;
+  const configEnvName = argv['config-env'] || 'dev';
+  const configEnv = CONFIG.getPluginConfig('environment-config')[configEnvName];
+
+  if (!configEnv) {
+    throw new Error('Invalid configuration name');
+  }
+
+  const config = {
+    ENV_CONFIG: JSON.stringify(configEnv)
+  };
+
+  return Object.assign(config, CONFIG);
 }