Misc fixes

Author: birdofpreyru

README.md

@@ -61,8 +61,9 @@ only need to call `adopt-dev-deps` again if you update
   the same uniform manner;
 - [**`ScalableRect`**](docs/scalable-rect.md) — Container that keeps
   the specified aspect ratio regardless the width you set.
-  
+
 ### <a name="utilities">Utilities</a>
+- [**Config**](docs/config.md) &mdash; Isomorphic app config;
 - [**Global Styles**](docs/global-styles.md) &mdash; Global styles necessary for
   a generic application;
 - [**Isomorphy**](docs/isomorphy-utils.md) &mdash; Collection of helpers to deal

__tests__/__snapshots__/index.js.snap

@@ -8,6 +8,7 @@ Object {
   "NavLink": [Function],
   "ScalableRect": [Function],
   "utils": Object {
+    "config": Config {},
     "isomorphy": Object {
       "buildTimestamp": [Function],
       "isClientSide": [Function],

__tests__/shared/utils/config.js

@@ -0,0 +1,32 @@
+/* eslint-env browser */
+
+import _ from 'lodash';
+import { isClientSide, isServerSide } from 'utils/isomorphy';
+
+const CLIENT_SIDE_CONFIG = {
+  TYPE: 'CLIENT_SIDE_CONFIG',
+};
+
+const SERVER_SIDE_CONFIG = {
+  TYPE: 'SERVER_SIDE_CONFIG',
+};
+
+jest.setMock('config', _.clone(SERVER_SIDE_CONFIG));
+
+beforeEach(() => {
+  jest.resetModules();
+  window.CONFIG = _.clone(CLIENT_SIDE_CONFIG);
+});
+
+afterEach(() => delete global.FRONT_END);
+
+test('Serves injected config at the client side', () => {
+  global.FRONT_END = true;
+  expect(isClientSide()).toBe(true);
+  expect(require('utils/config')).toEqual(CLIENT_SIDE_CONFIG);
+});
+
+test('Serves node-config at the server side', () => {
+  expect(isServerSide()).toBe(true);
+  expect(require('utils/config')).toEqual(SERVER_SIDE_CONFIG);
+});

config/webpack/lib-base.js

@@ -35,6 +35,7 @@ module.exports = function configFactory(ops) {
     entry: ops.entry,
     externals: [
       'babel-runtime',
+      'config',
       'lodash',
       'moment',
       'prop-types',

docs/config-utils.md

@@ -0,0 +1,23 @@
+# Config
+Isomorphic app config.
+
+**Why?** — we use [node-config](https://github.com/lorenwest/node-config)
+for convenient configuration of our apps. `node-config` itself works in NodeJS
+environment only. This utility exposes the config in isomorphic way that works
+both at server- and client-side.
+
+Use it this way:
+```js
+import { utils } from 'topcoder-react-utils';
+
+const config = utils.config;
+```
+
+Keep in mind that config still can be different at client- and server-side, due
+to normalization during injection into the HTML page template:
+- Some sensitive config params can be trimmed out of the injected config (by
+  default we remove `SECRET` key);
+- Some extra data can be appended to the config, anything that does not come
+  from `node-config`, and is not stored in Redux state (although, most probably,
+  it should be), but still should be transmitted to the client side and be
+  available inside JS.

docs/server.md

@@ -55,13 +55,18 @@ props:
   logging. Defaults to `console`, otherwise it is expected to provide the same
   interface. Note that `console` is not efficient for production use, because
   it is not async in NodeJS.
-- **`beforeRender`** — *Function* — Optional. The hook to be
-  executed right before the generation of HTML template of the page. If given,
-  it will receive the HTTP request as its only argument, and
-  it should return a promise that resolves to an object with the following
-  fields (all are optional):
-  - **`config`** — *Object* — Config object to inject into the
-    template.
+- **`beforeRender`** — *Function(req, config)* — Optional. The hook to be
+  executed right before the generation of HTML template of the page.
+
+  **Arguments:**
+  - **`req`** — *Object* — ExpressJS HTTP request;
+  - **`config`** — *Object* — App config that server wants to inject
+    into HTML page template;
+  
+  **Returns:** Promise that resolves to an object with the following fields:
+  - **`config`** — *Object* — Optional. The actual config object
+    to be injected into the page. If omitted, the one proposed by the server
+    will be used.
   - **`extraScripts`** — *String[]* — Additional script tags to be
     injected into the page.
   - **`store`** — *Object* — Redux store which state will be

package-lock.json

@@ -9,6 +9,7 @@
     "atob": "^2.0.3",
     "babel-runtime": "^6.26.0",
     "body-parser": "^1.18.2",
+    "config": "^1.30.0",
     "cookie-parser": "^1.4.3",
     "express": "^4.16.2",
     "helmet": "^3.11.0",
@@ -105,5 +106,5 @@
     "prepublishOnly": "npm run build",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.2.3"
+  "version": "0.2.4"
 }

package.json

@@ -2,7 +2,6 @@
  * Standard web servers.
  */
 
-import atob from 'atob';
 import _ from 'lodash';
 import http from 'http';
 
@@ -13,10 +12,6 @@ import 'raf/polyfill';
 
 import serverFactory from './server';
 
-/* Polyfill for codes that rely on atob(..) function present in broswer
- * environments. */
-global.atob = atob;
-
 /* TODO: Should use the isClientSide(..) method from isomorphy module, once that
  * module is moved to topcoder-react-utils. */
 if (!isServerSide()) {

src/server/index.js

@@ -3,6 +3,7 @@
  */
 
 import _ from 'lodash';
+import config from 'config';
 import forge from 'node-forge';
 import fs from 'fs';
 import path from 'path';
@@ -13,6 +14,8 @@ import { Helmet } from 'react-helmet';
 import { Provider } from 'react-redux';
 import { StaticRouter } from 'react-router-dom';
 
+const sanitizedConfig = _.omit(config, 'SECRET');
+
 /**
  * Reads build-time information about the app. This information is generated
  * by our standard Webpack config for apps, and it is written into
@@ -70,14 +73,14 @@ export default async function factory(webpackConfig, options) {
     global.BUILD_INFO = buildInfo;
 
     const [{
-      config,
+      configToInject,
       extraScripts,
       store,
     }, {
       cipher,
       iv,
     }] = await Promise.all([
-      ops.beforeRender(req),
+      ops.beforeRender(req, sanitizedConfig),
       prepareCipher(buildInfo.key),
     ]);
 
@@ -116,7 +119,7 @@ export default async function factory(webpackConfig, options) {
      * Hovewer, for a number of reasons, encryption of injected data is still
      * better than injection of a plain text. */
     cipher.update(forge.util.createBuffer(JSON.stringify({
-      CONFIG: config,
+      CONFIG: configToInject || sanitizedConfig,
       ISTATE: store ? store.getState() : null,
     }), 'utf8'));
     cipher.finish();

src/server/renderer.jsx

@@ -0,0 +1,14 @@
+/**
+ * This module provides isomorphic configuration. At the client-side it serves
+ * cofiguration object from the global CONFIG variable, injected into the page
+ * during the server-side rendering; at the server side it is fetched directly
+ * from node-config.
+ */
+
+/* eslint-env browser */
+
+import { isClientSide } from './isomorphy';
+
+/* eslint-disable global-require */
+module.exports = isClientSide() ? window.CONFIG : require('config');
+/* eslint-enable global-require */

src/shared/utils/config.js

@@ -1,5 +1,7 @@
+import config from './config';
 import * as isomorphy from './isomorphy';
 
 export default {
+  config,
   isomorphy,
 };