Decouple devServer socket port from devServer port [Quasar v2]

[jhrr]

At the moment I can't see any way to specify a different port for the devServer socket than the port argument in the devServer block that the devServer listens on itself. They are coupled together by that one argument.

I have a containerised project which during development runs the Quasar dev server in a service on port 3000. No issues there. This container and the others are all behind an Nginx reverse proxy, which is the entrypoint for all requests, and this service is running on port 8000. Requests come in at 8000 and I forward them to Quasar at 3000 when suitable. Fine.

What I want to be able to do is to keep running the devServer on 3000 but to set the devServer reload websocket to connect via Nginx, so it would need to be bound to 8000 not to 3000.

However no matter what I try the socket will always have the port value that is set by the port argument in the devServer block (in my case, 3000).

I have tried using chainWebpack to override this by setting sockPort and similar to the values I want, and using quasar inspect I can see that those values are added to the webpack config. However there must be some Quasar logic that overrides these values in the final instance as they do not take effect.

Similarly, even if I use the public argument to devServer and add the entire proxy URL including the port (ie my.proxy:8000) the websocket will respect the domain name but it will replace the port with the value from port.

So, it seems to me that due to some internal logic on Quasar's part, all remote calls bound for the devServer are forced to use the same value from the port argument and there is no way to vary this between server and socket.

Just as a note, this kind of decoupling is provided cleanly and transparently when using Vite.

Am I missing something?

Thanks for all the effort!

[jhrr]

Solution found in this issue.

Add the following to the devServer config.

devServer: {
  port: 3000,
  client: {
    port: 8000,
  },
},