fix(build): webviews sometimes did not load during development (aws#6556)

## Problem:

In our development build we spawn a webpack server that serves the Vue
files used by our webviews. It is served on port 8080, but sometimes an
existing process is already using it, and this causes the webpack server
to use the next available port. But because we assume it will use 8080
it silently breaks, and when developing the Q webview would not load as
expected.

## Solution:

Explicitly require 8080 in the webpack server cli command, also create a
custom script to catch the error early and explain how to resolve it.

Now in the build tasks if 8080 is in use the dev can see the failed task
with the solution explicitly stated.

---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Signed-off-by: nkomonen-amazon <[email protected]>

Author: nkomonen-amazon

packages/amazonq/.vscode/tasks.json

@@ -44,7 +44,8 @@
             "problemMatcher": "$ts-webpack-watch",
             "options": {
                 "cwd": "${workspaceFolder}/../../packages/core"
-            }
+            },
+            "presentation": { "panel": "dedicated" }
         },
         {
             "label": "terminate",

packages/core/package.json

@@ -424,7 +424,7 @@
         "compileOnly": "tsc -p ./",
         "compileDev": "npm run compile -- --mode development",
         "webpackDev": "webpack --mode development",
-        "serveVue": "webpack serve --config-name vue --mode development",
+        "serveVue": "ts-node ./scripts/build/checkServerPort.ts && webpack serve --port 8080 --config-name vue --mode development",
         "watch": "npm run clean && npm run buildScripts && npm run compileOnly -- --watch",
         "lint": "ts-node ./scripts/lint/testLint.ts",
         "generateClients": "ts-node ./scripts/build/generateServiceClient.ts ",

packages/core/scripts/build/checkServerPort.ts

@@ -0,0 +1,57 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Validate that the required port used by webviews during development is not being used.
+ */
+
+import * as net from 'net'
+
+/** This must be kept up to date with the port that is being used to serve the vue files. */
+const portNumber = 8080
+
+function checkPort(port: number): Promise<boolean> {
+    return new Promise((resolve) => {
+        const server = net.createServer()
+
+        server.once('error', (err) => {
+            if ((err as NodeJS.ErrnoException).code === 'EADDRINUSE') {
+                resolve(true)
+            }
+        })
+
+        server.once('listening', () => {
+            server.close()
+            resolve(false)
+        })
+
+        server.listen(port)
+    })
+}
+
+async function main() {
+    try {
+        const isPortInUse = await checkPort(portNumber)
+
+        if (isPortInUse) {
+            console.error(`
+    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+
+    ERROR: Webviews will not load as expected, meaning Q may not work.
+    REASON: Port ${portNumber} is already in use, preventing the latest webview files from being served.
+    SOLUTION: Kill the current process using port ${portNumber}.
+              - Unix: "kill -9 $(lsof -t -i :${portNumber})"
+
+    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
+    `)
+            process.exit(1)
+        }
+    } catch (error) {
+        console.error('Error checking port:', error)
+        process.exit(1)
+    }
+}
+
+void main()