diff --git a/README.md b/README.md index 6e43def98..a754f48af 100644 --- a/README.md +++ b/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). diff --git a/src/client/app/app.component.ts b/src/client/app/app.component.ts index 56b096aaa..5057778b3 100644 --- a/src/client/app/app.component.ts +++ b/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); + } +} diff --git a/src/client/app/shared/config/env.config.ts b/src/client/app/shared/config/env.config.ts new file mode 100644 index 000000000..6a9be83cd --- /dev/null +++ b/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 %>'); diff --git a/src/client/app/shared/index.ts b/src/client/app/shared/index.ts index f84dd2297..266e30c3e 100644 --- a/src/client/app/shared/index.ts +++ b/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'; diff --git a/tools/config/seed.config.ts b/tools/config/seed.config.ts index 64dc32e09..d89c01d99 100644 --- a/tools/config/seed.config.ts +++ b/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') }; /** diff --git a/tools/env/config.json b/tools/env/config.json new file mode 100644 index 000000000..06b7355ac --- /dev/null +++ b/tools/env/config.json @@ -0,0 +1,11 @@ +{ + "dev": { + "API": "https://demo.com" + }, + "prod": { + "API": "https://prod.com" + }, + "staging": { + "API": "https://staging.com" + } +} diff --git a/tools/utils/seed/template_locals.ts b/tools/utils/seed/template_locals.ts index cdfbfba07..f0b80d8b6 100644 --- a/tools/utils/seed/template_locals.ts +++ b/tools/utils/seed/template_locals.ts @@ -1,3 +1,4 @@ +import { argv } from 'yargs'; import * as CONFIG from '../../config'; /** @@ -5,5 +6,16 @@ import * as CONFIG from '../../config'; * 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); }