dev-admin support webpack dev server randomly select available port

packages/xarc-app-dev/src/lib/dev-admin/admin-server.ts

@@ -64,6 +64,7 @@ const getTerminalColumns = () => {
   );
 };
 
+type ProcessPorts = { webpackDevPort?: number; appPort?: number };
 export class AdminServer {
   _opts: any;
   _passThru: any;
@@ -78,7 +79,8 @@ export class AdminServer {
   _wds: any;
   _proxy: any;
   _app: any;
-  _appPort: number;
+  _ports: ProcessPorts;
+  _updateProxyTimer: any;
   _appLogLevel: any;
   _menu: any;
   _fullyStarted: any;
@@ -106,6 +108,8 @@ export class AdminServer {
       return autoIo ? new AutomationIO("Dev Admin") : new ConsoleIO();
     };
 
+    this._ports = { appPort: devProxy.appPort };
+
     this._io = (options && options.inputOutput) || defaultIo();
 
     this._shutdown = false;
@@ -137,8 +141,6 @@ export class AdminServer {
     this._shutdown || (await this.startWebpackDevServer());
     this._shutdown || (await this.startAppServer());
 
-    this._appPort = devProxy.appPort;
-
     if (!this._shutdown && DEV_PROXY_ENABLED) {
       // to debug dev proxy
       // await this.startProxyServer("--inspect-brk");
@@ -509,6 +511,10 @@ ${proxyItem}<magenta>M</> - Show this menu <magenta>Q</> - Shutdown
         const listenForReport = () =>
           info._child.once("message", data => {
             if (data.name === "webpack-report") {
+              if (data.port) {
+                SERVER_ENVS[PROXY_SERVER_NAME].WEBPACK_DEV_PORT = data.port;
+                this.updateProxyServer({ webpackDevPort: parseInt(data.port, 10) });
+              }
               resolve(null);
             } else {
               listenForReport();
@@ -770,12 +776,11 @@ ${instruction}`
       waitStart: async info => {
         info._child.on("message", (data: any) => {
           // this._io.show(ck`<orange>proxy message ${JSON.stringify(data)}</>`, this._appPort);
-          if (data.name === "proxy-started" && `${data.appPort}` !== `${this._appPort}`) {
-            this.sendMsg(PROXY_SERVER_NAME, {
-              appPort: this._appPort,
-              name: "restart",
-              quiet: true
-            });
+          if (data.name === "proxy-started") {
+            const proxyPorts = { appPort: parseInt(data.appPort, 10) };
+            if (proxyPorts.appPort !== this._ports.appPort) {
+              this.updateProxyServer({}, true);
+            }
           }
         });
         this.passThruLineOutput(this._proxy, info._child.stdout, this._io);
@@ -784,6 +789,22 @@ ${instruction}`
     });
   }
 
+  updateProxyServer(newPorts: ProcessPorts, force = false) {
+    const update: ProcessPorts = { ...this._ports, ...newPorts };
+    if (!_.isEqual(update, this._ports) || force) {
+      this._ports = update;
+      clearTimeout(this._updateProxyTimer);
+      this._updateProxyTimer = setTimeout(() => {
+        this._updateProxyTimer = null;
+        this.sendMsg(PROXY_SERVER_NAME, {
+          ...update,
+          name: "restart",
+          quiet: true
+        });
+      }, 250).unref();
+    }
+  }
+
   async waitForAppServerStart(info) {
     let startTimeout;
     let started = false;
@@ -829,8 +850,7 @@ ${info.name} - assuming it started.</>`);
         if (DEV_PROXY_ENABLED) {
           if (data.appPort) {
             SERVER_ENVS[PROXY_SERVER_NAME].APP_SERVER_PORT = data.appPort;
-            this._appPort = data.appPort;
-            this.sendMsg(PROXY_SERVER_NAME, { ...data, name: "restart" });
+            this.updateProxyServer({ appPort: parseInt(data.appPort, 10) });
           }
         }
       }
@@ -843,7 +863,6 @@ ${info.name} - assuming it started.</>`);
 
       if (info._child) {
         info._child.removeListener("message", messageHandler);
-        info._child.on("message", appUpdateHandler);
       }
       this.watchServer(info.name);
       defer.resolve();
@@ -862,6 +881,7 @@ ${info.name} - assuming it started.</>`);
     });
 
     info._child.on("message", messageHandler);
+    info._child.on("message", appUpdateHandler);
 
     if (info.options.noTimeoutCheck !== true) {
       startTimeout = setTimeout(handleTimeout, 20000);

packages/xarc-app-dev/src/lib/dev-admin/dev-http.ts

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-console */
+/* eslint-disable no-console, max-statements */
 
 import { createReadStream } from "fs";
 import { Readable } from "stream";
@@ -9,6 +8,7 @@ import Url from "url";
 import { resolve as pathResolve } from "path";
 import { FakeRes } from "../fake-res";
 import { Middleware } from "./middleware";
+import { makeDefer } from "xaa";
 
 export interface DevHttpServerOptions {
   port: number;
@@ -24,6 +24,7 @@ export interface DevHttpServer {
   stop: () => void;
   httpServer?: Server;
   addListener: (event: HttpServerEvent, hander: any) => void;
+  getPort: () => number;
 }
 
 /**
@@ -53,18 +54,16 @@ export const setupHttpDevServer = function({
   host,
   protocol = "http"
 }: DevHttpServerOptions): DevHttpServer {
-  const createMiddleware = new Promise(resolve => {
-    setTimeout(() => {
-      resolve(getMiddleware({ port, host, protocol }));
-    }, 1);
-  });
-
+  let createMiddlewarePromise;
   let middleware;
+  let listenDefer = makeDefer();
 
   const server: Server = createServer(async (req, res) => {
     try {
       if (!middleware) {
-        middleware = await createMiddleware;
+        await listenDefer;
+        middleware = await createMiddlewarePromise;
+        listenDefer = createMiddlewarePromise = null;
       }
       const next1 = await middleware.process(req, res, {
         skip: () => middleware.canContinue,
@@ -104,8 +103,13 @@ export const setupHttpDevServer = function({
   });
 
   return {
-    start: () => {
-      server.listen(port, host);
+    start() {
+      server.listen(port, host, () => {
+        createMiddlewarePromise = new Promise(resolve => {
+          resolve(getMiddleware({ port: this.getPort(), host, protocol }));
+        });
+        listenDefer.resolve();
+      });
     },
     stop: () => {
       server.close(() => {
@@ -116,7 +120,10 @@ export const setupHttpDevServer = function({
     addListener: (event: HttpServerEvent, cb) => {
       server.addListener(event.toString(), cb);
     },
-    httpServer: server
+    httpServer: server,
+    getPort: () => {
+      return server && (server.address() as any).port;
+    }
   };
 };
 export const setup = setupHttpDevServer;

packages/xarc-app-dev/src/lib/dev-admin/dev-server-start.ts

@@ -21,9 +21,11 @@ function createDevAdminHttpServer(xarcOptions) {
   });
 
   devHttpServer.addListener("listening", () => {
-    console.log(ck`<green>webpack dev server listening on port ${xarcOptions.webpack.devPort}</>`);
+    const port = devHttpServer.getPort();
+    console.log(ck`<green>webpack dev server listening on port ${port}</>`);
     process.send({
       name: "webpack-report",
+      port,
       valid: false
     });
   });

packages/xarc-app-dev/src/lib/dev-admin/redbird-proxy.ts

@@ -112,6 +112,7 @@ ${APP_RULES.map(
 };
 
 let regAppPort = 0;
+let regWebpackDevPort = 0;
 
 const registerElectrodeDevRules = ({
   proxy,
@@ -130,6 +131,7 @@ const registerElectrodeDevRules = ({
   const logStreamsPath = `${devPath}/stream-logs`;
   const appForwards: any[] = [[{}, { port: appPort }]];
   regAppPort = appPort;
+  regWebpackDevPort = webpackDevPort;
 
   if (!noDev) {
     appForwards.push(

packages/xarc-app-dev/src/lib/dev-admin/redbird-spawn.ts

@@ -48,7 +48,7 @@ const isProxyRunning = async () => {
 const handleRestart = type => {
   const restart = (options: any = {}) => {
     if (!options.quiet) {
-      console.log(`${type}Electrode dev proxy restarting`);
+      console.log(`${type}Electrode dev proxy restarting`, options);
     }
     const restartUrl = formUrl({
       ...httpDevServer,

packages/xarc-app-dev/src/lib/dev-tasks.ts

@@ -811,14 +811,11 @@ module.exports =  {
         - NODE_ENV is set to 'production' if it's not set.
         - options: [all options will be passed to node when starting your app server]`,
         task(context) {
-          userXrun.updateEnv(
-            {
-              NODE_ENV: "production"
-            },
-            {
-              override: false
-            }
-          );
+          userXrun.updateEnv({ NODE_ENV: "production" }, { override: false });
+          if (process.env.APP_SERVER_PORT === "0") {
+            console.log("mock-cloud need to explicitly set APP_SERVER_PORT, changing 0 to 3100");
+            process.env.APP_SERVER_PORT = "3100";
+          }
 
           const mockTask = xrun2.concurrent([
             "dev-proxy --mock-cdn --no-dev",