Run inside express using webpack and webpack HMR as middlewares

package.json

@@ -6,7 +6,8 @@
     "dev": "gulp serve",
     "build": "gulp build",
     "deploy": "gulp deploy",
-    "lint": "gulp lint"
+    "lint": "gulp lint",
+    "express": "nodemon --watch server ./server"
   },
   "repository": {
     "type": "git",
@@ -50,15 +51,20 @@
     "html-webpack-plugin": "^1.7.0",
     "jade-react-loader": "^1.0.2",
     "markdown-loader": "^0.1.7",
+    "nodemon": "^1.9.2",
     "react-hot-loader": "^1.3.0",
     "style-loader": "^0.13.0",
     "stylus-loader": "^1.4.2",
     "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-server": "^1.12.1",
+    "webpack-hot-middleware": "^2.10.0"
   },
   "dependencies": {
     "domready": "^1.0.8",
+    "express": "^4.13.4",
     "history": "^2.0.1",
+    "morgan": "^1.7.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-router": "^2.0.0",

server/index.js

@@ -0,0 +1,38 @@
+const http = require('http');
+const express = require('express');
+const app = express();
+
+const server = http.createServer(app);
+
+app.use(require('morgan')('short'));
+
+// Step 1: Create & configure a webpack compiler
+const webpack = require('webpack');
+const webpackConfig = require('../webpack.express.config');
+const compiler = webpack(webpackConfig);
+
+// Step 2: Attach the dev middleware to the compiler & the server
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  stats: { colors: true },
+  publicPath: webpackConfig.output.publicPath
+}));
+
+// Step 3: Attach the hot middleware to the compiler & the server
+app.use(require('webpack-hot-middleware')(compiler, {
+  stats: { colors: true },
+  log: console.log,
+  path: '/__webpack_hmr',
+  heartbeat: 10 * 1000
+}));
+
+// Do anything you like with the rest of your express application.
+app.get('/api', (req, res) => {
+  res.send('GET request to /api');
+});
+
+if (require.main === module) {
+  server.listen(process.env.PORT || 3000, () => {
+    console.log(`Listening on http://localhost:${server.address().port}`);
+  });
+}

src/index.js

@@ -10,19 +10,10 @@ function boot() {
 
   domready(() => {
     rootElement = document.getElementById('app-root');
-    render();
+    hotReload();
     setupHotModuleReload();
   });
 
-  function render() {
-    const RootComponent = require('./RootComponent').default;
-    ReactDOM.render(<RootComponent />, rootElement);
-  }
-
-  function setupHotModuleReload() {
-    module.hot && module.hot.accept('./RootComponent', () => setTimeout(hotReload));
-  }
-
   function hotReload() {
     try {
       render();
@@ -31,6 +22,15 @@ function boot() {
     }
   }
 
+  function setupHotModuleReload() {
+    module.hot && module.hot.accept('./RootComponent', () => setTimeout(hotReload));
+  }
+
+  function render() {
+    const RootComponent = require('./RootComponent').default;
+    ReactDOM.render(<RootComponent />, rootElement);
+  }
+
   function renderError(error) {
     ReactDOM.render(<RedBox error={error} />, rootElement);
   }

webpack.express.config.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  devtool: 'eval-source-map',
+  entry: [
+    './src/index',
+    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/'
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loader: 'babel'
+    }, {
+      test: /\.styl$/,
+      /* eslint-disable max-len */
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!stylus-loader'
+      /* eslint-enable max-len */
+    }, {
+      test: /\.woff$/,
+      loader: 'file-loader?name=font/[name].[ext]?[hash]'
+    }, {
+      test: /\.png$/,
+      loader: 'file-loader?name=images/[name].[ext]?[hash]'
+    }, {
+      test: /\.jade$/,
+      loader: 'jade-react-loader'
+    }, {
+      test: /\.md$/,
+      loader: 'html!markdown'
+    }]
+  },
+  plugins: [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({ template: './src/index.html', inject: 'body' }),
+    new webpack.NoErrorsPlugin()
+  ]
+};