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:

mon.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?

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:

mon.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?

• javascript
• build
• webpack

1 Answer 1

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.