Refactor configuration for server and client

.eslintrc

@@ -5,6 +5,7 @@
   "extends": "airbnb",
   "globals": {
     "CLIENT": true,
+    "CLIENT_CONFIG": true,
     "DEVELOPMENT": true,
     "SERVER": true,
     "assert": true,

bin/server.js

@@ -1,10 +1,9 @@
 #!/usr/bin/env node
 
 require('babel-register');
-const config = require('config').default;
-const env = config.get('env');
+const config = require('config');
 
-if (env === 'development') {
+if (config.util.getEnv('NODE_ENV') === 'development') {
   if (!require('piping')({
     hook: true,
     ignore: /(\/\.|~$|\.json|\.scss$)/i,

bin/webpack-dev-server.js

@@ -8,9 +8,9 @@ const Express = require('express');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
-const webpackDevConfig = require('config/webpack.dev.config.babel').default;
+const webpackDevConfig = require('webpack.dev.config.babel').default;
 
-const config = require('config').default;
+const config = require('config');
 
 const host = config.get('webpackServerHost');
 const port = config.get('webpackServerPort');

config/default-disco.js

@@ -0,0 +1 @@
+module.exports = {};

config/default-search.js

@@ -0,0 +1 @@
+module.exports = {};

config/default.js

@@ -0,0 +1,79 @@
+// CONFIG defaults (aka PRODUCTION)
+// WARNING: No test/stage/dev/development config should
+// live here.
+
+/* eslint-disable object-shorthand */
+
+const path = require('path');
+const defer = require('config/defer').deferConfig;
+
+const appName = process.env.NODE_APP_INSTANCE || null;
+const validAppNames = [
+  'disco',
+  'search',
+];
+
+// Throw if the appName supplied is not valid.
+if (appName && validAppNames.indexOf(appName) === -1) {
+  throw new Error(`App ${appName} is not enabled`);
+}
+
+module.exports = {
+  appName: appName,
+  basePath: path.resolve(__dirname, '../'),
+
+  // 2592000 is 30 days in seconds.
+  cookieMaxAge: 2592000,
+  cookieName: 'jwt_api_auth_token',
+
+  // The canonical list of enabled apps.
+  validAppNames: validAppNames,
+
+  // The node server host and port.
+  serverHost: '127.0.0.1',
+  serverPort: 4000,
+
+  // The CDN host for AMO.
+  amoCDN: 'https://addons.cdn.mozilla.net',
+
+  apiHost: 'https://addons.mozilla.org',
+  apiPath: '/api/v3',
+  apiBase: defer((cfg) => cfg.apiHost + cfg.apiPath),
+  startLoginUrl: defer((cfg) => `${cfg.apiBase}/internal/accounts/login/start/`),
+
+  // The keys listed here will be exposed on the client.
+  // Since by definition client-side code is public these config keys
+  // must not contain sensitive data.
+  clientConfigKeys: [
+    'apiBase',
+    'cookieName',
+    'cookieMaxAge',
+    'startLoginUrl',
+  ],
+
+  // Content security policy.
+  CSP: {
+    directives: {
+      defaultSrc: ["'self'"],
+      connectSrc: defer((cfg) => ["'self'", cfg.apiHost]),
+      imgSrc: defer((cfg) => [
+        "'self'",
+        cfg.amoCDN,
+      ]),
+      scriptSrc: ["'self'"],
+      styleSrc: ["'self'"],
+      reportUri: '/__cspreport__',
+    },
+
+    // Set to true if you only want browsers to report errors, not block them
+    reportOnly: false,
+
+    // Set to true if you want to blindly set all headers: Content-Security-Policy,
+    // X-WebKit-CSP, and X-Content-Security-Policy.
+    setAllHeaders: false,
+
+    // Set to true if you want to disable CSP on Android where it can be buggy.
+    disableAndroid: false,
+  },
+
+};

config/dev.js

@@ -0,0 +1,6 @@
+// Config for the -dev server.
+
+module.exports = {
+  apiHost: 'https://addons-dev.allizom.org',
+  amoCDN: 'https://addons-dev-cdn.allizom.org',
+};

config/development.js

@@ -0,0 +1,23 @@
+// Config specific to local development
+
+const defer = require('config/defer').deferConfig;
+
+module.exports = {
+  serverPort: 3000,
+
+  apiHost: 'https://addons-dev.allizom.org',
+  amoCDN: 'https://addons-dev-cdn.allizom.org',
+
+  webpackServerHost: '127.0.0.1',
+  webpackServerPort: 3001,
+  webpackHost: defer((cfg) => `http://${cfg.webpackServerHost}:${cfg.webpackServerPort}`),
+
+  CSP: {
+    directives: {
+      connectSrc: defer((cfg) => ["'self'", cfg.apiHost, cfg.webpackHost]),
+      scriptSrc: defer((cfg) => ["'self'", cfg.webpackHost]),
+      styleSrc: ["'self'", 'blob:'],
+    },
+    reportOnly: true,
+  },
+};

config/production.js

@@ -0,0 +1,2 @@
+// The default conf should cover this.
+module.exports = {};

config/stage.js

@@ -0,0 +1,6 @@
+// Config for the stage server.
+
+module.exports = {
+  apiHost: 'https://addons.allizom.org',
+  amoCDN: 'https://addons-stage-cdn.allizom.org',
+};

karma.conf.js

@@ -1,35 +1,50 @@
 // Karma configuration
-/* eslint-disable no-console */
+/* eslint-disable max-len, no-console */
 require('babel-register');
 
+const fs = require('fs');
+
+const babelrc = fs.readFileSync('./.babelrc');
+const babelQuery = JSON.parse(babelrc);
 const webpack = require('webpack');
-const webpackDevConfig = require('./src/config/webpack.dev.config.babel').default;
+const webpackConfigProd = require('./webpack.prod.config.babel').default;
+const config = require('config');
+const getClientConfig = require('src/core/utils').getClientConfig;
+const clientConfig = getClientConfig(config);
 
 const coverageReporters = [{
   type: 'text-summary',
 }];
 
-const newWebpackConfig = Object.assign({}, webpackDevConfig, {
+
+const newWebpackConfig = Object.assign({}, webpackConfigProd, {
   plugins: [
     new webpack.DefinePlugin({
-      DEVELOPMENT: true,
+      DEVELOPMENT: false,
       CLIENT: true,
       SERVER: false,
+      CLIENT_CONFIG: JSON.stringify(clientConfig),
     }),
-    new webpack.EnvironmentPlugin([
-      'NODE_ENV',
-      'API_HOST',
-    ]),
+    new webpack.NormalModuleReplacementPlugin(/config$/, 'client-config.js'),
   ],
   devtool: 'inline-source-map',
-  module: Object.assign({}, webpackDevConfig.module, {
+  module: {
     preLoaders: [{
       test: /\.jsx?$/,
       loader: 'babel-istanbul',
       include: /src\//,
       exclude: /node_modules/,
     }],
-  }),
+    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel',
+      query: babelQuery,
+    }, {
+      test: /\.scss$/,
+      loader: 'style!css?importLoaders=2!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded',
+    }],
+  },
   output: undefined,
   entry: undefined,
 });
@@ -48,8 +63,8 @@ if (process.env.TRAVIS) {
   coverageReporters.push({type: 'html', dir: 'coverage', subdir: '.'});
 }
 
-module.exports = function karmaConf(config) {
-  config.set({
+module.exports = function karmaConf(conf) {
+  conf.set({
     coverageReporter: {
       reporters: coverageReporters,
     },

package.json

@@ -8,91 +8,110 @@
     "build": "better-npm-run build",
     "build:disco": "better-npm-run build:disco",
     "build:search": "better-npm-run build:search",
-    "clean": "rimraf './dist/*+(css|js|map)' './src/webpack-assets.json' './src/sri.json'",
+    "clean": "rimraf './dist/*+(css|js|map|json)' './webpack-assets.json'",
     "dev:disco": "better-npm-run dev:disco",
     "dev:search": "better-npm-run dev:search",
     "eslint": "npm run lint",
     "lint": "eslint .",
     "servertest": "npm run build && better-npm-run servertest",
     "start:disco": "better-npm-run start:disco",
     "start:search": "better-npm-run start:search",
-    "test": "npm run version-check && npm run unittest && npm run servertest && npm run lint",
-    "unittest": "karma start --single-run",
-    "unittest:dev": "karma start",
+    "test": "better-npm-run test",
+    "unittest": "better-npm-run unittest",
+    "unittest:dev": "better-npm-run unittest:dev",
     "version-check": "node bin/version-check.js",
     "webpack-dev-server": "better-npm-run webpack-dev-server"
   },
   "betterScripts": {
     "build": {
-      "command": "npm run clean && npm run version-check && webpack --verbose --display-error-details --progress --colors --config src/config/webpack.prod.config.babel.js",
+      "command": "npm run clean && npm run version-check && webpack --verbose --display-error-details --progress --colors --config webpack.prod.config.babel.js",
       "env": {
-        "NODE_ENV": "production",
-        "NODE_PATH": "$NODE_PATH:./src"
+        "NODE_PATH": "./:./src"
       }
     },
     "build:disco": {
       "command": "npm run build",
       "env": {
-        "APP_NAME": "disco"
+        "NODE_APP_INSTANCE": "disco"
       }
     },
     "build:search": {
       "command": "npm run build",
       "env": {
-        "APP_NAME": "search"
+        "NODE_APP_INSTANCE": "search"
       }
     },
     "dev:disco": {
       "command": "better-npm-run start-dev",
       "env": {
-        "APP_NAME": "disco"
+        "NODE_APP_INSTANCE": "disco"
       }
     },
     "dev:search": {
       "command": "better-npm-run start-dev",
       "env": {
-        "APP_NAME": "search"
+        "NODE_APP_INSTANCE": "search"
       }
     },
     "start-dev": {
       "command": "npm run clean && concurrently --kill-others 'npm run webpack-dev-server' 'node bin/server.js'",
       "env": {
+        "ENABLE_PIPING": "true",
         "NODE_ENV": "development",
-        "NODE_PATH": "$NODE_PATH:./src",
-        "ENABLE_PIPING": "true"
+        "NODE_PATH": "./:./src"
       }
     },
     "servertest": {
       "command": "mocha --compilers js:babel-register tests/server/",
       "env": {
-        "NODE_ENV": "production",
-        "NODE_PATH": "$NODE_PATH:./src:tests/server"
+        "NODE_PATH": "./:./src",
+        "NODE_ENV": "production"
       }
     },
     "start": {
       "command": "npm run version-check && node bin/server.js",
       "env": {
-        "NODE_ENV": "production",
-        "NODE_PATH": "$NODE_PATH:./src"
+        "NODE_PATH": "./:./src"
       }
     },
     "start:search": {
       "command": "better-npm-run start",
       "env": {
-        "APP_NAME": "search"
+        "NODE_APP_INSTANCE": "search"
       }
     },
     "start:disco": {
       "command": "better-npm-run start",
       "env": {
-        "APP_NAME": "disco"
+        "NODE_APP_INSTANCE": "disco"
+      }
+    },
+    "test": {
+      "command": "npm run version-check && npm run unittest && npm run servertest && npm run lint",
+      "env": {
+        "NODE_PATH": "./:./src",
+        "NODE_ENV": "production"
+      }
+    },
+    "unittest": {
+      "command": "karma start --single-run",
+      "env": {
+        "NODE_PATH": "./:./src",
+        "NODE_ENV": "production"
+      }
+    },
+    "unittest:dev": {
+      "command": "karma start",
+      "env": {
+        "NODE_PATH": "./:./src",
+        "NODE_ENV": "production"
       }
     },
     "webpack-dev-server": {
       "command": "node bin/webpack-dev-server.js",
       "env": {
         "NODE_ENV": "development",
-        "NODE_PATH": "$NODE_PATH:./src"
+        "NODE_PATH": "./:./src"
       }
     }
   },
@@ -110,6 +129,7 @@
     "better-npm-run": "0.0.8",
     "camelcase": "2.1.1",
     "common-tags": "0.0.3",
+    "config": "1.20.1",
     "express": "4.13.4",
     "extract-text-webpack-plugin": "1.0.1",
     "helmet": "1.3.0",
@@ -170,6 +190,7 @@
     "react-hot-loader": "1.3.0",
     "react-transform-hmr": "1.0.4",
     "redux-devtools": "3.2.0",
+    "require-uncached": "1.0.2",
     "rimraf": "2.5.2",
     "sass-loader": "3.1.2",
     "semver": "5.1.0",

src/client-config.js

@@ -0,0 +1,14 @@
+/*
+ * This module is a stand-in for the config module
+ * when imported on the client.
+ * When webpack builds the client-side code it exposes
+ * the clientConfig config via the definePlugin as CLIENT_CONFIG.
+ */
+
+const clientConfig = new Map();
+
+Object.keys(CLIENT_CONFIG).forEach((key) => {
+  clientConfig.set(key, CLIENT_CONFIG[key]);
+});
+
+module.exports = clientConfig;