Fixed tests, coverage and build

Author: birkir

.babelrc

@@ -10,5 +10,8 @@
     ["env", { "targets": { "node": true } }],
     "stage-3",
     "react"
+  ],
+  "plugins": [
+    "syntax-dynamic-import"
   ]
 }

README.md

@@ -4,6 +4,8 @@
   <p align='center'>A starter kit for universal react applications.</p>
 </p>
 
+![Version](https://img.shields.io/github/package-json/v/ctrlplusb/react-universally.svg?style=flat-square) ![Downloads per month](https://img.shields.io/npm/dm/react-async-component.svg?style=flat-square) [![All Contributorss](https://img.shields.io/badge/all_contributors-20-orange.svg?style=flat-square)](#contributors) [![Dependencies](https://david-dm.org/ctrlplusb/react-universally.svg?style=flat-square)](https://david-dm.org/ctrlplusb/react-universally) [![devDependencies](https://david-dm.org/ctrlplusb/react-universally/dev-status.svg?style=flat-square)](https://david-dm.org/ctrlplusb/react-universally?type=dev)
+
 ## About
 
 This starter kit contains all the build tooling and configuration you need to kick off your next universal React project, whilst containing a minimal "project" set up allowing you to make your own architecture decisions (Redux/MobX etc).

config/values.js

@@ -27,7 +27,7 @@ const values = {
   },
 
   // The host on which the server should run.
-  host: EnvVars.string('HOST', '0.0.0.0'),
+  host: EnvVars.string('HOST', 'localhost'),
 
   // The port on which the server should run.
   port: EnvVars.number('PORT', 1337),

internal/development/createVendorDLL.js

@@ -38,6 +38,8 @@ function createVendorDLL(bundleName, bundleConfig) {
 
   function webpackConfigFactory() {
     return {
+      // Force development mode as the dev server should only be ran while developing.
+      mode: 'development',
       // We only use this for development, so lets always include source maps.
       devtool: 'inline-source-map',
       entry: {
@@ -94,7 +96,7 @@ function createVendorDLL(bundleName, bundleConfig) {
         level: 'warn',
         message: `Generating a new "${bundleName}" Vendor DLL for boosted development performance.
 
-The Vendor DLL helps to speed up your development workflow by reducing Webpack build times. It does this by seperating Vendor DLLs from your primary bundles, thereby allowing Webpack to ignore them when having to rebuild your code for changes. 
+The Vendor DLL helps to speed up your development workflow by reducing Webpack build times. It does this by seperating Vendor DLLs from your primary bundles, thereby allowing Webpack to ignore them when having to rebuild your code for changes.
 
 We recommend that you add all your client bundle specific dependencies to the Vendor DLL configuration (within /config).`,
       });

internal/development/hotClientServer.js

@@ -23,6 +23,7 @@ class HotClientServer {
       quiet: true,
       noInfo: true,
       headers: {
+        // Allow any host to connect to the webpack dev server
         'Access-Control-Allow-Origin': '*',
       },
       // Ensure that the public path is taken from the compiler webpack config

internal/development/hotNodeServer.js

@@ -80,6 +80,7 @@ class HotNodeServer {
 
     compiler.plugin('done', stats => {
       this.serverCompiling = false;
+      console.log('2. Done compiling');
 
       if (this.disposing) {
         return;

internal/development/index.js

@@ -1,6 +1,9 @@
+import http from 'http';
+import openBrowser from 'react-dev-utils/openBrowser';
 import chokidar from 'chokidar';
 import { resolve as pathResolve } from 'path';
 import appRootDir from 'app-root-dir';
+import config from '../../config/values';
 import { log } from '../utils';
 
 let HotDevelopment = require('./hotDevelopment').default;
@@ -12,6 +15,20 @@ const watcher = chokidar.watch([
   pathResolve(appRootDir.get(), 'config'),
 ]);
 
+// Wait until specific endpoint becomes responsive, then fire callback.
+const onResponsive = (hostname, port, cb) =>
+  setTimeout(
+    () =>
+      http
+        .get({ hostname, port, path: '/', agent: false }, cb)
+        .on('error', () => onResponsive(hostname, port, cb)),
+    1000,
+  );
+
+// Get host and port
+const host = config('host');
+const port = config('port');
+
 watcher.on('ready', () => {
   watcher.on('change', () => {
     log({
@@ -37,6 +54,9 @@ watcher.on('ready', () => {
       devServer = new HotDevelopment();
     });
   });
+
+  // Wait until devServer is started.
+  onResponsive(host, port, () => openBrowser(`http://${host}:${port}`));
 });
 
 // If we receive a kill cmd then we will first try to dispose our listeners.

internal/webpack/configFactory.js

@@ -1,6 +1,7 @@
 import appRootDir from 'app-root-dir';
 import AssetsPlugin from 'assets-webpack-plugin';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import nodeExternals from 'webpack-node-externals';
 import path from 'path';
 import webpack from 'webpack';
@@ -18,7 +19,7 @@ import config from '../../config';
  * This function has been configured to support one "client/web" bundle, and any
  * number of additional "node" bundles (e.g. our "server").  You can define
  * additional node bundles by editing the project confuguration.
- *
+ com
  * @param  {Object} buildOptions - The build options.
  * @param  {target} buildOptions.target - The bundle target (e.g 'clinet' || 'server').
  * @param  {target} buildOptions.optimize - Build an optimised version of the bundle?
@@ -171,6 +172,41 @@ export default function webpackConfigFactory(buildOptions) {
       false,
     ),
 
+    // Webpack 4 automatically runs UglifyPlugin and other optimization processes.
+    // It can be configured here:
+    optimization: {
+      minimizer: ifProdClient([
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            ecma: 8,
+            compress: {
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          // Use multi-process parallel running to improve the build speed
+          // Default number of concurrent runs: os.cpus().length - 1
+          parallel: true,
+          // Enable file caching
+          cache: true,
+          sourceMap: config('includeSourceMapsForOptimisedClientBundle'),
+        }),
+      ]),
+    },
+
     resolve: {
       // These extensions are tried when resolving a file.
       extensions: config('bundleSrcTypes').map(ext => `.${ext}`),
@@ -223,11 +259,6 @@ export default function webpackConfigFactory(buildOptions) {
           }),
       ),
 
-      // Implement webpack 3 scope hoisting that will remove function wrappers
-      // around your modules you may see some small size improvements. However,
-      // the significant improvement will be how fast the JavaScript loads in the browser.
-      ifProdClient(new webpack.optimize.ModuleConcatenationPlugin()),
-
       // These are process.env flags that you can use in your code in order to
       // have advanced control over what is included/excluded in your bundles.
       // For example you may only want certain parts of your code to be
@@ -291,35 +322,6 @@ export default function webpackConfigFactory(buildOptions) {
       // We need this plugin to enable hot reloading of our client.
       ifDevClient(() => new webpack.HotModuleReplacementPlugin()),
 
-      // For our production client we need to make sure we pass the required
-      // configuration to ensure that the output is minimized/optimized.
-      ifProdClient(
-        () =>
-          new webpack.LoaderOptionsPlugin({
-            minimize: true,
-          }),
-      ),
-
-      // For our production client we need to make sure we pass the required
-      // configuration to ensure that the output is minimized/optimized.
-      ifProdClient(
-        () =>
-          new webpack.optimize.UglifyJsPlugin({
-            sourceMap: config('includeSourceMapsForOptimisedClientBundle'),
-            compress: {
-              screw_ie8: true,
-              warnings: false,
-            },
-            mangle: {
-              screw_ie8: true,
-            },
-            output: {
-              comments: false,
-              screw_ie8: true,
-            },
-          }),
-      ),
-
       // For the production build of the client we need to extract the CSS into
       // CSS files.
       ifProdClient(