Frontend/node-24-upgrade

.github/workflows/check-compact-connect-ui-app.yml

@@ -52,7 +52,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version: '24.11.1'
+          node-version: '24.14.0'
 
       # Use any cached yarn dependencies (saves build time)
       - uses: actions/cache@v4

.github/workflows/check-webroot.yml

@@ -54,16 +54,16 @@ jobs:
       - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
 
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v5
 
       - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
       - run: echo "🖥️ The workflow is now ready to test your code on the runner."
 
       # Setup Node
       - name: Setup Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v6
         with:
-          node-version: '22.1.0'
+          node-version: '24.14.0'
 
       # Use any cached yarn dependencies (saves build time)
       - uses: actions/cache@v4

backend/compact-connect-ui-app/pipeline/frontend_pipeline.py

@@ -145,7 +145,7 @@ def __init__(
                     {
                         'phases': {
                             'install': {
-                                'runtime-versions': {'python': '3.13', 'nodejs': '22.x'},
+                                'runtime-versions': {'python': '3.13', 'nodejs': '24.x'},
                             }
                         }
                     }

webroot/README.md

@@ -17,7 +17,7 @@
 
 ---
 ## Prerequisites
-- **[Node](https://nodejs.org/) `22.1.0`**
+- **[Node](https://nodejs.org/) `24.14.0`**
     * Use **[NVM](https://github.com/creationix/nvm#installation)** to manage Node versions
     * The `curl`-based install script is typically all that's required
     * A brief overview of the [NVM Usage commands](https://github.com/nvm-sh/nvm#usage) is typically helpful

webroot/bin/build.sh

@@ -7,7 +7,7 @@ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || pr
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
 
 
-nvm install 22.3.0
+nvm install 24.14.0
 npm install -g yarn
 yarn install --ignore-engines
 yarn build --dest dist --ignore-engines

webroot/package.json

@@ -85,7 +85,7 @@
     "eslint-plugin-vue-a11y": "^0.0.31",
     "eslint-plugin-vuejs-accessibility": "^1.1.0",
     "favicons": "^7.2.0",
-    "favicons-webpack-plugin": "6.0.1",
+    "favicons-webpack-plugin": "^6.0.1",
     "flush-promises": "^1.0.2",
     "inquirer": "7.1.0",
     "less": "^3.0.4",

webroot/vue.config.js

@@ -10,16 +10,15 @@
 //
 
 const path = require('path');
-const fs = require('fs');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
+const express = require('express'); // eslint-disable-line import/no-extraneous-dependencies
 
 const env = process.env.NODE_ENV;
 const ENV_PRODUCTION = 'production';
 const ENV_TEST = 'test';
 const baseUrl = process.env.BASE_URL;
 const localDevPort = process.env.LOCAL_DEV_PORT;
-const localDevProxy = {};
 const shouldMockApi = (process.env.VUE_APP_MOCK_API === 'true');
 
 const appName = 'TODO';
@@ -28,36 +27,6 @@ const developerName = 'TODO';
 const themeColor = '#1C7CB0'; // @TODO
 const backgroundColor = '#FFFFFF'; // @TODO
 
-// ============================================================================
-// =                          LOCAL PROXY CONFIG                              =
-// ============================================================================
-// Configure the local dev server proxy rules
-// https://webpack.js.org/configuration/dev-server/#devserverproxy
-// localDevProxy[process.env.VUE_APP_API_EXAMPLE_ROOT] = { target: process.env.LOCAL_DEV_PROXY_EXAMPLE };
-localDevProxy['/img'] = {
-    // Proxy images that are created during build that we'd still like to see in the local `yarn serve` app
-    // Requires that `yarn build` has been run at least once for the built images to exist in /dist
-    target: `http://localhost:${localDevPort}`,
-    selfHandleResponse: true,
-    bypass: (req, res) => {
-        if (req.url.includes('/img')) {
-            const proxyImage = `${__dirname}/dist${req.url}`;
-            const fileStream = fs.createReadStream(proxyImage);
-
-            fileStream.on('open', () => {
-                fileStream.pipe(res);
-            });
-
-            fileStream.on('error', (err) => {
-                res.status((err.code === 'ENOENT') ? 404 : 500);
-                res.send(err);
-            });
-        }
-
-        return null; // Ignores bypass
-    },
-};
-
 // ============================================================================
 // =                     WEBPACK PLUGIN CUSTOMIZATION                         =
 // ============================================================================
@@ -190,6 +159,20 @@ module.exports = {
         client: {
             overlay: true,
         },
+        setupMiddlewares(middlewares, devServer) { // During local yarn serve, proxy image requests: /img/... → <project>/dist/img/...
+            const { app } = devServer;
+            const distImgDir = path.join(__dirname, 'dist', 'img');
+
+            app.use(
+                '/img',
+                express.static(distImgDir, {
+                    fallthrough: false,
+                    index: false,
+                })
+            );
+
+            return middlewares;
+        },
     },
     pwa: {
         // Overlaps w/ faviconsPlugin; setting here in case of ordering conflict
@@ -336,9 +319,6 @@ module.exports = {
                 '@tests': path.join(__dirname, '/tests'),
             },
         },
-        devServer: {
-            proxy: localDevProxy,
-        },
         devtool: (env === ENV_PRODUCTION) ? false : 'eval-cheap-source-map',
     },
 };