Nested path behaviour issue, including for multiple entry points

[atrauzzi]

Describe the bug

I'm currently using multiple entry points:

{
    root: "src",
    build: {
        rollupOptions: {
            input: {
                office: resolve(__dirname, "src/Office/index.html"),
                login: resolve(__dirname, "src/Login/index.html"),
                visitor: resolve(__dirname, "src/Visitor/index.html"),
            }
        }
    }
}

Whenever I navigate somewhere beneath the applications root, for example https://my.dev.server/Login/client-side-route, I end up with a 404.

Reproduction

https://stackblitz.com/edit/vitejs-vite-r5hbbj?file=src/Login/App.tsx

Steps to reproduce

Using the reproduction, you need only navigate to https://vitejs-vite-r5hbbj--5173.local.webcontainer.io/Login/nested-route.

My expectation was that the vite development server would walk the paths upwards, overlapped with the root configuration option until it fins a suitable index.html. Then it would serve that file with a status of 200 while preserving the path. Thus allowing client side routing to kick in.

Let's pretend this URL was used: https://vitejs-vite-r5hbbj--5173.local.webcontainer.io/Login/nested-route-1/nested-route-2/nested-route-3:

• /Login/nested-route-1/nested-route-2/nested-route-3 👉 ⛔
  • Internally, checks for src/Login/nested-route-1/nested-route-2/nested-route-3/index.html, which doesn't exist
• /Login/nested-route-1/nested-route-2/ 👉 ⛔
  • Internally, checks for src/Login/nested-route-1/nested-route-2/index.html, which doesn't exist
• /Login/nested-route-1/ 👉 ⛔
  • Internally, checks for src/Login/nested-route-1/index.html, which doesn't exist
• /Login/ 👉 ✔️
  • Internally, checks for src/Login/index.html, which does exist!

Using this strategy, vite can serve multiple sites with support for client-side (HTML5) routing! 🎊

System Info

Fedora, node, yarn, all the latest, etc etc...

Used Package Manager

yarn

Logs

See repro. 🙂

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mamazgut]

Having the same problem using the nested apps. Page refresh always returns the top app's index.html, even though subfolders containing nested apps have their own index.html.

It would be great if Vite.js could provide this functionality at least via plugin. Thank you!

[Manisha11sep]

I am facing some issue with mulitple html file app. Has anyone find a solution for this yet?
I am getting a 404 while trying to access main or again directly from the urls.
Its working fine if I open templates/index.html/ .

` build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'src/index.html'),
        again: path.resolve(__dirname, "src/templates/index.html"),`
}
}

[bluwy]

I think this is the same as #2958. You need a index.html at <root>/index.html for a simple SPA fallback to work.

Otherwise you can inject a custom middleware (similar solutions in the linked PR) to support your usecase.