From 5ada934e67dd3032075c5a965b79da8439da42e2 Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Fri, 20 Jan 2017 15:08:30 +0100 Subject: [PATCH] Add a mechanism to configure environment variables. --- .gitignore | 6 ++ README.md | 87 ++++++++++++++++---------- config/environment.common.default.json | 3 + config/environment.default.json | 26 ++++++++ src/app/app.component.html | 3 + src/app/app.component.ts | 9 +++ src/config.ts | 34 ++++++++++ 7 files changed, 134 insertions(+), 34 deletions(-) create mode 100644 config/environment.common.default.json create mode 100644 config/environment.default.json create mode 100644 src/config.ts diff --git a/.gitignore b/.gitignore index 0e713600f8..26069b858d 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,12 @@ /tsd_typings/ npm-debug.log +/config/environment.common.json +/config/environment.prod.json +/config/environment.dev.json + +/coverage + /dist/ .idea diff --git a/README.md b/README.md index a4f1f64f85..5208b4336c 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ Then go to [http://localhost:3000](http://localhost:3000) in your browser * [Introduction to the technology](#introduction-to-the-technology) * [Requirements](#requirements) * [Installing](#installing) +* [Configuring](#Configuring) * [Running the app](#running-the-app) * [Running in production mode](#running-in-production-mode) * [Cleaning](#cleaning) @@ -57,6 +58,20 @@ If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-w * `npm run global` to install the required global dependencies * `npm install` to install the local dependencies +## Configuring +Templates for environmental and shareable configuration files are located in `config/` folder in json format. + +To configure application settings: +* Create a new `environment.common.json` file in `config/` folder using `environment.common.default.json` as template; +* Create a new `environment.dev.json` file in `config/` folder using `environment.default.json` as template; +* Create a new `environment.prod.json` file in `config/` folder using `environment.default.json` as template; + +Note: JSON standard does not allow comments so remove them whether you are copying from templates. + +To use setting parameters in your component: +```bash +import { GlobalConfig } from "../config"; +``` ## Running the app After you have installed all dependencies you can now run the app. Run `npm run watch:dev` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:3000`. @@ -153,40 +168,44 @@ See [the guide on the wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+- ## File Structure ``` dspace-angular -├── README.md * This document -├── app.json * Application manifest file -├── e2e * Folder for e2e test files -├── karma.conf.js * Unit Test configuration file -├── nodemon.json * Nodemon (https://nodemon.io/) configuration -├── package.json * This file describes the npm package for this project, its dependencies, scripts, etc. -├── protractor.conf.js * E2E tests configuration file -├── resources * Folder for static resources -│   ├── i18n * Folder for i18n translations -│   └── images * Folder for images -├── rollup-client.js * Rollup (http://rollupjs.org/) configuration for the client -├── rollup-server.js * Rollup (http://rollupjs.org/) configuration for the server -├── src * The source of the application -│   ├── app * The location of the app module, and root of the application shared by client and server -│   ├── backend * Folder containing a mock of the REST API, hosted by the express server -│   ├── browser.module.ts * The root module for the client -│   ├── client.aot.ts * The bootstrap file for the client, in production -│   ├── client.ts * The bootstrap file for the client, during development -│   ├── index-aot.html * The index.html file, for production -│   ├── index.html * The index.html file, for development -│   ├── node.module.ts * The root module for the server -│   ├── server.aot.ts * The express (http://expressjs.com/) config and bootstrap file for the server, in production -│   ├── server.routes.ts * The routes file for the server -│   ├── server.ts * The express (http://expressjs.com/) config and bootstrap file for the server, during development -│   ├── styles * Folder containing global styles. -│   │   ├── main.scss * Global scss file -│   │   └── variables.scss * Global sass variables file -│   └── typings.d.ts * File that allows you to add custom typings for libraries without TypeScript support -├── tsconfig.aot.json * TypeScript config for production builds -├── tsconfig.json * TypeScript config for development build -├── tslint.json * TSLint (https://palantir.github.io/tslint/) configuration -├── webpack.config.ts * Webpack (https://webpack.github.io/) config for development builds -├── webpack.test.config.ts * Webpack (https://webpack.github.io/) config for testing -└── webpack.prod.config.ts * Webpack (https://webpack.github.io/) config for production builds +├── README.md * This document +├── app.json * Application manifest file +├── config * Folder for configuration files +│   ├── environment.common.default.json * Template for general configuration file +│   └── environment.default.json * Template for the dev and prod configuration files +├── e2e * Folder for e2e test files +├── karma.conf.js * Unit Test configuration file +├── nodemon.json * Nodemon (https://nodemon.io/) configuration +├── package.json * This file describes the npm package for this project, its dependencies, scripts, etc. +├── protractor.conf.js * E2E tests configuration file +├── resources * Folder for static resources +│   ├── i18n * Folder for i18n translations +│   └── images * Folder for images +├── rollup-client.js * Rollup (http://rollupjs.org/) configuration for the client +├── rollup-server.js * Rollup (http://rollupjs.org/) configuration for the server +├── src * The source of the application +│   ├── app * The location of the app module, and root of the application shared by client and server +│   ├── backend * Folder containing a mock of the REST API, hosted by the express server +│   ├── browser.module.ts * The root module for the client +│   ├── client.aot.ts * The bootstrap file for the client, in production +│   ├── client.ts * The bootstrap file for the client, during development +│   ├── config.ts * File that loads common and environment settings and makes available to app components +│   ├── index-aot.html * The index.html file, for production +│   ├── index.html * The index.html file, for development +│   ├── node.module.ts * The root module for the server +│   ├── server.aot.ts * The express (http://expressjs.com/) config and bootstrap file for the server, in production +│   ├── server.routes.ts * The routes file for the server +│   ├── server.ts * The express (http://expressjs.com/) config and bootstrap file for the server, during development +│   ├── styles * Folder containing global styles. +│   │   ├── main.scss * Global scss file +│   │   └── variables.scss * Global sass variables file +│   └── typings.d.ts * File that allows you to add custom typings for libraries without TypeScript support +├── tsconfig.aot.json * TypeScript config for production builds +├── tsconfig.json * TypeScript config for development build +├── tslint.json * TSLint (https://palantir.github.io/tslint/) configuration +├── webpack.config.ts * Webpack (https://webpack.github.io/) config for development builds +├── webpack.test.config.ts * Webpack (https://webpack.github.io/) config for testing +└── webpack.prod.config.ts * Webpack (https://webpack.github.io/) config for production builds ``` ## 3rd Party Library Installation diff --git a/config/environment.common.default.json b/config/environment.common.default.json new file mode 100644 index 0000000000..3d0d59c400 --- /dev/null +++ b/config/environment.common.default.json @@ -0,0 +1,3 @@ +{ + "title": "" +} diff --git a/config/environment.default.json b/config/environment.default.json new file mode 100644 index 0000000000..acc05d5790 --- /dev/null +++ b/config/environment.default.json @@ -0,0 +1,26 @@ +{ + "production": false, + // Location of REST API + "rest": { + // By default, we are currently using a local proxy running on port 5050. + // This is necessary because our actual REST API doesn't provide CORS headers yet! + // The actual REST API path is in the 'proxy' settings below. + // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript + "nameSpace": "", + "baseURL": "" + }, + // REST Location that we are proxying (see src/proxy.ts) + // (Since we are using a proxy at this time, the actual REST API goes here) + "proxy": { + "nameSpace": "", + "baseURL": "" + // E.g. to use demo.dspace.org REST API, use the below values *instead* + //nameSpace: '/rest', + //baseURL: 'https://demo.dspace.org' + }, + // Path and Port in use for this Angular2 UI + "ui": { + "nameSpace": "", + "baseURL": "" + } +} diff --git a/src/app/app.component.html b/src/app/app.component.html index a562e0b675..595008f565 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,6 +4,9 @@

{{ 'example.with.data' | translate:data }}

{{ example }}

+

{{ title }}

+

development

+

production

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 15485eb6a6..530e47dce3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,6 +9,7 @@ import { TranslateService } from "ng2-translate"; import { HostWindowState } from "./shared/host-window.reducer"; import { Store } from "@ngrx/store"; import { HostWindowActions } from "./shared/host-window.actions"; +import { GlobalConfig } from "../config"; @Component({ changeDetection: ChangeDetectionStrategy.Default, @@ -27,6 +28,13 @@ export class AppComponent implements OnDestroy, OnInit { recipient: 'World' }; + title: string = GlobalConfig.title; + env: string = GlobalConfig.production; + + styles = { + color: 'red' + }; + constructor( private translate: TranslateService, private store: Store @@ -51,6 +59,7 @@ export class AppComponent implements OnDestroy, OnInit { @HostListener('window:resize', ['$event']) private onResize(event): void { + console.log(GlobalConfig.rest.baseURL); this.store.dispatch( HostWindowActions.resize(event.target.innerWidth, event.target.innerHeight) ); diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000000..9544ad0c2d --- /dev/null +++ b/src/config.ts @@ -0,0 +1,34 @@ +// Look in ./config folder for config + +const path = require('path'); + +let configContext = require.context("../config", false, /json$/); +let EnvConfig : any = {}; +let EnvConfigFile : string; +let CommonConfig : any = {}; + +try { + CommonConfig = configContext('./environment.common.json'); +} catch (e) { + throw new Error(`Cannot find file "${path.resolve('config', './environment.common.json')}"`); +} + +switch (process.env.NODE_ENV) { + case 'prod': + case 'production': + EnvConfigFile = './environment.prod.json'; + break; + case 'dev': + case 'development': + default: + EnvConfigFile = './environment.dev.json'; +} +try { + EnvConfig = configContext(EnvConfigFile); +} catch (e) { + throw new Error(`Cannot find file "${path.resolve('config', EnvConfigFile)}"`); +} + +const GlobalConfig = Object.assign(CommonConfig, EnvConfig); + +export {GlobalConfig}