Remote devloppement : VSCode tunnel / Codespace ports forwarding does not seem to forward websocket protocol

[Zebnastien]

Many popular JavaScript frameworks (Vite, React, Vue, Svelte...) use the websocket protocol to manage HMR. Problem: Using the VSCode tunnel, HMR cannot connect to forwarded ports using the WebSocket protocol.

This could be a limitation for the adoption of remote development.

To reproduce the issue, simply start a project with React or Vue through a remote VSCode tunnel and watch the console as you edit your code. You will see a websocket connection failure.

[connor4312]

I'm not able to reproduce this with a Vite dev server. Can you share more information from the Network tab in your browser?

[Zebnastien]

Hi, I tried again with Vite, React, Next and Vue and I was not able to reproduce (had made it many time before). Sorry, my bad. Only Nuxt still has trouble with VSCode tunnels but I don't know if it is VCode or Nuxt related.

Here is my console with a Nuxt stater (I had to authorize unsecured content in browser)

Then switching vite to wss vite: { server: { hmr: { protocol: "wss", }, }, },

Results in no console error until I save whatever modification in the page.

Network tab

[connor4312]

It looks like Vite is also appending the port to the URL. It should not, and instead using the current and default https port 443. Basically it should use the same origin as the page is being served from and not do any modifications. I'm not sure whether there's a setting for this or whether it has to be configured independently.

fyi @derekbekoe

[VSCodeTriageBot]

We closed this issue because we don't plan to address it in the foreseeable future. If you disagree and feel that this issue is crucial: we are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding, and happy coding!

[Zebnastien]

Thank you for your time. I really appreciate your work.

PS: I don't understand why having a different port would be a problem since it is the way Nuxt works Also ports are auto forwarded by VScode. But is why is Websocket protocol not accessible from outside on port 24678 ? Should not it be wss://J25fc6zh-24678.uks1.devtunnels.ms/ instead of https ?

[connor4312]

The port protocol isn't really relevant for this case (@alexr00 should it only be enabled with a tunnel setting or something?)

I don't understand why having a different port would be a problem since it is the way Nuxt works

You may notice that each port being forwarded gets its own URL. The dev tunnels service forwards connections on that URL to the specific host and port locally. The traffic coming to the URL must only go to the HTTPS default port 443, it doesn't list on all/arbitrary ports.

[Zebnastien]

Interesting, thank you very much.

[alexr00]

The port protocol isn't really relevant for this case (@alexr00 should it only be enabled with a tunnel setting or something?)

Yes, it should be a tunnel factory property. If Dev tunnels doesn't want to support this then I'll add a way to opt out. Codespaces does support protocol.

[Zebnastien]

Hi, what you do you mean by "a way to opt out" ?

PS: Same problem on Codespace

Is there anything I can do to help ?

[derekbekoe]

@Zebnastien to get it to work, you can do the following (via codespaces or vscode tunnel):

• Specify this in your configuration vite: { server: { hmr: { protocol: "wss", port: 5000 }, }, }
• Ensure both 3000 and 5000 are forwarded in the "Ports" tab.
• Port 5000 needs to be public.
• Modify the url you enter into the browser by placing the port number at the end. E.g. instead of https://gxqxj3-3000.devtunnels.ms use https://gxqxj3.devtunnels.ms:3000. You could do the same thing with the codespaces url.

We'll look at improving the documentation available on this.

--

More details/background:

It "just works" for Vite, React, etc. because they use the same port for http and the web-socket for hot-reload and dev tunnels listens on the ports they commonly use. A little-known feature of dev tunnels is that in addition to 443, the dev tunnels service listens on additional ports for http(s)/ws(s) traffic. Currently: 443,1027,1111,1234,1313,3000,3001,4000,4200,5000,5001,5173,5174,5500,5555,6006,7016,7027,7038,7092,7110,7137,7233,7258,7777,7860,8000,8050,8080,8081,8089,8888,9291

However, for Nuxt, it didn't "just work" for a few reasons:

1. Port 24678 is not in the above list so the WSS connection failed.
2. Even if 24678 was added to the list, Nuxt still uses two different ports (24678 and 3000) leading to the following: a. Since authentication is per-port, you'd have to still manually set 24678 to public as you would have only authenticated against port 3000. b. For a url like gxqxj3-3000.devtunnels.ms:24678, it is not possible for the service to determine which port should be used, it is ambiguous, so an error would be returned.

[Zebnastien]

Wow, thank you ! I will try this as soon as possible. Thank you very much.