Run inside express using webpack and webpack HMR as middlewares

Author: alejofernandez

package.json

@@ -6,7 +6,8 @@
     "dev": "gulp serve",
     "build": "gulp build",
     "deploy": "gulp deploy",
-    "lint": "gulp lint"
+    "lint": "gulp lint",
+    "express": "hotnode ./server"
   },
   "repository": {
     "type": "git",
@@ -54,11 +55,16 @@
     "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",
+    "hotnode": "0.0.8",
+    "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'));
+
+// ************************************
+// This is the real meat of the example
+// ************************************
+
+// 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, publicPath: webpackConfig.output.publicPath
+}));
+
+// Step 3: Attach the hot middleware to the compiler & the server
+app.use(require('webpack-hot-middleware')(compiler, {
+  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}`);
+  });
+}

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()
+  ]
+};