From 6e4782784c0366df2370beeacc6bb95ed55dc459 Mon Sep 17 00:00:00 2001 From: Joseph Flinn <58369717+joseph-flinn@users.noreply.github.com> Date: Wed, 21 Apr 2021 11:29:33 -0700 Subject: [PATCH] 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 | 1 + README.md | 32 ++++++++++++++++---------------- config.js | 29 +++++++++++++++++++++++++++++ config/base.json | 8 ++++++++ config/production.json | 7 +++++++ config/qa.json | 7 +++++++ package.json | 8 ++++++-- webpack.config.js | 38 ++++++++++++++++---------------------- 8 files changed, 90 insertions(+), 40 deletions(-) create mode 100644 config.js create mode 100644 config/base.json create mode 100644 config/production.json create mode 100644 config/qa.json diff --git a/.gitignore b/.gitignore index 15498c9528..7ff8197b74 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ dist/ *.zip build/ !dev-server.shared.pem +config/development.json diff --git a/README.md b/README.md index 740fe598e9..99d15e3adf 100644 --- a/README.md +++ b/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 diff --git a/config.js b/config.js new file mode 100644 index 0000000000..961644de9d --- /dev/null +++ b/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 +}; diff --git a/config/base.json b/config/base.json new file mode 100644 index 0000000000..fdbb8f99d3 --- /dev/null +++ b/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": [] +} diff --git a/config/production.json b/config/production.json new file mode 100644 index 0000000000..7da9dd948c --- /dev/null +++ b/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" +} diff --git a/config/qa.json b/config/qa.json new file mode 100644 index 0000000000..502cf59fee --- /dev/null +++ b/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" +} diff --git a/package.json b/package.json index bcd821335d..3b58581ea9 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.js b/webpack.config.js index b002b7f873..f5103fd924 100644 --- a/webpack.config.js +++ b/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;