How to Implement historyApiFallback Rewrites in Vite???

[rtmelsov]

I'm migrating a project from Webpack to Vite and trying to replicate this Webpack devServer configuration:

historyApiFallback: {
    rewrites: [
        {
            from: new RegExp('^' + appConfigs.managerContextPath + '.*$'),
            to: appConfigs.contextPath + 'manager.html'
        },
        {
            from: new RegExp('^' + appConfigs.contextPath + '.*$'),
            to: appConfigs.contextPath + 'index.html'
        }
    ]
}

I attempted the following Vite configuration:

export default defineConfig({
    root: path.resolve(__dirname, 'src'),
    base: '/',
    plugins: [
        react(),
    ],
    // appType: 'custom', // This ensures we're not handling HTML automatically
    build: {
        sourcemap: true,
        outDir: resolve(__dirname, 'bundles'),
        rollupOptions: {
            input: {
                app: resolve(__dirname, 'src/app.html'),
                arm: resolve(__dirname, 'src/arm.html'),
            }
        }
    },
});

With this, I can open /app and /arm, but navigating to /app/login results in a "No webpage found" error.
What I Need:
I want Vite to behave like Webpack's historyApiFallback, ensuring:
/app loads app.html,
/arm loads arm.html,

Any subroutes like /app/login should still serve app.html,
Any subroutes like /arm/settings should serve arm.html.

My Research:
I've looked into Vite's server options, specifically server.middlewareMode, but I’m not sure how to properly rewrite requests for different contexts.
Has anyone done something similar in Vite? How can I configure Vite's dev server to handle this kind of routing logic??

[hi-ogawa]

Such rewriting is not supported out-of-the-box on Vite, but probably you can try writing middleware as plugin, maybe something like this:

export default defineConfig({
  plugins: [
    {
      name: 'my-spa-fallback',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          const url = new URL(req.url, "http://localhost");
          if (url.pathname.startsWith("/app/")) {
            req.url = "/app.html"
          }
          if (url.pathname.startsWith("/arm/")) {
            req.url = "/arm.html"
          }
          next();
        });
      }
    }
  ]
})

[rtmelsov]

Thanks, but I'm looking for something that works in production with the bundled build, the plugin doesn't help in that case
I rewrote my config like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true,
    outDir: resolve(__dirname, 'bundles'),
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        app: resolve(__dirname, 'app/index.html'),
        arm: resolve(__dirname, 'arm/index.html'),
      }
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      Containers: '/src/containers',
      Components: '/src/components',
      Constants: '/src/constants',
      Utils: '/src/utils',
      Reducers: '/src/reducers',
      Redux: '/src/redux',
      Styles: '/src/styles',
      Localization: '/src/localization',
      Config: '/src/config',
      Icons: '/src/icons',
      FrontEndURLS: '/src/FrontEndURLS.js',
      CSBootstrap: '/src/CSBootstrap/index.js',
    }
  },
})

Now when I open the app at http://localhost:4173/app/, it works fine

and clicking the link to /app/login

also works — it loads the login page correctly

But if I reload the /app/login page, it falls back to the main index.html instead of keeping the context of app/index.html. So the routing breaks on reload

[hi-ogawa]

For vite preview command, you need to use configurePreviewServer. If you are deploying it somewhere, then such fallback needs to be defined on the deployment platform in their own way.

Also, please provide a reproduction (runnable example) since that's easier to check the issue than guessing from a piece of code and image.

[rtmelsov]

Got it! Thanks, i tried using a plugin for fallback, but when I do that, it just opens the raw HTML file and completely ignores my React app like it doesn’t hydrate or run the JS bundle. So the plugin approach doesn’t work for what I need, i'm looking for a proper solution that works with the actual built react app in production

And here's a runnable example:

https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-d6nv6g9e?file=README.md