SomeKittens SomeKittens - 3 months ago 103
Javascript Question

Attempting to route a URL with a dot leads to 404 with webpack dev server

I'm using Webpack's dev server for ease of local development. I'm working on a single page app, so I've enabled

historyApiFallback
:

common.devServer = {
outputPath: path.join(__dirname, 'www', outDir),
historyApiFallback: true
};


However, whenever I try to browse to a url that contains a period (such as
/ui/alerts/map.postplay
), I get


Cannot GET /ui/alerts/map.postplay


How can I convince webpack-dev-server to let me use these urls?

Answer

UPDATE: You can now just set historyApiFallback to:

historyApiFallback: {
  disableDotRule: true
}

(thanks to BenR for fixing this!)

The trouble lies not in webpack-dev-server but the historyApiFallback config itself (technically, Webpack uses connect-history-api-fallback). There's a known bug relating to URLs with periods.

You can update the config for historyApiFallback to rewrite all urls containing periods:

historyApiFallback: {
  rewrites: [
    {from: /\./, to: '/'}
  ]
}

Since this operates on req.url, you should be fine even if you're doing local dev on something other than localhost via the hosts file, etc.