Formalize HMR dev setup with hidden webpack dev server

[cstns]

Closes #8108

Summary

• Run the webpack dev server on a hidden port (2880) instead of 8080, so devs keep using port 3000 for the app
• Adds build-watch-hmr npm script that mirrors build-watch but with HMR enabled
• Avoids cross-origin issues with embedded Node-RED editors and port conflicts with other local services

How it works

The dev server writes built files to disk (writeToDisk: true) for the Fastify backend to serve on port 3000. The HMR client in the browser connects to ws://localhost:2880/ws for live updates. No proxy rules or CORS needed.

Usage

# Terminal 1: start the backend
npm run start-watch

# Terminal 2: start frontend with HMR
npm run build-watch-hmr

Or use npm run serve with build-watch-hmr instead of build-watch if you want both in one terminal.

Test plan

• Run npm run build-watch-hmr and verify it compiles and starts on port 2880
• Open http://localhost:3000 and verify the app loads
• Edit a Vue component and verify HMR applies the change without full reload
• Open an embedded Node-RED editor and verify the iframe loads without CORS errors

🤖 Generated with Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.17%. Comparing base (1218b5e) to head (b906eec).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8109   +/-   ##
=======================================
  Coverage   76.17%   76.17%           
=======================================
  Files         440      440           
  Lines       23604    23604           
  Branches     6285     6285           
=======================================
  Hits        17981    17981           
  Misses       5623     5623           

Flag	Coverage Δ
backend	76.17% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[n-lark]

• Run npm run build-watch-hmr and verify it compiles and starts on port 2880
• ❌ Open http://localhost:3000 and verify the app loads

So to get this to run I need both of these running -

# Terminal 1
npm run start-watch      # Fastify backend → serves 3000

# Terminal 2
npm run build-watch-hmr  # webpack HMR → 2880

If we wanted one command could probably do something like:

"serve-hmr": "npm-run-all --parallel build-watch-hmr start-watch"

• 🔥 Edit a Vue component and verify HMR applies the change without full reload
• Open an embedded Node-RED editor and verify the iframe loads without CORS errors

[cstns]

If we wanted one command could probably do something like:
"serve-hmr": "npm-run-all --parallel build-watch-hmr start-watch"

I have a habbit of running them independently and didn't want to impose, but yes we should also have a hmr flavored serve as well.

Do we want this HMR-scoped? Its global rn.

that is a very valid point