Decouple base and development server root directory so that the vite development server can be used behind reverse proxy

[ceisele-r]

Hi,

I want to be able to decouple the vite base property and the path, the development server uses as "root" to server the assets from.

The reason for this is that I am using a reverse proxy in front of the vite development server as well as the production webserver that hosts the built files.

The setup is as follows:

• I have a reverse proxy that redirects requests from http//localhost/my/app/* to http://localhost:1234/*
• Either the vite development server or the production web server serving the vite built files is running at http://localhost:1234

My issue now is that it seems that the vite base option is tightly coupled with the development server. This causes the development server to apply the base path to it's virtual directory structure.
This causes several issues:

• If I set the vite base to /
  • the vite development server says it serves the files from http://localhost:1234/. But when accessing the page http://localhost/my/app/ (the reverse proxy), it reaches the index.html from the vite development server but all vite fetches (e.g. the request for @vite/client fails as it tries to reach it via http://localhost/@vite/client instead of http://localhost/my/app/@vite/client which would be redirected correctly)
• If I set the vite base to /my/app/
  • the vite development server says it serves the files from http://localhost:1234/my/app/ which is not what I want as now my reverse proxy must be rewriting requests to http://localhost:1234/my/app/ instead of http://localhost:1234/

Is there a way to decouple the vite base option from the virtual file location the development server serves the files from?
So that I can say:

• The accessed path in the browser is http://localhost/my/app/
• ...but development server should still serve the virtual files from "http://localhost:1234" (instead of http://localhost:1234/my/app/)?

Additionally, for the production build, it should also work. So hrefs for assets should begin with /my/app/ so they can be resolved correctly.

Is there any way to achieve this?

My current workaround is to set the base to the "frontend" base path, e.g. /my/app and adjust the reverse proxy to not rewrite to http://localhost:1234/ but instead to http://localhost/1234/my/app/` but this has several downsides and requires to change the reverse proxy configuration between development and production builds.

[catmanjan]

We have the same problem