Use babel-cli on webpack config so we can use modules. Simplify and remove unnecessary host module.

Author: calvinl

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-redux-starter",
-  "description": "A universal starter kit built with ES2015, react, react-router and redux. Server rendering with react and express. Bundled with Webpack with hot module and css reloading with SCSS support.",
-  "version": "1.0.0",
+  "name": "universal-react-redux",
+  "description": "A universal starter kit built with ES2015, react, react-router and redux. Server rendering with react and express. Bundled with Webpack with HMR transforms and css-modules support.",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "client/index.js",
   "config": {
@@ -19,9 +19,9 @@
     "start": "npm run dev:build && npm run dev:start",
     "dev:start": "npm run dev:start:client & npm run dev:start:server",
     "dev:start:server": "NODE_ENV=development $(npm bin)/nodemon server",
-    "dev:start:client": "NODE_ENV=development node webpack/dev.hot",
-    "dev:build": "NODE_ENV=development $(npm bin)/webpack --progress --colors --display-error-details --config webpack/dev.js",
-    "prod:build": "NODE_ENV=production $(npm bin)/webpack -p --optimize-dedupe --config webpack/prod.js",
+    "dev:start:client": "NODE_ENV=development $(npm bin)/babel-node webpack/development.hot",
+    "dev:build": "NODE_ENV=development $(npm bin)/babel-node $(npm bin)/webpack --progress --colors --display-error-details --config webpack/development.js",
+    "prod:build": "NODE_ENV=production $(npm bin)/babel-node $(npm bin)/webpack -p --optimize-dedupe --config webpack/production.js",
     "prod:start": "NODE_ENV=production pm2 start server --name='callai'",
     "test": "$(npm bin)/mocha --recursive --compilers js:babel-register",
     "test:all": "$(npm bin)/mocha --recursive --compilers js:babel-register $(find . -path ./node_modules -prune -o -name '*.test.js' -print)",
@@ -42,14 +42,14 @@
     "redux-devtools": "3.3.1",
     "redux-devtools-dock-monitor": "1.1.1",
     "redux-devtools-log-monitor": "1.0.11",
-    "webpack-dashboard": "0.1.8",
-    "webpack-dev-server": "1.15.0",
+    "webpack-dev-server": "1.15.1",
     "webpack-sources": "0.1.2"
   },
   "dependencies": {
     "app-module-path": "1.1.0",
-    "autoprefixer": "6.4.0",
+    "autoprefixer": "6.4.1",
     "babel": "6.5.2",
+    "babel-cli": "6.14.0",
     "babel-core": "6.14.0",
     "babel-loader": "6.2.5",
     "babel-plugin-react-transform": "2.0.2",
@@ -69,30 +69,30 @@
     "compression-webpack-plugin": "0.3.1",
     "css-loader": "0.24.0",
     "css-modules-require-hook": "4.0.2",
-    "express": "4.14.0",
     "expose-loader": "0.7.1",
+    "express": "4.14.0",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
     "font-awesome": "4.6.3",
-    "history": "3.0.0",
+    "history": "3.2.1",
     "include-media": "1.4.8",
     "isomorphic-fetch": "2.2.1",
     "json-loader": "0.5.4",
     "lodash": "4.15.0",
-    "node-sass": "3.8.0",
     "mocha": "3.0.2",
-    "postcss-loader": "0.11.0",
+    "node-sass": "3.9.0",
+    "postcss-loader": "0.11.1",
     "react": "15.3.1",
     "react-dom": "15.3.1",
     "react-redux": "4.4.5",
     "react-router": "2.7.0",
     "react-router-redux": "4.0.5",
-    "redux": "3.5.2",
+    "redux": "3.6.0",
     "redux-localstorage": "0.4.1",
     "redux-thunk": "2.1.0",
     "reselect": "2.5.3",
     "resolve-url-loader": "1.6.0",
-    "sass-loader": "4.0.0",
+    "sass-loader": "4.0.1",
     "serve-static": "1.11.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",

server/config.js

@@ -1,16 +1,17 @@
 'use strict';
 
-const configFile = process.env.NODE_ENV === 'development' ? 'dev' : 'prod';
-const webpackConfig = require(`../webpack/${configFile}`);
-
-import p from '../package.json';
+const isDev = process.env.NODE_ENV === 'development';
+const configFile = isDev ? 'development' : 'production';
+const webpackConfig = require(`../webpack/${configFile}`).default;
+const applicationPort = process.env.APPLICATION_PORT || (isDev ? 3000 : 80);
+import packageJson from '../package.json';
 
 export default {
-  name: p.name,
-  description: p.description,
-  version: p.version,
+  name: packageJson.name,
+  description: packageJson.description,
+  version: packageJson.version,
 
   // launch environment
-  port: process.env.PORT || 3000,
+  port: applicationPort,
   assetHost: process.env.ASSET_HOST || webpackConfig.output.publicPath
 };

server/index.js

@@ -17,6 +17,6 @@ const basePath = require('path').resolve(__dirname, '..');
 const ISOTools = require('webpack-isomorphic-tools');
 
 // this global variable will be used later in express middleware
-global.ISOTools = new ISOTools(require('../webpack/iso'))
+global.ISOTools = new ISOTools(require('../webpack/isomorphic').default)
   .development(process.env.NODE_ENV === 'development')
   .server(basePath, () => require('./server'));

webpack/base.js

@@ -1,40 +1,22 @@
-const path = require('path');
-const webpack = require('webpack');
-const mapValues = require('lodash/mapValues');
-const autoprefixer = require('autoprefixer');
-const isomorphicConfig = require('./iso');
-const IsomorphicPlugin = require('webpack-isomorphic-tools/plugin');
-const host = require('./host')();
+import path from 'path';
+import webpack from 'webpack';
+import mapValues from 'lodash/mapValues';
+import autoprefixer from 'autoprefixer';
+import isomorphicConfig from './isomorphic';
+import IsomorphicPlugin from 'webpack-isomorphic-tools/plugin';
+import { OUTPUT_PATH, ASSET_HOST, RESOLVE_PATHS } from './config';
 
 const isDev = process.env.NODE_ENV === 'development';
 const isomorphicPlugin = new IsomorphicPlugin(isomorphicConfig).development(isDev);
 
-const resolvePaths = {
-  actions: 'common/js/actions',
-  components: 'common/js/components',
-  containers: 'common/js/containers',
-  constants: 'common/js/constants',
-  css: 'common/css',
-  fonts: 'common/fonts',
-  images: 'common/images',
-  layouts: 'common/layouts',
-  lib: 'common/js/lib',
-  middleware: 'common/js/middleware',
-  reducers: 'common/js/reducers',
-  routes: 'common/js/routes',
-  selectors: 'common/js/selectors',
-  store: 'common/js/store'
-};
-
-module.exports = {
+export default {
   context: path.resolve(__dirname, '..'),
   entry: {
     vendor: [
       'babel-polyfill',
       'classnames',
       'history',
       'lodash',
-      'jquery',
       'react',
       'react-dom',
       'react-redux',
@@ -50,13 +32,13 @@ module.exports = {
     ]
   },
   output: {
-    path: path.join(__dirname, ('../' + host.OUTPUT_PATH)),
+    path: path.join(__dirname, ('../' + OUTPUT_PATH)),
     filename: '[name].js',
-    publicPath: host.ASSET_HOST
+    publicPath: ASSET_HOST
   },
   resolve: {
     extensions: ['', '.js', '.jsx', '.scss'],
-    alias: mapValues(resolvePaths, (str) => (
+    alias: mapValues(RESOLVE_PATHS, (str) => (
       path.join(process.cwd(), ...str.split('/'))
     ))
   },

webpack/config.js

@@ -0,0 +1,46 @@
+/* The webpack dev server's port to use
+ */
+export const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT || 3001;
+
+/* The hostname to use for the webpack dev server
+ */
+export const DEV_SERVER_HOSTNAME = process.env.DEV_SERVER_HOSTNAME || 'localhost';
+
+/* The URL of the dev server including the hostname and port
+ */
+export const DEV_SERVER_HOST_URL = `http://${DEV_SERVER_HOSTNAME}:${DEV_SERVER_PORT}`;
+
+/* The output path of the completed webpack build
+ */
+export const OUTPUT_PATH = process.env.OUTPUT_PATH || 'dist/';
+
+/* The asset host to use inside the built webpack files. In product, set the
+ * ASSET_HOST environment variable.
+ */
+export const ASSET_HOST = process.env.ASSET_HOST || (DEV_SERVER_HOST_URL + '/' + OUTPUT_PATH);
+
+/* Paths for webpack to resolve into non-relative directories, so that instead
+ * of having to use relative paths:
+ *
+ * import SomeComponents from '../../../../SomeComponent';
+ *
+ * we can write this instead:
+ *
+ * import SomeComponent from 'components/SomeComponent';
+ */
+export const RESOLVE_PATHS = {
+  actions: 'common/js/actions',
+  components: 'common/js/components',
+  containers: 'common/js/containers',
+  constants: 'common/js/constants',
+  css: 'common/css',
+  fonts: 'common/fonts',
+  images: 'common/images',
+  layouts: 'common/layouts',
+  lib: 'common/js/lib',
+  middleware: 'common/js/middleware',
+  reducers: 'common/js/reducers',
+  routes: 'common/js/routes',
+  selectors: 'common/js/selectors',
+  store: 'common/js/store'
+};

webpack/dev.hot.js renamed to webpack/development.hot.js

@@ -1,35 +1,40 @@
 /* eslint-disable no-console */
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const baseConfig = require('./base');
-const host = require('./host')();
-const p = require('../package.json');
+import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './config';
+import WebpackDevServer from 'webpack-dev-server';
+import webpack from 'webpack';
+import baseConfig from './base';
+import packageJson from '../package.json';
+import DashboardPlugin from 'webpack-dashboard/plugin';
 
+// Webpack Entry Point for dev server
 const entry = [
-  'webpack-dev-server/client?' + host.HOST_URL,
+  'webpack-dev-server/client?' + DEV_SERVER_HOST_URL,
   'webpack/hot/only-dev-server'
 ];
 
+// Additional plugins
 const plugins = [
   new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.HotModuleReplacementPlugin(),
-  new webpack.NoErrorsPlugin()
+  new webpack.NoErrorsPlugin(),
+  new DashboardPlugin({ port: DEV_SERVER_PORT })
 ];
 
+// Additional loaders
 const loaders = [
   {
     test: /\.css$/,
     loaders: [
       'style',
-      `css?modules&importLoaders=3&localIdentName=${p.config.css}`,
+      `css?modules&importLoaders=3&localIdentName=${packageJson.config.css}`,
       'postcss',
     ],
   },
   {
     test: /\.scss$/,
     loaders: [
       'style',
-      `css?modules&importLoaders=3&localIdentName=${p.config.css}`,
+      `css?modules&importLoaders=3&localIdentName=${packageJson.config.css}`,
       'postcss',
       'sass'
     ]
@@ -58,7 +63,7 @@ const loaders = [
 
 const config = Object.assign({}, baseConfig, {
   eslint: { configFile: './.eslintrc' },
-  devServerPort: host.PORT,
+  devServerPort: DEV_SERVER_PORT,
   devtool: 'eval',
   entry: Object.assign({}, baseConfig.entry, {
     app: [
@@ -79,7 +84,6 @@ const config = Object.assign({}, baseConfig, {
 });
 
 console.info('Firing up Webpack dev server...');
-console.log(host);
 
 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
@@ -95,10 +99,10 @@ new WebpackDevServer(webpack(config), {
     chunks: false,
     children: false
   }
-}).listen(host.PORT, host.HOSTNAME, function errorCallback(err) {
+}).listen(DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, function errorCallback(err) {
   if (err) {
     console.error(err);
   } else {
-    console.info('🚧 Webpack client dev-server listening on ' + host.HOST_URL + ' with publicPath:' + config.output.publicPath);
+    console.info('🚧 Webpack client dev-server listening on ' + DEV_SERVER_HOST_URL + ' with publicPath:' + config.output.publicPath);
   }
 });

webpack/dev.js renamed to webpack/development.js

@@ -1,6 +1,6 @@
-const baseConfig = require('./base');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const p = require('../package.json');
+import baseConfig from './base';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import packageJson from '../package.json';
 
 const plugins = [
   new ExtractTextPlugin('styles.css')
@@ -16,22 +16,23 @@ const loaders = [
     test: /\.css$/,
     loader: ExtractTextPlugin.extract(
       'style',
-      `css?minimize&modules&importLoaders=1&localIdentName=${p.config.css}` +
+      `css?minimize&modules&importLoaders=1&localIdentName=${packageJson.config.css}` +
       '!postcss'
     )
   },
   {
     test: /\.scss$/,
     loader: ExtractTextPlugin.extract(
       'style',
-      `css?minimize&modules&importLoaders=1&localIdentName=${p.config.css}` +
+      `css?minimize&modules&importLoaders=1&localIdentName=${packageJson.config.css}` +
       '!postcss' +
       '!sass'
     )
   }
 ];
 
-module.exports = Object.assign({}, baseConfig, {
+export default {
+  ...baseConfig,
   eslint: { configFile: './.eslintrc' },
   devtool: 'source-map',
   plugins: [
@@ -44,4 +45,4 @@ module.exports = Object.assign({}, baseConfig, {
       ...loaders
     ]
   })
-});
+};

webpack/host.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   assets: {
     images: {
       extensions: [