Matching root route in webpack-dev-server's historyApiFallback`

I ended up opening a bug request with webpack-dev-middleware and discovered it was not a bug but a failure of configuration.

Specifically, the issue is using HtmlWebpackPlugin alongside historyApiFallback. I believe plugins are processed before the regex matching, and HtmlWebpackPlugin's default file output is index.html; this means that out of the box, / will always be routed to the HtmlWebpackPlugin output file.

The solution to this is to set a custom filename in HtmlWebpackPlugin, which allows you to control the matching again. Here's a sample repo demonstrating the fix and here's the webpack config:

module.exports = {
  context: __dirname,
  entry: [
    './app.js',
  ],
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  devServer: {
    publicPath: "/",
    // contentBase: "./public",
    // hot: true,
    historyApiFallback: {
      // disableDotRule: true,
      rewrites: [
        { from: /^\/$/, to: '/public/index.html' },
        { from: /^\/foo/, to: '/public/foo.html' },
        { from: /(.*)/, to: '/test.html' },
      ],
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Html Webpack html",
      hash: true,
      filename: 'test.html',
      template: 'public/plugin.html',
    }),
  ],
};

Two thoughts come to mind:

1. What you want to do is not possible with Webpack Dev Server (as far as I'm aware)
2. And, once npm run build is run and deployed the deployed app would not follow the same rules as configured in Webpack Dev Server

Even if I'm mistaken on #1, #2 seems like a bigger issue if you ever plan to deploy the app. This leads me to recommend an alternate setup which will work on dev and production (or wherever it's deployed).

A few options:

• setup the app as a single-page app (SPA) and use React Router to serve the static routes (/ and /subpage) and wildcards (everything else)
• setup node (or another server) to serve the static routes (/ and /subpage) and wildcards (everything else)

An Attempt

In an attempt to setup the routes I was able to achieve this setup:

• Display landing.html when / is requested
• Display subpage.html when /subpage is requested
• Display the React App at a specific path, like app.html

To do this make the following changes:

1. Move /public/index.html to /public/app.html

   mv ./public/index.html ./public/app.html
   

2. In /config/webpackDevServer.config.js, update historyApiFallback to:

   historyApiFallback: {
     // Paths with dots should still use the history fallback.
     // See https://github.com/facebookincubator/create-react-app/issues/387.
     disableDotRule: true,
     rewrites: [
       // shows views/landing.html as the landing page
       { from: /^\/$/, to: "landing.html" },
       // shows views/subpage.html for all routes starting with /subpage
       { from: /^\/subpage/, to: "subpage.html" },
       // shows views/app.html on all other pages
       // but doesn't work for routes other than app.html
       { from: /./, to: "app.html" }
     ]
   }
   

3. In /config/paths.js update appHTML to:

   appHtml: resolveApp("public/app.html")
   

4. In /config/webpack.config.dev.js, updateplugins` to include:

   new HtmlWebpackPlugin({
     filename: "app.html",
     inject: true,
     template: paths.appHtml
   })
   

Requesting a random URL, like localhost:3000/foo will return a blank page but contains the HTML from the app.html page without the bundled <script> tags injected. So maybe you can find a solution to this final hurdle.