fix(web): provide free port to http-server (#16917)

packages/web/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
+    "detect-port": "^1.5.1",
     "http-server": "^14.1.0",
     "ignore": "^5.0.4",
     "tslib": "^2.3.0",

packages/web/src/executors/file-server/file-server.impl.ts

@@ -14,6 +14,7 @@ import { watch } from 'chokidar';
 import { platform } from 'os';
 import { join, resolve } from 'path';
 import { readModulePackageJson } from 'nx/src/utils/package-json';
+import * as detectPort from 'detect-port';
 
 // platform specific command name
 const pmCmd = platform() === 'win32' ? `npx.cmd` : 'npx';
@@ -24,10 +25,6 @@ function getHttpServerArgs(options: Schema) {
   if (options.cors) {
     args.push(`--cors`);
   }
-
-  if (options.port) {
-    args.push(`-p=${options.port}`);
-  }
   if (options.host) {
     args.push(`-a=${options.host}`);
   }
@@ -182,6 +179,11 @@ export default async function* fileServerExecutor(
     pathToHttpServerBin
   );
 
+  // detect port as close to when used to prevent port being used by another process
+  // when running in  parallel
+  const port = await detectPort(options.port || 8080);
+  args.push(`-p=${port}`);
+
   const serve = fork(pathToHttpServer, [outputPath, ...args], {
     stdio: 'pipe',
     cwd: context.root,
@@ -203,6 +205,7 @@ export default async function* fileServerExecutor(
   };
   process.on('exit', processExitListener);
   process.on('SIGTERM', processExitListener);
+
   serve.stdout.on('data', (chunk) => {
     if (chunk.toString().indexOf('GET') === -1) {
       process.stdout.write(chunk);
@@ -214,9 +217,7 @@ export default async function* fileServerExecutor(
 
   yield {
     success: true,
-    baseUrl: `${options.ssl ? 'https' : 'http'}://${options.host}:${
-      options.port
-    }`,
+    baseUrl: `${options.ssl ? 'https' : 'http'}://${options.host}:${port}`,
   };
 
   return new Promise<{ success: boolean }>((res) => {