Webpack-dev-middleware passes for all routes
I am using webpack-dev-middleware along with a reactive app using reactive router on the client.
It's okay if I enter the application in the root directory /
, 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 go through and receive the html page, but then it seems that when the page asks main.js
, it now also receives the html page instead of the wrapped javascript.
server.use('/*', webpackDevMiddleware(compiler, {
publicPath: '/'
}));
The goal is that any route that the server doesn't know about gets the same content as the root, and then the react handler handles rendering the correct view (or 404) on the client.
any help would be much appreciated.
source to share
Try the connect-history-api-fallback npm package, which uses the webpack-dev-server 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: '/'
}));
source to share