The port used for devtools integration can't be configured

[ohmree]

Describe the bug

I'm using windi with phoenix liveview and vite, with the vite dev server serving on port 3000 and phoenix on port 4000 (phoenix <-> vite integration was achieved using vite_phx).

It seems like by default the js resulting from importing virtual:windi-devtools sends a post request to /@windicss-devtools-update, which in my case I guess means port 4000 as opposed to 3000.
This results in a 404 from phoenix, whereas if I send a plain get request to localhost:3000/@windicss-devtools-update the status code changes to 500, which makes me think this might indeed be the issue.
Furthermore, sending a get request to localhost:3000/foobar also results in a 404, which contributes to my hypothesis above.

Minimal Reproductions
It took me quite a while to get this set up so there isn't anything quick I can link, but I think adding a way to configure the port used in the request mentioned above should be easily doable without adding much maintenance burden.

Versions

• vite-plugin-windicss: 1.0.4
• vite: 2.3.8
• framework(vue/react/svelte/etc): phoenix 1.5.9, liveview 0.15.1

[antfu]

It reuses Vite's server port, isn't that a case in phoenix?

[ohmree]

It reuses Vite's server port, isn't that a case in phoenix?

The port that's actually used is vite's server port (3000), but the js that's generated from importing virtual:windi-devtools tries to send a post request to port 4000 (aka just / without specifying a port), resulting in the following error:

XHR POST http://localhost:4000/@windicss-devtools-update [HTTP/1.1 404 Not Found 190ms]

[ElMassimo]

Confirming this is also a problem for Vite Ruby projects, I'll try to make a pull request when I have some time.

Perhaps it could use a similar fallback as vitejs/vite#8650, by using the server.hmr.clientPort if available.