Arvados

Creating this ticket to save the webpack-dev-server upgrade solution I found since it causes a chain reaction of other upgrades that I didn't want to get into

Updating webpack-dev-server will require an upgrade to cypress (seems trivial), and an upgrade to react (didn't want to open that can of worms atm), and possibly more.

Upgrade to webpack-dev-server should be roughly like this:

commit c6b47e5bed2225d0430291d36edeb743fa3d9186
Author: Stephen Smith <stephen@curii.com>
Date:   Mon Jun 23 14:14:22 2025 -0400

    22978: Bump webpack-dev-server to address CVE-2025-30359 and CVE-2025-30360

    Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/services/workbench2/config/getHttpsConfig.js b/services/workbench2/config/getHttpsConfig.js
index b8148b6b06..93cffbac50 100644
--- a/services/workbench2/config/getHttpsConfig.js
+++ b/services/workbench2/config/getHttpsConfig.js
@@ -64,7 +64,7 @@ function getHttpsConfig() {
     validateKeyAndCerts({ ...config, keyFile, crtFile });
     return config;
   }
-  return isHttps;
+  return {};
 }

 module.exports = getHttpsConfig;
diff --git a/services/workbench2/config/webpackDevServer.config.js b/services/workbench2/config/webpackDevServer.config.js
index 9abf9d9e94..c91767b757 100644
--- a/services/workbench2/config/webpackDevServer.config.js
+++ b/services/workbench2/config/webpackDevServer.config.js
@@ -95,7 +95,10 @@ module.exports = function (proxy, allowedHost) {
       publicPath: paths.publicUrlOrPath.slice(0, -1),
     },

-    https: getHttpsConfig(),
+    server: {
+        type: "https",
+        options: getHttpsConfig(),
+    },
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
@@ -105,27 +108,35 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware`
-      // middlewares before `redirectServedPath` otherwise will not have any effect
-      // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer));
+    setupMiddlewares: (middlewares, devServer) => {
+        if (!devServer) {
+            throw new Error("webpack-dev-server is not defined");
+        }

-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(devServer.app);
-      }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+        if (fs.existsSync(paths.proxySetup)) {
+            // This registers user provided middleware for proxy reasons
+            require(paths.proxySetup)(devServer.app);
+        }
+
+        // Keep `evalSourceMapMiddleware`
+        // middlewares before `redirectServedPath` otherwise will not have any effect
+        // This lets us fetch source contents from webpack for the error overlay
+        middlewares.unshift(
+            evalSourceMapMiddleware(devServer),
+        );
+
+        middlewares.push(
+            // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+            redirectServedPath(paths.publicUrlOrPath),
+            // This service worker file is effectively a 'no-op' that will reset any
+            // previous service worker registered for the same host:port combination.
+            // We do this in development to avoid hitting the production cache if
+            // it used the same host and port.
+            // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+            noopServiceWorkerMiddleware(paths.publicUrlOrPath),
+        );

-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+        return middlewares;
     },
   };
 };
diff --git a/services/workbench2/package.json b/services/workbench2/package.json
index 92876913ee..fcb80ede0f 100644
--- a/services/workbench2/package.json
+++ b/services/workbench2/package.json
@@ -128,7 +128,7 @@
     "unionize": "2.1.2",
     "uuid": "3.3.2",
     "webpack": "5.94.0",
-    "webpack-dev-server": "^4.6.0",
+    "webpack-dev-server": "^5.2.2",
     "webpack-manifest-plugin": "^4.0.2",
     "workbox-webpack-plugin": "^6.4.1" 
   },
diff --git a/services/workbench2/scripts/start.js b/services/workbench2/scripts/start.js
index a166bfb1e7..a4c35f71ff 100644
--- a/services/workbench2/scripts/start.js
+++ b/services/workbench2/scripts/start.js
@@ -136,16 +136,16 @@ checkBrowsers(paths.appPath, isInteractive)
     });

     ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-      process.on(sig, function () {
-        devServer.close();
+      process.on(sig, async function () {
+        await devServer.stop();
         process.exit();
       });
     });

     if (process.env.CI !== 'true') {
       // Gracefully exit when stdin ends
-      process.stdin.on('end', function () {
-        devServer.close();
+      process.stdin.on('end', async function () {
+        await devServer.stop();
         process.exit();
       });
     }