Presumably, working version of the spawned server

...still needs further restructuring of the code

Author: birdofpreyru

config/webpack/app-base.js

@@ -51,7 +51,10 @@ module.exports = function configFactory(ops) {
    * directory. */
   const buildInfo = {
     /* A random 32-bit key, that can be used for encryption. */
-    rndkey: forge.random.getBytesSync(32),
+    key: forge.random.getBytesSync(32),
+
+    /* This will be equal to "development" or "production" */
+    mode: ops.babelEnv,
 
     /* Build timestamp. */
     timestamp: moment.utc().toISOString(),
@@ -69,6 +72,7 @@ module.exports = function configFactory(ops) {
   entry.polyfills = _.union(entry.polyfills, [
     'babel-polyfill',
     'nodelist-foreach-polyfill',
+    'topcoder-react-utils/src/client',
   ]);
   return {
     context: o.context,
@@ -88,11 +92,7 @@ module.exports = function configFactory(ops) {
         filename: '[name].css',
       }),
       new webpack.DefinePlugin({
-        global: {
-          BUILD_RNDKEY: JSON.stringify(buildInfo.rndkey),
-          BUILD_TIMESTAMP: JSON.stringify(buildInfo.timestamp),
-          FRONT_END: true,
-        },
+        BUILD_INFO: JSON.stringify(buildInfo),
       }),
     ],
     resolve: {
@@ -107,9 +107,6 @@ module.exports = function configFactory(ops) {
       symlinks: false,
     },
     module: {
-      noParse: [
-        /node_modules[\\/]config/,
-      ],
       rules: [{
         /* Loads font resources from "src/assets/fonts" folder. */
         test: /\.(eot|otf|svg|ttf|woff2?)$/,

config/webpack/lib-base.js

@@ -39,7 +39,6 @@ module.exports = function configFactory(ops) {
       'lodash',
       'moment',
       'prop-types',
-      'raf',
       'react',
       'react-css-super-themr',
       'react-dom',
@@ -59,6 +58,7 @@ module.exports = function configFactory(ops) {
       }),
     ],
     module: {
+      noParse: [],
       rules: [{
         /* Handles font imports in url(..) instructions in CSS. Effectively,
          * with such configuration it just rewrites those URLs to point to

package-lock.json

@@ -95,8 +95,8 @@
     "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_END=production babel src --out-dir dist/src",
-    "build:dev": "npm run clean && (./node_modules/.bin/webpack --env=development --bail --colors --display-optimization-bailout --profile --progress --watch | BABEL_ENV=development babel src --out-dir dist/src --watch)",
+    "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",
+    "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)",
     "clean": "rm -rf dist",
     "jest": "jest --no-cache --maxWorkers=4 --config config/jest/default.js",
     "lint": "npm run lint:js && npm run lint:scss",

package.json

@@ -0,0 +1,7 @@
+/**
+ * Initialization of client-side code.
+ */
+
+/* global BUILD_INFO window */
+window.TRU_CONSTANTS = BUILD_INFO;
+window.TRU_FRONT_END = true;

src/client/index.js

@@ -7,11 +7,16 @@ import utils from 'utils';
 
 import 'styles/global.scss';
 
+import { requireWeak } from 'utils/webpack';
+
+const server = utils.isomorphy.isServerSide() ? requireWeak('topcoder-react-utils/dist/server') : null;
+
 export {
   Avatar,
   Button,
   Link,
   NavLink,
   ScalableRect,
+  server,
   utils,
 };

src/index.js

@@ -5,19 +5,11 @@
 import _ from 'lodash';
 import http from 'http';
 
-import { isServerSide } from 'utils/isomorphy';
-
 /* Polyfill required by ReactJS. */
 import 'raf/polyfill';
 
 import serverFactory from './server';
 
-/* TODO: Should use the isClientSide(..) method from isomorphy module, once that
- * module is moved to topcoder-react-utils. */
-if (!isServerSide()) {
-  throw new Error('Cannot execute server-side code in other environment');
-}
-
 /**
  * Normalizes a port into a number, string, or false.
  * @param {String} value Port name or number.

src/server/index.js

@@ -25,6 +25,7 @@ const sanitizedConfig = _.omit(config, 'SECRET');
  * @param {String} context Webpack context path used during the build.
  * @return {Promise} Resolves to the build-time information.
  */
+/* TODO: Use sync read, to simplify related code. */
 function getBuildInfo(context) {
   const url = path.resolve(context, '.build-info');
   return new Promise((resolve, reject) => {
@@ -48,6 +49,7 @@ function prepareCipher(key) {
     forge.random.getBytes(32, (err, iv) => {
       if (err) reject(err);
       else {
+        console.log('KEY', key);
         const cipher = forge.cipher.createCipher('AES-CBC', key);
         cipher.start({ iv });
         resolve({ cipher, iv });
@@ -65,13 +67,14 @@ function prepareCipher(key) {
 export default async function factory(webpackConfig, options) {
   const buildInfo = await getBuildInfo(webpackConfig.context);
 
+  global.TRU_CONSTANTS = buildInfo;
+  console.log('BUILD INFO', buildInfo);
+
   const ops = _.defaults(_.clone(options), {
     beforeRender: () => Promise.resolve({}),
   });
 
   return async (req, res) => {
-    global.BUILD_INFO = buildInfo;
-
     const [{
       configToInject,
       extraScripts,

src/server/renderer.jsx

@@ -8,7 +8,9 @@
 /* eslint-env browser */
 
 import { isClientSide } from './isomorphy';
+import { requireWeak } from './webpack';
 
 /* eslint-disable global-require */
-module.exports = isClientSide() ? window.CONFIG : require('config');
+console.log('IS CLIENT SIDE', isClientSide());
+module.exports = isClientSide() ? window.CONFIG : requireWeak('config');
 /* eslint-enable global-require */

src/shared/utils/config.js

@@ -7,15 +7,22 @@
  * @return {Boolean}
  */
 export function isClientSide() {
-  return Boolean(global.FRONT_END);
+  return Boolean(global.TRU_FRONT_END);
 }
 
 /**
  * Returns `true` if executed at the server side; `false` otherwise.
  * @return {Boolean}
  */
 export function isServerSide() {
-  return !global.FRONT_END;
+  return !global.TRU_FRONT_END;
+}
+
+/**
+ * @return {String} Code mode: "development" or "production".
+ */
+function getMode() {
+  return isClientSide() ? global.TRU_CONSTANTS.mode : process.env.BABEL_ENV;
 }
 
 /**
@@ -24,7 +31,7 @@ export function isServerSide() {
  * @return {Boolean}
  */
 export function isDevBuild() {
-  return process.env.BABEL_ENV === 'development';
+  return getMode() === 'development';
 }
 
 /**
@@ -33,14 +40,13 @@ export function isDevBuild() {
  * @return {Boolean}
  */
 export function isProdBuild() {
-  return process.env.BABEL_ENV === 'production';
+  return getMode() === 'production';
 }
 
 /**
  * Returns build timestamp of the front-end JS bundle.
  * @return {String} ISO date/time string.
  */
 export function buildTimestamp() {
-  if (isClientSide()) return global.BUILD_TIMESTAMP;
-  return global.BUILD_INFO.timestamp;
+  return global.TRU_CONSTANTS.timestamp;
 }

src/shared/utils/isomorphy.js

@@ -0,0 +1,14 @@
+/**
+ * Requires the specified module without including it into the bundle during
+ * Webpack build. This function should be executed only server-side.
+ * @param {String} modulePath
+ * @return Required module.
+ */
+export function requireWeak(modulePath) {
+  /* eslint-disable global-require, import/no-dynamic-require */
+  const mod = require('./require')(modulePath);
+  /* eslint-enable global-require, import/no-dynamic-require */
+  return mod.default || mod;
+}
+
+export default undefined;

src/shared/utils/webpack/index.js

@@ -0,0 +1,27 @@
+/**
+ * This helper module is a part of requireWeak(..) implementation. Webpack is
+ * configured to ignore this file, thus the code:
+ *
+ * const m = require('utils/router/require')('my-module-path');
+ *
+ * will load the module at the specified path, when exectuted at the server
+ * side, and will crush, if executed at the client side. Though, the crush at
+ * the client side can be easily prevented by adding condition:
+ *
+ * import { isServerSide } from 'utils/isomorphy';
+ *
+ * if (isServerSide()) {
+ *   const m = require('utils/router/require')('my-module-path');
+ *   // Some client-side only code.
+ * }
+ *
+ * The key point here is that the module at 'my-module-path' will not be bundled
+ * by Webpack if required this way. Thus, this way we can use static resolution
+ * of the module at the server-side, while using alternative code at the client
+ * side (dynamic module loading from the server).
+ */
+
+/* eslint-disable global-require */
+/* eslint-disable import/no-dynamic-require */
+
+module.exports = require;

src/shared/utils/webpack/require.js

@@ -14,5 +14,7 @@ module.exports = function buildConfig(env) {
     config.module.rules.find(x => x.loader === 'babel-loader');
   babelLoader.options.presets[0] = `${__dirname}/config/babel/webpack`;
 
+  config.module.noParse.push(/src\/shared\/utils\/webpack\/require/);
+
   return config;
 };