Plugin that rewrites to root of each multi-page app

[Pyrolistical]

@poyoho offered a plugin that rewrites each multi-page apps to the root to allow for client side routing: #2958 (comment)

eg. GET /nested/yada returns the contents of /nested/index.html.

But that doesn't work for sub resources such as GET /nested/index.css as it would get rewritten to /nested/index.html.

Here is a plugin that avoids rewriting files with extensions. It also generalizes to a list of mpas.

const multi_page_apps = ["nested"];

export default {
  build: {
    appType: "mpa",
    ...
  },
  ...
  plugins: [
    {
      name: "rewrite to multi-page app root",
      configureServer(serve) {
        serve.middlewares.use((req, _, next) => {
          const { groups: { multi_page_app, file_extension } = {} } =
            req.url.match(
              /^\/(?<multi_page_app>(\w|-)+)\/[^.]+(\.(?<file_extension>\w+))?$/
            ) ?? {};
          if (!file_extension && multi_page_apps.includes(multi_page_app)) {
            req.url = `/${multi_page_app}/`;
          }
          next();
        });
      },
    },
    ...
  ],
};

I couldn't add this to the original issue, but at least this is searchable now.