[Bug]: Dev server behind proxy not working

[march1993]

Version

[email protected]
└── @modern-js/[email protected] -> ./node_modules/.pnpm/@[email protected][email protected]/node_modules/@modern-js/app-tools

Details

Standard webpack configuration not recognized. See https://webpack.js.org/configuration/dev-server/#websocketurl which says To get protocol/hostname/port from browser use webSocketURL: 'auto://0.0.0.0:0/ws'.

Reproduce link

about:blank

Reproduce Steps

put dev server behind any famous reverse proxy like nginx, caddy

[chenjiahan]

websocketurl is a configuration of webpack-dev-server, which is not provided by webpack. Modern.js does not use webpack-dev-server as the dev server, so this configuration is not supported yet.

Currently modern.js dev server can be used with the proxy plugin, which is based on whistle.

Anyway, I think we will support websocketurl in the future.

[march1993]

websocketurl is a configuration of webpack-dev-server, which is not provided by webpack. Modern.js does not use webpack-dev-server as the dev server, so this configuration is not supported yet.

Currently modern.js dev server can be used with the proxy plugin, which is based on whistle.

Anyway, I think we will support websocketurl in the future.

Is there any workaround right now? Missing auto-reloading is quite annoying. 😢

[chenjiahan]

@march1993 Maybe you can try the proxy feature provided by modern.js, it should work well with dev server:

https://modernjs.dev/docs/apis/app/config/dev/proxy

[march1993]

@chenjiahan With latest modernjs, the problem seems to be gone by setting host and path to empty as follows,

export default defineConfig({
  tools: {
    devServer: {
      client: {
        host: '',
        port: '',
      },
    },
  },
});

I don't know whether ws/wss is auto derived from the page location, but host and path are definitely working.

[9aoy]

@chenjiahan With latest modernjs, the problem seems to be gone by setting host and path to empty as follows,

export default defineConfig({
  tools: {
    devServer: {
      client: {
        host: '',
        port: '',
      },
    },
  },
});

I don't know whether ws/wss is auto derived from the page location, but host and path are definitely working.

@march1993 yeah, the client.path/host configuration items in modern.js are related to webSocketURL. This is not clearly described in the documentation.