Allow Vite to serve from pages other than index.html

[steveworkman]

Clear and concise description of the problem

As a developer using Vite I want to be able to serve from different HTML pages so that I may more closely replicate my production environment.

I have an application that once built produces two different index.html pages for two different brands, for example index-a.html and index-b.html.

The production web server then chooses which of these html files to serve in SPA mode based on the domain that the request is coming from, so www.example.com goes to index-a.html and www.test.com goes to index-b.html

I'm trying to replicate this with the vite dev server, but I can't because the served page is hard-coded as index.html which you can see in the spaFallback middleware.

I've attempted to override this using a plugin and middleware, but I either get into an infinite redirection loop, or the server never serves the request.

This is not the same as multi-page apps as the target here is SPAs and even with a multi-page app you still need an index.html file in the root of the project. It is also not the same as being able to change the directory that the page is served from - the issue is being able to serve from a file other than index.html.

Suggested solution

Add a configuration property: server.indexFile with a default of index.html that is then used by the vite:spa-fallback module to retrieve the right index file. This should also be able to be set from the command line in the vite serve and vite preview commands.

This should not interfere with the multi-page app setup

Alternative

I've attempted to do this with a plugin, but I don't believe that I can effectively override the vite:spa-fallback middleware.

Additional context

Previously asked in the Discussions area with no positive 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.

[meyfa]

As another reason why this would be useful, I think it would resolve an issue in mocha-vite-puppeteer: larsthorup/mocha-vite-puppeteer#28 (comment)

[dickeylth]

Similar issue encountered, I'm working with multi-page apps and I suppose that vite could provide any option to disable the spa-fallback middleware to work with other express middlewares like serve-index

[bluwy]

I've attempted to do this with a plugin, but I don't believe that I can effectively override the vite:spa-fallback middleware.

You can do so using the configureServer hook. See #5720 and SvelteKit's implementation. The linked issue could be a way to solve this too, as I think there would always be many points of configuration to get to the desired fallback behaviour.

[bluwy]

I think using configureServer is the right choice here instead of another config option. Vite 3 introduced a new appType config which you can set to mpa so that it disables the spa fallback. You can then inject a custom spa fallback middleware with a Vite plugin via configureServer.

Something like (untested):

import history from 'connect-history-api-fallback'

export function speciallSpaFallback() {
  return {
    name: 'special-spa-fallback',
    config() {
      return {
        appType: 'mpa'
      }
    },
    configureServer(server) {
      return () => {
         server.middlewares.use(history(/* custom config */))
      }
    }
  }
}

Let me know if this works for you

[mr-moto]

Hey @steveworkman, did you get this working by any chance? Im looking for what i think is the exact same thing.
I have a plugin that takes the index.html and build out multiple different html files ( in my case different language files like en.html, fr.html etc ).
Looking to be able to access localhost:3000/en.html and so on

[bluwy]

Closing due to lack of response