Fixes of the standard client-side initialization code

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Topcoder React Utils Changelog
 
+### v0.3.2
+- Adds the client-side initialization code, and makes some corrections of the
+  standard Wepback configs and server setup.
+
 ### v0.3.0
 - Added the standard, configurable server setup;
 - Jest utils are now exposed in a different way;

config/webpack/app-base.js

@@ -39,6 +39,12 @@ const webpack = require('webpack');
  *  passed in, it is assigned to the "main" entry point, and the "polyfills"
  *  entry point will be added to it.
  *
+ * @param {Boolean} ops.keepBuildInfo Optional. If `true` and a build info file
+ *  from a previous build is found, the factory will use that rather than
+ *  re-generating it. This provide the way to re-create webpack config at the
+ *  server startup, without re-writing the build info generated previously
+ *  during the bundling. Defaults to `false`.
+ *
  * @param {String} ops.publicPath Base URL for the output of the build assets.
  */
 module.exports = function configFactory(ops) {
@@ -47,20 +53,26 @@ module.exports = function configFactory(ops) {
     publicPath: '',
   });
 
-  /* Stores misc build info into the local ".build-info" file in the context
-   * directory. */
-  const buildInfo = {
-    /* A random 32-bit key, that can be used for encryption. */
-    key: forge.random.getBytesSync(32),
+  let buildInfo;
+  const buildInfoUrl = path.resolve(o.context, '.build-info');
+  /* If build-info file is found, we reuse those data. */
+  if (fs.existsSync(buildInfoUrl) && o.keepBuildInfo) {
+    buildInfo = JSON.parse(fs.readFileSync(buildInfoUrl));
+  } else {
+    /* Stores misc build info into the local ".build-info" file in the context
+     * directory. */
+    buildInfo = {
+      /* A random 32-bit key, that can be used for encryption. */
+      key: forge.random.getBytesSync(32),
 
-    /* This will be equal to "development" or "production" */
-    mode: ops.babelEnv,
+      /* This will be equal to "development" or "production" */
+      mode: ops.babelEnv,
 
-    /* Build timestamp. */
-    timestamp: moment.utc().toISOString(),
-  };
-  const buildInfoUrl = path.resolve(o.context, '.build-info');
-  fs.writeFileSync(buildInfoUrl, JSON.stringify(buildInfo));
+      /* Build timestamp. */
+      timestamp: moment.utc().toISOString(),
+    };
+    fs.writeFileSync(buildInfoUrl, JSON.stringify(buildInfo));
+  }
 
   /* Entry points normalization. */
   const entry = _.isPlainObject(o.entry)
@@ -72,7 +84,7 @@ module.exports = function configFactory(ops) {
   entry.polyfills = _.union(entry.polyfills, [
     'babel-polyfill',
     'nodelist-foreach-polyfill',
-    'topcoder-react-utils/src/client',
+    'topcoder-react-utils/src/client/init',
   ]);
   return {
     context: o.context,
@@ -117,7 +129,7 @@ module.exports = function configFactory(ops) {
         loader: 'file-loader',
         options: {
           outputPath: '/fonts/',
-          publicPath: o.publicPath,
+          publicPath: `${o.publicPath}/fonts`,
         },
       }, {
         /* Loads JS and JSX moudles, and inlines SVG assets. */
@@ -135,7 +147,7 @@ module.exports = function configFactory(ops) {
         loader: 'file-loader',
         options: {
           outputPath: '/images/',
-          publicPath: o.publicPath,
+          publicPath: `${o.publicPath}/images`,
         },
       }, {
         /* Loads SCSS stylesheets. */

config/webpack/lib-base.js

@@ -7,6 +7,7 @@
 const autoprefixer = require('autoprefixer');
 const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
 const path = require('path');
+const webpack = require('webpack');
 
 /**
  * Creates a new Webpack config object.
@@ -52,6 +53,12 @@ module.exports = function configFactory(ops) {
       libraryTarget: 'umd',
     },
     plugins: [
+      new webpack.DefinePlugin({
+        'process.env': {
+          BABEL_ENV: JSON.stringify(ops.babelEnv),
+          NODE_ENV: JSON.stringify(ops.babelEnv),
+        },
+      }),
       new ExtractCssChunks({
         filename: 'style.css',
       }),

docs/client.md

@@ -1,4 +1,27 @@
 # Client
 Client-side intialization code.
 
-*Documentation will be added here*
+- **Why?** — For the same reasons we have the standard
+  [server setup](./server.md).
+
+This module exports a single **`Launch(options)`** function that starts the app
+at the client side. It renders the app, wraps it with
+[`react-router`](https://www.npmjs.com/package/react-router)'s `<BrowserRouter>`,
+and Redux store `<Provider>`, if necessary; then injects it into the page HTML
+template generated by the server. In the case of use with development server,
+it also takes care about HMR (Hot Module Reloading) setup at the clients-side.
+
+**`options`** should be a JS object, with the following fields:
+- **`Application`** &mdash; *Function* &mdash; The root ReactJS component of
+  the app to be rendered.
+- **`storeFactory`** &mdash; *Function* &mdash; Optional. Redux store factory.
+  If provided, it will be used to generate Redux store that will be provided to
+  the app. Its signature should be:
+
+  **Arguments**
+  - **`initialState`** &mdash; *Object* &mdash; Initial Redux state, injected by
+    the server (will be `undefined`, if it is not generated by the current
+    server setup).
+
+  **Returns**
+  - *Promise* that resolves to the created Redux store.

docs/webpack-config.md

@@ -50,6 +50,12 @@ mutation of the config object.
       [nodelist-foreach-polyfill](https://www.npmjs.com/package/nodelist-foreach-polyfill)).
       If a string or a string array is passed in, it is assigned to the *main*
       entry pont, and the *polyfills* entry point is added then;
+    - **`keepBuildInfo`** — *Boolean* — Optional. If `true` and a
+      `.build-info` file from a previous build exists in the context directory,
+      it will be loaded and used, rather than re-generated by the config factory.
+      It allows to re-create the Webpack config during a server launch without
+      re-generation of the build info file created during a previous build
+      (and thus bundled into the frontend bundle). Defaults to `false`.
     - **`publicPath`** — *String* — Base URL for the output of
       the build assets;
 

package-lock.json

@@ -96,15 +96,15 @@
     "url": "git+https://github.com/topcoder-platform/topcoder-react-utils.git"
   },
   "scripts": {
-    "build": "npm run clean && ./node_modules/.bin/webpack --env=production --colors --display-optimization-bailout --profile --progress && BABEL_ENV=production babel src/server --out-dir dist/server && BABEL_ENV=production babel src/shared/utils/jest.jsx --out-file dist/shared/utils/jest.js",
-    "build:dev": "npm run clean && (./node_modules/.bin/webpack --env=development --bail --colors --display-optimization-bailout --profile --progress --watch | BABEL_ENV=development babel src/server --out-dir dist/server --watch | BABEL_ENV=development babel src/shared/utils/jest.jsx --out-file dist/shared/utils/jest.js --watch)",
-    "clean": "rm -rf dist && mkdir -p dist/shared/utils",
+    "build": "npm run clean && ./node_modules/.bin/webpack --env=production --colors --display-optimization-bailout --profile --progress && BABEL_ENV=production babel src/server --out-dir dist/server && BABEL_ENV=production babel src/shared/utils/jest.jsx --out-file dist/shared/utils/jest.js && BABEL_ENV=production babel src/client/init.js --out-file dist/client/init.js",
+    "build:dev": "npm run clean && (./node_modules/.bin/webpack --env=development --bail --colors --display-optimization-bailout --profile --progress --watch | BABEL_ENV=development babel src/server --out-dir dist/server --watch | BABEL_ENV=development babel src/shared/utils/jest.jsx --out-file dist/shared/utils/jest.js --watch | BABEL_ENV=development babel src/client/init.js --out-file dist/client/init.js --watch)",
+    "clean": "rm -rf dist && mkdir -p dist/shared/utils && mkdir -p dist/client",
     "jest": "jest --no-cache --maxWorkers=4 --config config/jest/default.js",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint --ext .js,.jsx .",
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
     "prepublishOnly": "npm run build",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.3.1"
+  "version": "0.3.2"
 }

package.json

@@ -2,9 +2,8 @@
  * Initialization of client-side code.
  */
 
-/* global BUILD_INFO document window */
+/* global document window */
 
-import forge from 'node-forge';
 import React from 'react';
 import ReactDom from 'react-dom';
 import shortId from 'shortid';
@@ -27,45 +26,19 @@ function render(Application, store) {
  * injected at the server-side, and also about setting up client side of hot
  * module reloading (HMR).
  * @param {Object} options Parameters accepted by the function.
- * @param {Function} options.Application Root component of the application to be
- *  rendered at the client side.
- * @param {String} options.appModulePath Optional. Path to the root module of
- *  the application. It should be provided to setup HMR.
- * @param {Function} options.customInit Optional. A custom function to be called
- *  before initial client-side rendering. It should return a promise that
- *  resolves to an object with the following params:
- *  - store {Object} - Optional. Redux store to be used.
+ * @param {Function} options.Application Rendered app component.
+ * @param {Function} options.storeFactory Optional. Given the initials state
+ *  of redux store should create the store.
  */
-export default async function Init(options) {
-  /* Injection of build-time data information into the client-side bundle. */
-  window.TRU_BUILD_INFO = BUILD_INFO;
-  window.TRU_FRONT_END = true;
-
-  /* Removes data injection script out of the document. */
-  const block = document.querySelector('script[id="inj"]');
-  document.getElementsByTagName('body')[0].removeChild(block);
-
-  /* Decodes data injected at the server side. */
-  const { key } = window.TRU_BUILD_INFO;
-  let data = forge.util.decode64(window.INJ);
-  const decipher = forge.cipher.createDecipher('AES-CBC', key);
-  decipher.start({ iv: data.slice(0, 32) });
-  decipher.update(forge.util.createBuffer(data.slice(32)));
-  decipher.finish();
-  data = JSON.parse(forge.util.decodeUtf8(decipher.output.data));
-
-  window.CONFIG = data.CONFIG;
-  window.ISTATE = data.ISTATE;
-
+export default async function Launch(options) {
   let store;
-  if (options.customInit) ({ store } = await options.customInit());
+  if (options.storeFactory) {
+    store = await options.storeFactory(window.ISTATE);
+  }
   render(options.Application, store);
 
-  if (module.hot && options.appModulePath) {
-    module.hot.accept(
-      options.appModulePath,
-      () => render(options.Application, store),
-    );
+  if (module.hot) {
+    module.hot.accept('.', () => render(options.Application, store));
 
     /* HMR of CSS code each time webpack hot middleware updates the code. */
     /* eslint-disable no-underscore-dangle */

src/client/index.jsx

@@ -0,0 +1,26 @@
+/**
+ * Initialization of client-side environment.
+ */
+
+/* global BUILD_INFO, document, window */
+
+import forge from 'node-forge';
+
+window.TRU_BUILD_INFO = BUILD_INFO;
+window.TRU_FRONT_END = true;
+
+/* Removes data injection script out of the document. */
+const block = document.querySelector('script[id="inj"]');
+document.getElementsByTagName('body')[0].removeChild(block);
+
+/* Decodes data injected at the server side. */
+const { key } = window.TRU_BUILD_INFO;
+let data = forge.util.decode64(window.INJ);
+const decipher = forge.cipher.createDecipher('AES-CBC', key);
+decipher.start({ iv: data.slice(0, 32) });
+decipher.update(forge.util.createBuffer(data.slice(32)));
+decipher.finish();
+data = JSON.parse(forge.util.decodeUtf8(decipher.output.data));
+
+window.CONFIG = data.CONFIG;
+window.ISTATE = data.ISTATE;

src/client/init.js

@@ -1,6 +1,6 @@
-import client from 'client';
 import Avatar from 'components/Avatar';
 import Button from 'components/Button';
+import client from 'client';
 import Link from 'components/Link';
 import NavLink from 'components/NavLink';
 import ScalableRect from 'components/ScalableRect';
@@ -14,9 +14,9 @@ const server = utils.isomorphy.isServerSide() ?
   requireWeak('topcoder-react-utils/dist/server') : null;
 
 module.exports = {
-  client,
   Avatar,
   Button,
+  client,
   Link,
   NavLink,
   ScalableRect,