New client configuration pattern (#937)

* adding in initial config files

* working config files

* updating the client config pattern to default to dev instead of prod

* updating the npm script commands and docs

* Adding a helpful debugging log for the webpack build

* adding in more supporting documentation for running against production

* updating README.md and removing the unneeded ENV var

.gitignore

@@ -11,3 +11,4 @@ dist/
 *.zip
 build/
 !dev-server.shared.pem
+config/development.json

README.md

@@ -40,26 +40,26 @@ If you want to point the development web vault to the production APIs, you can r
 
 ```
 npm install
-npm run build:prod:watch
+ENV=production npm run build:watch
 ```
 
-You can also manually adjusting your API endpoint settings in `webpack.config.js` by altering the `targets` within `proxy`. For example:
+You can also manually adjusting your API endpoint settings by adding `config/development.js` overriding any of the values in `config/base.json`. For example:
 
 ```typescript
-proxy: {
-  '/api': {
-      target: 'http://localhost:4000',
-      pathRewrite: {'^/api' : ''}
-  },
-  '/identity': {
-      target: 'http://localhost:33656',
-      pathRewrite: {'^/identity' : ''}
-  },
-  '/events': {
-      target: 'http://localhost:46273',
-      pathRewrite: {'^/events' : ''}
-  }
-},
+{
+    "proxyApi": "http://your-api-url",
+    "proxyIdentity": "http://your-identity-url",
+    "proxyEvents": "http://your-events-url",
+    "proxyNotifications": "http://your-notifications-url",
+    "proxyPortal": "http://your-portal-url",
+    "allowedHosts": ["hostnames-to-allow-in-webpack"]
+}
+```
+
+To pick up the overrides in the newly created `config/development.js` file, run the app with:
+
+```
+npm run build:dev:watch
 ```
 
 ## Contribute

config.js

@@ -0,0 +1,29 @@
+function load(envName) {
+    const envOverrides = {
+        'production': () => require('./config/production.json'),
+        'qa': () => require('./config/qa.json'),
+        'development': () => require('./config/development.json'),
+    };
+
+    const baseConfig = require('./config/base.json');
+    const overrideConfig = envOverrides.hasOwnProperty(envName) ? envOverrides[envName]() : {};
+
+    return {
+        ...baseConfig,
+        ...overrideConfig
+    };
+}
+
+function log(configObj) {
+    const repeatNum = 50
+    console.log(`${"=".repeat(repeatNum)}\nenvConfig`)
+    Object.entries(configObj).map(([key, value]) => {
+        console.log(`  ${key}: ${value}`)
+    })
+    console.log(`${"=".repeat(repeatNum)}`)
+}
+
+module.exports = {
+    load,
+    log
+};

config/base.json

@@ -0,0 +1,8 @@
+{
+    "proxyApi": "http://localhost:4000",
+    "proxyIdentity": "http://localhost:33656",
+    "proxyEvents": "http://localhost:46273",
+    "proxyNotifications": "http://localhost:61840",
+    "proxyPortal": "http://localhost:52313",
+    "allowedHosts": []
+}

config/production.json

@@ -0,0 +1,7 @@
+{
+    "proxyApi": "https://api.bitwarden.com",
+    "proxyIdentity": "https://identity.bitwarden.com",
+    "proxyEvents": "https://events.bitwarden.com",
+    "proxyNotifications": "https://notifications.bitwarden.com",
+    "proxyPortal": "https://portal.bitwarden.com"
+}

config/qa.json

@@ -0,0 +1,7 @@
+{
+    "proxyApi": "https://api.qa.bitwarden.com",
+    "proxyIdentity": "https://identity.qa.bitwarden.com",
+    "proxyEvents": "https://events.qa.bitwarden.com",
+    "proxyNotifications": "https://notifications.qa.bitwarden.com",
+    "proxyPortal": "https://portal.qa.bitwarden.com"
+}

package.json

@@ -13,8 +13,12 @@
     "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
     "build": "gulp prebuild && webpack",
     "build:watch": "gulp prebuild && webpack-dev-server",
-    "build:prod": "gulp prebuild && cross-env NODE_ENV=production webpack",
-    "build:prod:watch": "gulp prebuild && cross-env NODE_ENV=production webpack-dev-server",
+    "build:dev": "gulp prebuild && cross-env ENV=development webpack",
+    "build:dev:watch": "gulp prebuild && cross-env ENV=development webpack-dev-server",
+    "build:qa": "gulp prebuild && cross-env NODE_ENV=production ENV=qa webpack",
+    "build:qa:watch": "gulp prebuild && cross-env NODE_ENV=production ENV=qa webpack-dev-server",
+    "build:prod": "gulp prebuild && cross-env NODE_ENV=production ENV=production webpack",
+    "build:prod:watch": "gulp prebuild && cross-env NODE_ENV=production ENV=production webpack-dev-server",
     "build:selfhost": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
     "build:selfhost:watch": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
     "build:selfhost:prod": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack",

webpack.config.js

@@ -8,11 +8,15 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 const pjson = require('./package.json');
+const config = require('./config.js')
 
 if (process.env.NODE_ENV == null) {
     process.env.NODE_ENV = 'development';
 }
-const ENV = process.env.ENV = process.env.NODE_ENV;
+
+const NODE_ENV = process.env.NODE_ENV;
+const envConfig = config.load(process.env.ENV)
+config.log(envConfig)
 
 const moduleRules = [
     {
@@ -123,7 +127,7 @@ const plugins = [
     }),
     new webpack.DefinePlugin({
         'process.env': {
-            'ENV': JSON.stringify(ENV),
+            'ENV': JSON.stringify(NODE_ENV),
             'SELF_HOST': JSON.stringify(process.env.SELF_HOST === 'true' ? true : false),
             'APPLICATION_VERSION': JSON.stringify(pjson.version),
             'CACHE_TAG': JSON.stringify(Math.random().toString(36).substring(7)),
@@ -131,7 +135,7 @@ const plugins = [
     }),
 ];
 
-if (ENV === 'production') {
+if (NODE_ENV === 'production') {
     moduleRules.push({
         test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
         loader: '@ngtools/webpack',
@@ -159,52 +163,42 @@ const devServer = {
     // host: '192.168.1.9',
     proxy: {
         '/api': {
-            target: 'http://localhost:4000',
+            target: envConfig['proxyApi'],
             pathRewrite: {'^/api' : ''},
             secure: false,
             changeOrigin: true
         },
         '/identity': {
-            target: 'http://localhost:33656',
+            target: envConfig['proxyIdentity'],
             pathRewrite: {'^/identity' : ''},
             secure: false,
             changeOrigin: true
         },
         '/events': {
-            target: 'http://localhost:46273',
+            target: envConfig['proxyEvents'],
             pathRewrite: {'^/events' : ''},
             secure: false,
             changeOrigin: true
         },
         '/notifications': {
-            target: 'http://localhost:61840',
+            target: envConfig['proxyNotifications'],
             pathRewrite: {'^/notifications' : ''},
             secure: false,
             changeOrigin: true
         },
         '/portal': {
-            target: 'http://localhost:52313',
+            target: envConfig['proxyPortal'],
             pathRewrite: {'^/portal' : ''},
             secure: false,
             changeOrigin: true
         }
     },
     hot: false,
-    allowedHosts: [
-        'bitwarden.test',
-    ],
+    allowedHosts: envConfig['allowedHosts']
 };
 
-if (ENV === "production") {
-    devServer.proxy['/api'].target = 'https://api.bitwarden.com';
-    devServer.proxy['/identity'].target = 'https://identity.bitwarden.com';
-    devServer.proxy['/events'].target = 'https://events.bitwarden.com';
-    devServer.proxy['/notifications'].target = 'https://notifications.bitwarden.com';
-    devServer.proxy['/portal'].target = 'https://portal.bitwarden.com';
-}
-
-const config = {
-    mode: ENV,
+const webpackConfig = {
+    mode: NODE_ENV,
     devtool: 'source-map',
     devServer: devServer,
     entry: {
@@ -257,4 +251,4 @@ const config = {
     plugins: plugins,
 };
 
-module.exports = config;
+module.exports = webpackConfig;