HMR path is not used for serving assets

[ionut-mihalache]

Describe the bug

I have a remote server that I use for development. The servers runs the Vite dev server. I want Vite to serve assets from mydomain.com/mypath.

This is what I have in vite.config.js: hmr: { host: "mydomain.com", path: "mypath" }. The hot file still has http://mydomain.com:5173. If I manually change the hot file and add the path it works as intended as the files are served from http://mydomain.com:5173/mypath.

I tried to put path with '/' and w/o '/' but still the same result. Is it intended to manually change the hot file?

For reproduction I linked an older issue that seems to solve the problem but it still manifests.

Thanks.

Reproduction

#1705

Steps to reproduce

Added a very simple example at https://stackblitz.com/edit/vitejs-vite-7xkluq?file=vite.config.js. I expect /custom/path to be visible and used when serving assets. It is ok to expect this or is there some other setting that I am missing.

In this example if we look at client in the network tab, we find this https://vitejsvite7xkluq-1ecl--5173--34455753.local-credentialless.webcontainer.io/@vite/client. I would expect to be something like this https://vitejsvite7xkluq-1ecl--5173--34455753.local-credentialless.webcontainer.io//custom/path/@vite/client in my case.

This issue seems to be fixed as of this issue but the problem still seems to manifest for me.

System Info

Vite version: 5.2.11
npm version: 10.7.0

Used Package Manager

npm

Logs

No response

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.

[github-actions]

Hello @ionut-mihalache. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[ionut-mihalache]

I added a very simple example at https://stackblitz.com/edit/vitejs-vite-7xkluq?file=vite.config.js. I expect /custom/path to be visible and used when serving assets. It is ok to expect this or is there some other setting that I am missing.

In this example if we look at client in the network tab, we find this https://vitejsvite7xkluq-1ecl--5173--34455753.local-credentialless.webcontainer.io/@vite/client. I would expect to be something like this https://vitejsvite7xkluq-1ecl--5173--34455753.local-credentialless.webcontainer.io//custom/path/@vite/client in my case.

I know about the base option, but I want to use that for production builds and not for development.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-7xkluq (Open reproduction)

[sapphi-red]

server.hmr option changes the behavior of HMR connection and doesn't affect how files are served. The HMR connection path is correctly changed to ws://localhost:5173/custom/path.

I know about the base option, but I want to use that for production builds and not for development.

What is the reason for that?

[ionut-mihalache]

server.hmr option changes the behavior of HMR connection and doesn't affect how files are served. The HMR connection path is correctly changed to ws://localhost:5173/custom/path.

How can I see this is the case? Neither the hot file or the network tab in the browser reflect this. The files seem to be served from the root path and that leads to NOT_FOUND error.

I know about the base option, but I want to use that for production builds and not for development.
What is the reason for that?

I tried to use the base option but it seems like it is not working because in production the expectation is that the asset directory is the build directory, so in this case I would set the base to /custom/path/build/; this works in production (npm run build), but not in development (npm run dev).

If you say that is possible to get the expected behavior at the moment, then what is the proper way to 'force' the development server to serve me the assets from my custom path. The documentation is not quite clear about this (maybe this is too particular but I don't think that it is uncommon to have a site at a domain path, not at the root domain).

Or put more simply, what is the option to change the hot file contents from something like http://localhost:5173 to something like http://localhost:5173/custom/path/...?

Thank you.

[sapphi-red]

How can I see this is the case?

You can see it in the network tab of dev tools.

what is the option to change the hot file contents from something like http://localhost:5173 to something like http://localhost:5173/custom/path/...?

I don't get what you mean by "hot file". But setting base: '/custom/path/' would make assets served from /custom/path/*.
If you mean you want to serve files after build from /custom/path/build/ and, in dev from /custom/path/, then you can use conditional configs.

export default defineConfig(({ command }) => ({
  base: command === 'serve' ? '/custom/path/' : '/custom/path/build/'
}))

[ionut-mihalache]

I don't get what you mean by "hot file". But setting base: '/custom/path/' would make assets served from /custom/path/*. If you mean you want to serve files after build from /custom/path/build/ and, in dev from /custom/path/, then you can use conditional configs.

When running npm run dev there is a file called hot created that contains the URL for the assets (at least that seems to be the case for me). The file content is just an url in the form of http://localhost:5173. If I manually change the contents of this created hot file to whatever I want the url to be, what I want works.

So the question is if there is a way to change the contents of that created file called hot from the vite.config.js because I can't obtain this effect at the moment (or I am missing something regarding this).

[sapphi-red]

Vite doesn't generate a file named hot. I guess it's something that a plugin generates. Laravel Vite Plugin seems to generate a file named hot. If you are using that, it's not something Vite itself controls.

[ionut-mihalache]

Ok, thank you for your help. I am using Laravel, but I did not know that the plugin creates the hot file. I will open an issue on the Laravel Vite Plugin git repo.