How to tell webpack dev server to serve index.html for any route

Question

React router allows react apps to handle /arbitrary/route. In order this to work, I need my server to send the React app on any matched route.

But webpa

Answer 1

Adding public path to config helps webpack to understand real root (/) even when you are on subroutes, eg. /article/uuid

So modify your webpack config and add following:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

Without publicPath resources might not be loaded properly, only index.html.

Tested on Webpack 4.6

Larger part of config (just to have better picture):

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}