Skip to content

Frontend/node-24-upgrade#1313

Open
jsandoval81 wants to merge 6 commits intocsg-org:mainfrom
InspiringApps:frontend/node-24-upgrade
Open

Frontend/node-24-upgrade#1313
jsandoval81 wants to merge 6 commits intocsg-org:mainfrom
InspiringApps:frontend/node-24-upgrade

Conversation

@jsandoval81
Copy link
Copy Markdown
Collaborator

@jsandoval81 jsandoval81 commented Mar 24, 2026

Requirements List

  • (Local): Use NVM to install and switch to Node 24.14.0 for /webroot
  • (Local) Add Yarn to new Node version if needed: npm install -g yarn
  • (Local): Remove /webroot/node_modules
  • yarn install --ignore-engines

Description List

  • Update Node version to 24.14.0 in configs
  • Update Node version in docs
  • Updated Github workflow configs with bumped action versions
  • Relax favicons-webpack-plugin version to allow minor version updates (just in case)
  • To remove deprecation warnings, update local yarn serve config to use express to proxy image assets
  • Update dependencies in /backend/compact-connect-ui-app to resolve python lint messages

Testing List

  • yarn test:unit:all should run without errors
  • yarn test:unit:coverage should run without errors
  • yarn serve should run without errors
  • yarn build should run without errors
  • Code review
  • Testing
    • All scripts above should complete as expected
    • 1 new deprecation warning: [DEP0169] DeprecationWarning: url.parse()
      • This has been traced and is caused by our favicon package at build time. It is ok to leave in deprecation state for now. Updating it would require non-trivial updates to our build toolchain.
    • yarn build no longer has the fsStats() deprecation warnings

Closes #1081

Summary by CodeRabbit

  • Chores

    • Upgraded Node.js runtime used in CI, build pipelines, and local/dev scripts; updated related workflow action versions.
  • Dependencies

    • Added express to dev dependencies; loosened favicons-webpack-plugin version range.
    • Relaxed fast-xml-parser resolution to a compatible semver range.
    • Updated pinned development and runtime dependency versions.
  • Refactor

    • Replaced dev-server proxy with static middleware for serving image assets.
  • Docs

    • Bumped documented Node.js prerequisite to 24.14.0

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 24, 2026

📝 Walkthrough

Walkthrough

Upgrades Node.js usage to v24.14.0 across CI, build scripts, pipeline, and README; adds express and replaces the webpack /img proxy bypass with express.static middleware; relaxes one webpack plugin version and updates a Yarn resolution and several Python dependency pins.

Changes

Cohort / File(s) Summary
CI / Workflows
​.github/workflows/check-compact-connect-ui-app.yml, ​.github/workflows/check-webroot.yml
Bumped Node runtime to 24.14.0; updated GitHub Action versions (actions/checkout v2→v5, actions/setup-node v1→v6) and adjusted cache key to include Node version.
Build scripts & Pipeline
webroot/bin/build.sh, backend/compact-connect-ui-app/pipeline/frontend_pipeline.py
Switched local/install/runtime references from Node 22.x to Node 24.x / 24.14.0.
Frontend config & deps
webroot/vue.config.js, webroot/package.json
Removed devServer.proxy /img bypass and fs usage; added devServer.setupMiddlewares using express.static for /img; added express to devDependencies; relaxed favicons-webpack-plugin to ^6.0.1.
Python & Lambda deps
backend/compact-connect-ui-app/requirements.txt, backend/compact-connect-ui-app/requirements-dev.txt, backend/compact-connect-ui-app/lambdas/nodejs/package.json
Bumped pinned Python tooling and CDK dependency versions; updated resolutions.fast-xml-parser from 5.3.6 to ^5.5.7.
Documentation
webroot/README.md
Updated Node.js prerequisite from 22.1.0 to 24.14.0.

Sequence Diagram(s)

sequenceDiagram
  actor Browser
  participant DevServer as "webpack DevServer"
  participant Express as "Express static middleware"
  participant FS as "dist/img (filesystem)"

  Browser->>DevServer: GET /img/<path>
  DevServer->>Express: invoke middleware for /img
  Express->>FS: read dist/img/<path>
  FS-->>Express: file stream or ENOENT
  alt file found
    Express-->>DevServer: 200 + file stream
    DevServer-->>Browser: 200 + payload
  else not found / error
    Express-->>DevServer: 404 / error
    DevServer-->>Browser: 404
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested reviewers

  • rmolinares
  • jlkravitz
  • isabeleliassen

Poem

🐰 I hopped through code with cheerful cheer,

Swapped Node to twenty‑four this year,
Proxy gone, Express takes stage,
Static images serve the page,
CI, builds, and deps now steer.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description comprehensively covers requirements, implementation details, and testing expectations aligned with the template structure, though the template's 'Closes #' field is filled in correctly with '#1081'.
Linked Issues check ✅ Passed All code changes align with issue #1081 requirements: Node 24.14.0 upgraded across configs/workflows/docs, deprecations documented, and compatibility ensured via updated dependencies and Express middleware.
Out of Scope Changes check ✅ Passed All changes scope appropriately to the Node upgrade objective. The dependency version updates in requirements.txt/requirements-dev.txt and package.json relate to Node 24 compatibility; the express/middleware changes directly address Node 24 deprecation warnings.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check ✅ Passed The title 'Frontend/node-24-upgrade' clearly identifies the main change as a Node.js version upgrade to version 24 for the frontend. It is concise, specific, and directly reflects the primary objective of the changeset.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.github/workflows/check-compact-connect-ui-app.yml:
- Line 55: Update the TestApp job's node-version to match the LintNode job by
changing its node-version value from '24.11.1' to '24.14.0'; locate the TestApp
job definition in the workflow and set the node-version field there so both
LintNode and TestApp use '24.14.0' for consistent Node versions across the
workflow.

In @.github/workflows/check-webroot.yml:
- Around line 64-66: The CI cache must be invalidated when the Node runtime
changes (we moved to actions/setup-node@v6 with node-version '24.14.0'); update
the cache key used for node_modules to include the Node runtime so native
modules (e.g., sharp) are rebuilt for the new Node—modify the cache step that
currently keys only on yarn.lock to append the Node version (or a Node runtime
hash) so caches built under Node 22.1.0 are not restored for Node 24.14.0;
locate the workflow step referencing actions/setup-node@v6 and the cache step
that uses yarn.lock (cache-action or cache key variable) and change the key
composition to include the node-version value.

In `@webroot/README.md`:
- Line 20: Update the Local Development section to add a cleanup step advising
developers to delete webroot/node_modules before reinstalling dependencies when
switching Node versions; specifically amend the Node version bullet ("**[Node]
`24.14.0`**") to include a short note instructing to remove node_modules (and
optionally lockfiles) and reinstall (npm/yarn/pnpm) to avoid native dependency
issues like sharp rebuild failures.

In `@webroot/vue.config.js`:
- Line 15: The project requires express directly in vue.config.js (the
require('express') at the top and the dev server static-serving code around
lines 167–170), but webroot/package.json lacks an explicit devDependency; add
"express" to webroot/package.json's devDependencies (pin a compatible version
used by the workspace or latest semver you test), run yarn install to update
lockfile, and keep the require('express') usage intact (or remove the
eslint-disable if you prefer) so yarn serve won't fail if transitive deps
change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ebb91520-bfe3-4e65-a72d-1c421a455790

📥 Commits

Reviewing files that changed from the base of the PR and between 7d1196c and 2581bf5.

⛔ Files ignored due to path filters (1)
  • webroot/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (7)
  • .github/workflows/check-compact-connect-ui-app.yml
  • .github/workflows/check-webroot.yml
  • backend/compact-connect-ui-app/pipeline/frontend_pipeline.py
  • webroot/README.md
  • webroot/bin/build.sh
  • webroot/package.json
  • webroot/vue.config.js

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
webroot/vue.config.js (1)

162-175: Add a defensive guard before destructuring devServer.

Line 163 assumes devServer is always defined. Although setupMiddlewares will typically receive a valid devServer object in webpack-dev-server 4.15.2, a guard improves startup diagnostics if the invocation context changes.

Suggested hardening
         setupMiddlewares(middlewares, devServer) { // During local yarn serve, proxy image requests: /img/... → <project>/dist/img/...
+            if (!devServer || !devServer.app) {
+                throw new Error('webpack-dev-server is not available in setupMiddlewares');
+            }
             const { app } = devServer;
             const distImgDir = path.join(__dirname, 'dist', 'img');
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@webroot/vue.config.js` around lines 162 - 175, The setupMiddlewares
implementation destructures devServer without checking it; add a defensive guard
at the top of setupMiddlewares to ensure devServer is defined before doing const
{ app } = devServer (e.g., if (!devServer) { /* log or throw a clear error */
}). If devServer is missing, return middlewares or throw a descriptive error so
startup diagnostics are clear; keep the rest of the logic that computes
distImgDir and calls app.use unchanged (refer to setupMiddlewares, devServer,
app, distImgDir, and the existing middlewares return).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@webroot/vue.config.js`:
- Around line 162-175: The setupMiddlewares implementation destructures
devServer without checking it; add a defensive guard at the top of
setupMiddlewares to ensure devServer is defined before doing const { app } =
devServer (e.g., if (!devServer) { /* log or throw a clear error */ }). If
devServer is missing, return middlewares or throw a descriptive error so startup
diagnostics are clear; keep the rest of the logic that computes distImgDir and
calls app.use unchanged (refer to setupMiddlewares, devServer, app, distImgDir,
and the existing middlewares return).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6ff81596-aa56-49b1-8f69-426fb8c60acf

📥 Commits

Reviewing files that changed from the base of the PR and between 2581bf5 and d976128.

⛔ Files ignored due to path filters (1)
  • webroot/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (4)
  • .github/workflows/check-compact-connect-ui-app.yml
  • .github/workflows/check-webroot.yml
  • webroot/package.json
  • webroot/vue.config.js
✅ Files skipped from review due to trivial changes (1)
  • .github/workflows/check-compact-connect-ui-app.yml
🚧 Files skipped from review as they are similar to previous changes (1)
  • .github/workflows/check-webroot.yml

@jsandoval81 jsandoval81 changed the title WIP: Node upgrade WIP: Frontend/node-24-upgrade Apr 8, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
backend/compact-connect-ui-app/requirements-dev.txt (2)

2-2: Document or align lockfile generation Python version with CI/pipeline environments

requirements-dev.txt is compiled with Python 3.12, but CI runs Python 3.14 and the CDK pipeline uses Python 3.13 for synth. This can cause resolver drift in development and CI (especially with environment markers). Either standardize the pip-compile Python version to match the CI/pipeline environment or document that 3.12 is intentionally the baseline for lockfile generation and why it's appropriate despite the version differences.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@backend/compact-connect-ui-app/requirements-dev.txt` at line 2, The
requirements-dev.txt shows it was compiled with Python 3.12 which conflicts with
CI (3.14) and CDK synth (3.13); either recompile the lockfile using the
CI/pipeline Python version to avoid resolver drift (run pip-compile under Python
3.14 or 3.13 as used by CI/CD and commit the regenerated requirements-dev.txt),
or update the file header and repository docs to explicitly state that Python
3.12 is the intentional baseline and explain why environment markers and
dependency resolution remain valid despite CI using 3.13/3.14; reference the
requirements-dev.txt file and ensure any CI/CD build matrix or bootstrap scripts
use the same Python interpreter when generating or validating the lockfile.

76-81: Review formatter output and config behavior changes for ruff 0.15.9 in CI

The upgrades to pytest==9.0.3 and pytest-cov==7.1.0 are compatible (pytest-cov declares pytest>=7 support). pip-tools==7.5.3 is stable across Python 3.12–3.14 with no breaking output changes documented. However, ruff==0.15.9 introduces breaking changes:

  • Formatter output changes (2026 style guide) will produce different formatting diffs
  • Config resolution behavior for extend chains may alter rule selection and target-version inference
  • Rules stabilization may surface new lint findings previously hidden in preview mode

Test ruff's formatter output against your actual codebase before CI deployment to catch unexpected formatting differences.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@backend/compact-connect-ui-app/requirements-dev.txt` around lines 76 - 81,
Pin and test the ruff upgrade: run the ruff 0.15.9 formatter locally against the
repository and compare diffs before merging the updated requirements-dev.txt
entry for ruff to CI; if formatting or config-resolution changes break expected
CI results, either (a) adjust the ruff config (extend chains, target-version, or
rules) to match the new behavior, (b) update CI formatting expectations, or (c)
pin to the previous ruff version until fixes are applied. Ensure you exercise
ruff's formatter and linter using the same config resolution path the CI will
use so rules stabilization and formatter changes are caught early.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@backend/compact-connect-ui-app/requirements-dev.txt`:
- Line 2: The requirements-dev.txt shows it was compiled with Python 3.12 which
conflicts with CI (3.14) and CDK synth (3.13); either recompile the lockfile
using the CI/pipeline Python version to avoid resolver drift (run pip-compile
under Python 3.14 or 3.13 as used by CI/CD and commit the regenerated
requirements-dev.txt), or update the file header and repository docs to
explicitly state that Python 3.12 is the intentional baseline and explain why
environment markers and dependency resolution remain valid despite CI using
3.13/3.14; reference the requirements-dev.txt file and ensure any CI/CD build
matrix or bootstrap scripts use the same Python interpreter when generating or
validating the lockfile.
- Around line 76-81: Pin and test the ruff upgrade: run the ruff 0.15.9
formatter locally against the repository and compare diffs before merging the
updated requirements-dev.txt entry for ruff to CI; if formatting or
config-resolution changes break expected CI results, either (a) adjust the ruff
config (extend chains, target-version, or rules) to match the new behavior, (b)
update CI formatting expectations, or (c) pin to the previous ruff version until
fixes are applied. Ensure you exercise ruff's formatter and linter using the
same config resolution path the CI will use so rules stabilization and formatter
changes are caught early.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 437080c6-d4de-48b1-a7a1-fb985ef002b4

📥 Commits

Reviewing files that changed from the base of the PR and between 9b4e554 and 5d43419.

⛔ Files ignored due to path filters (1)
  • backend/compact-connect-ui-app/lambdas/nodejs/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (2)
  • backend/compact-connect-ui-app/requirements-dev.txt
  • backend/compact-connect-ui-app/requirements.txt
✅ Files skipped from review due to trivial changes (1)
  • backend/compact-connect-ui-app/requirements.txt

@jsandoval81 jsandoval81 requested a review from rmolinares April 8, 2026 20:33
@jsandoval81 jsandoval81 changed the title WIP: Frontend/node-24-upgrade Frontend/node-24-upgrade Apr 8, 2026
@jsandoval81 jsandoval81 requested a review from jlkravitz April 10, 2026 18:48
@jsandoval81
Copy link
Copy Markdown
Collaborator Author

@jlkravitz This is ready for your review.

Copy link
Copy Markdown
Collaborator

@jlkravitz jlkravitz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@isabeleliassen This is good to go!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend update Node to v24

3 participants