Serve index.html inside subdirectory of public from subdirectory path

[henribru]

Clear and concise description of the problem

In some cases you might have an extra index.html that you want to serve at some nested path, without processing it through Vite. You can put it in a subdirectory of public, e.g. /public/foo/bar/index.html. However, if you do this, it will only be served at /foo/bar/index.html, and crucially not at /foo/bar/. This is different from the Webpack dev server, which will serve index.html files at the path of their containing directory, which caught me by surprise when migrating from Vue CLI to Vite.

https://stackblitz.com/edit/vitejs-vite-944tsu?file=public%2Ffoo%2Fbar%2Findex.html&terminal=dev

Suggested solution

If a subdirectory inside public contains an index.html, the index.html should be served at the path of that directory, either by default or as a configurable option.

Alternative

Instead of putting the directory in public, a possible workaround is to put it in the project root. If you do this it will serve the index file at the directory path. However, this means you need to manually copy the directory over to dist afterwards, which is a bit annoying since the whole point of having public is to automatically copy over files you don't want processed.

Edit: It's also a bit surprising to me that this behavior differs based on whether it's in public or the root

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[iamandrewluca]

Do you want this public file to be served in development mode?

Maybe this can help https://vitejs.dev/config/#server-middlewaremode

If the answer is "no" to above question:

What web server do you use?

I think vite has nothing to do with it.
It depends on your actual serving web server.

I already have your use case, and it works fine.

Most of the web servers will serve your index.html the right way

Accessing /your-path/
Will serve /your-path/index.html

Or in some cases it may also work this

Accessing /your-path
Will serve /your-path.html

If you are using AWS S3 and CloudFront, it can be a little tricky how you serve it.

[henribru]

@iamandrewluca I see now that my description was a bit unclear, but I'm talking about during development (hence my mention of the Webpack dev server)

[henribru]

Maybe this can help vitejs.dev/config/#server-middlewaremode

It's possible I could use this to make it work by configuring my own Express server, but that seems like a pretty laborious workaround, at that point I prefer the workaround of putting it in the root instead of public (I by the way just added an edit in my description about how it's surprising that the behavior depends on whether you put it in public or the root)

[bluwy]

Looks like this is caused by a3c334f and

vite/packages/vite/src/node/server/middlewares/static.ts

Line 31 in 7d20580

extensions: [],

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-944tsu (Open reproduction)

[ElliotNB]

@patak-dev @sapphi-red @bluwy @henribru Any chance at getting this issue prioritized/planned?

I opened issue #16567 but it was unceremoniously closed out by @sapphi-red and marked as "not planned".

It's important to note that there exists a difference in how vite vs vite preview handles the serving of index.html files under public subfolders. The former will not default serve index.html files while the latter will. Dev mode and preview mode ought to be consistent.

A similar issue was addressed by @bluwy in pull request #14756, but I believe the change only took into account subfolders under src. The issue still affects subfolders under the public directory.

Here is my reproduction of the issue: https://stackblitz.com/edit/vitejs-vite-sepev3?issueRepo=vitejs/vite&issueNumber=16567

[hi-ogawa]

@ElliotNB Probably you can rewrite url using plugin for the time being, something like https://stackblitz.com/edit/vitejs-vite-qnxrju?file=vite.config.ts

[ElliotNB]

@hi-ogawa Thanks for the tip -- we do have a workaround in place (by modifying our links to point directly to the index.html file rather than just the subfolder), but this just seems like something that should be consistent out-of-the-box.

@bluwy Thank you for moving this issue into approved!

[bluwy]

No problem. We had this issue in the discussion queue for a while and got to it yesterday. We don't see any reason to not support this so it could be something fixed.

I'm not sure if there will be edge cases, but the only change I think is these places:

vite/packages/vite/src/node/preview.ts

Line 189 in c071eb3

extensions: [],

vite/packages/vite/src/node/server/middlewares/static.ts

Line 37 in c071eb3

extensions: [],

And setting ['.html'].