feat: add option to define web socket client port for dev server

README.md

@@ -214,6 +214,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `ipc` (`string`) — the Unix socket to listen to. If `ipc` and `port` are not defined, then the socket `{rootDir}/dist/run/client.sock` is used.
   - `port` (`number | true`) — specify a port number to listen for requests on. If `true`, the free port will be selected automatically.
   - `webSocketPath` (`string`) — tells clients connected to devServer to use the provided path to connect. Default is `${publicPathPrefix}/build/sockjs-node`.
+  - `webSocketClientPort` (`number`) - tells clients to connect to devServer using this port from a browser. Default is `${devServer.port}`
   - `type` (`'https'`) — allow to serve over HTTPS.
   - `options` (`import('https').ServerOptions`) — allow to provide your own certificate.
 - `watchOptions` — a set of options used to customize watch mode, [more](https://webpack.js.org/configuration/watch/#watchoptions)

src/commands/dev/client.ts

@@ -41,6 +41,7 @@
     const {publicPath} = config.client;
     const {
         webSocketPath = path.normalize(`/${publicPath}/sockjs-node`),
+        webSocketClientPort,
         writeToDisk,
         ...devServer
     } = config.client.devServer || {};
@@ -101,7 +102,7 @@
     // Pass a single config to avoid multicompiler when SSR disabled.
     const compiler =
         bundler === 'rspack'
             ? rspack(isSsr ? rspackConfigs : rspackConfigs[0]!)
             : webpack(webpackConfigs);
 
     const staticFolder = path.resolve(paths.appDist, 'public');
@@ -139,7 +140,7 @@
         hot: true,
         client: {
             logging: config.verbose ? 'log' : 'error',
-            webSocketURL: {pathname: webSocketPath},
+            webSocketURL: {pathname: webSocketPath, port: webSocketClientPort},
             overlay: {
                 runtimeErrors: config.verbose,
                 warnings: config.verbose,

src/common/models/index.ts

@@ -37,6 +37,7 @@ interface DevServerConfig {
     ipc?: string;
     port?: number | true;
     webSocketPath?: string;
+    webSocketClientPort?: number;
     type?: 'https';
     options?: import('https').ServerOptions;
     writeToDisk?: boolean | ((targetPath: string) => boolean);