webpack-dev-middleware pass through for all routes

Question

I'm using webpack-dev-middleware along with a react app using react-router on the client.

All is well if i enter the application at the root /, but webpack-dev-middleware will not serve anything with a path, like '/my-route`

server.use(webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

I tried using a wildcard, which allows all paths to pass through and get the html page, but then it seems when the page requests the main.js, it now also gets the html page, instead of the packaged javascript.

server.use('/*', webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

The goal is that any route the server doesn't know about, gets the same content as the root, and then react-router will handle showing the correct view (or 404) on the client.

any help would be much appreciated.

Answer 1

Try connect-history-api-fallback npm package, which is what webpack-dev-server uses under the hood for the same purpose.

This worked for me:

var history = require('connect-history-api-fallback');
server.use(history());
server.use(webpackDevMiddleware(compiler, {
  publicPath: '/'
}));