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

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.

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.

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()