title: How to use webpack-dev-middleware with feathers / express?
body: <p>I'm trying to get a feathersjs app started with a reactjs frontend. Using the <code>webpack-dev-middleware</code> and <code>webpack-hot-middleware</code>, I should be able to simply extend the feathers app with all this webpack stuff during development. The only problem is always end up getting a feathers 404 page whenever I fetch the js file from webpack.</p>
  
  <p>Currrently, here's my directory structure:</p>
  
  <pre><code>/feathers/public/index.html
  /feathers/src/app.js
  /react/src/index.js
  /react/webpack.config.js
  /react/develop.js
  </code></pre>
  
  <p><code>/feathers/src/app.js</code> is is default feathers app, serves static files from the public folder.</p>
  
  <pre><code>.use('/', serveStatic( app.get('public') ))
  </code></pre>
  
  <p>In <code>/react/develop.js</code>, I'm requiring the feathers app and extending it with the webpack middlewares.</p>
  
  <pre><code>const app = require('../feathers/src/app');
  const config = require('./webpack.config');
  const path = require('path');
  const webpack = require('webpack');
  
  var compiler = webpack(config);
  
  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: '/',
    stats: {colors: true},
  }));
  
  app.use(require('webpack-hot-middleware')(compiler));
  
  const port = app.get('port');
  const server = app.listen(port);
  server.on('listening', () =&gt;
    console.log(`Feathers application started on ${app.get('host')}:${port}`)
  );
  </code></pre>
  
  <p>Sadly this isn't working at all. For reference, here's my <code>/react/webpack.config.js</code></p>
  
  <pre><code>var webpack = require("webpack")
  
  module.exports = {
    devtool: 'source-map',
    entry: [
      'webpack-hot-middleware/client',
      'src/index.js'
    ],
    output: {
      path: '/',
      filename: "bundle.js",
    },
    module: {
      loaders: [
        { test: /\.js$/, loader: "babel", exclude: /node_modules/, query: { presets: ['es2015', 'react', 'stage-0'] } },
        { test: /\.(svg|png|jpe?g|gif|ttf|woff2?|eot)$/, loader: 'url?limit=8182' },
      ]
    },
    resolve: {
      root: [
        __dirname,
        __dirname + '/src',
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ]
  }
  </code></pre>
  
  <p>And <code>/feathers/public/index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried messing around with the publicPath stuff but no luck. Any ideas how to get this working? I've spend a solid 2 hours on this and got no where. <a href="https://github.com/ccorcos/feathers-react/" rel="nofollow">Here's a link to the repo I'm working with for more context</a>.</p>