Support Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy on hmr dev server about vite

[hi-ogawa]

Since this is hosted at the same port as the rest of the application. How would it work if the application had it's own WebSocket connection that it wanted to maintain? Wouldn't they conflict?

Yeah, that could be a concern, but maybe it's still possible to get around by setting server.hmr.path to not conflict with your app's websocket path?

vite/packages/vite/src/node/server/ws.ts

Line 116 in 37190af

hmrBase = path.posix.join(hmrBase, hmrPath)

---

I tested your reproduction and I can confirm the issue, but it feels like a minor paper cut with very specific conditions.
Also I wonder if this is more like a problem of Vite's client-side websocket failure robustness. See for example:

• #5675 (comment)

[hi-ogawa]

This is an Remix app hosted in Express, so not actually using the Vite dev server, just the HMR server

Can you provide a reproduction to show how the issue look like?
It's not entirely clear that how you setup coop/coep headers on Remix express, so providing that would probably help.

You might be able to avoid this issue by passing your own node server to server.hmr.server (for example, something like I suggested for Remix Vite https setup long time ago https://github.com/hi-ogawa/test-remix-vite-express-https/blob/06da66d41950b8b0b3014f4f841d07e6fcffc7bf/server.mjs#L34), but I might be totally misunderstanding the issue.

Starting from their express template https://github.com/remix-run/remix/tree/main/templates/express, this is what I imagined would help https://stackblitz.com/edit/github-1jwsyy?file=server.js

[ngbrown]

Here is a demonstration of the way I setup my headers and how the problem manifests: https://github.com/ngbrown/remix-vite-16536

[ngbrown]

@hi-ogawa - I tried to change the server.js file with the way you passed server into the Vite hmr property, it does work by re-using the same server instance as the rest of the application, but I had a few questions:

• Wouldn't it be better to have a separate port like HMR is expected to have? Sharing the same port is how the default Remix template works.
• Since this is hosted at the same port as the rest of the application. How would it work if the application had it's own WebSocket connection that it wanted to maintain? Wouldn't they conflict?

I've updated my suggested solution with the headers I would like to set, assuming the HMR server is on a different port.