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

I agree with the majority of existing answers.

One key thing I wanted to mention is if you hit issues when manually reloading pages on deeper paths where it keeps the all but the last section of the path and tacks on the name of your js bundle file you probably need an extra setting (specifically the publicPath setting).

For example, if I have a path /foo/bar and my bundler file is called bundle.js. When I try to manually refresh the page I get a 404 saying /foo/bundle.js cannot be found. Interestingly if you try reloading from the path /foo you see no issues (this is because the fallback handles it).

Try using the below in conjunction with your existing webpack config to fix the issue. output.publicPath is the key piece!

output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'public')
},
...
devServer: {
    historyApiFallback: true
}