HMR

[cstns]

Description

Webpack configuration used for development only. It introduces HMR, which is a big time saver for my use case, and provides somewhat improved performance.

The front-end build is now run by the webpack dev server. Assets are no longer served statically by Fastify.

devServer Configuration Keys and Description

• port: 8080: Specifies the port number the development server runs on. Accessible at http://localhost:8080. A different port is needed to avoid conflicts with the backend process. The web app is still accessible on port 3000 because the assets are still written to disk in the same location.
• historyApiFallback: true
  Ensures requests that would normally return 404 fall back to index.html, essential for SPAs with client-side routing.
• hot: true: Enables Hot Module Replacement (HMR), which updates modules in the browser without a full page refresh, improving the development experience.
• liveReload: false: Disables full page reload when files change, relying instead on HMR (hot: true) for updates.
• devMiddleware: { writeToDisk: true }: Configures the dev server to write the bundled files to disk. Useful for debugging or when processes require files on disk. As mentioned before, this allows Fastify to serve the front-end on port 3000 as well.
• proxy: Defines rules to forward specific requests to the appropriate backend or external services:
  • context: ['/api/v1', '/account/', '/storage', '/ee/billing']: Redirects API requests to the local backend running on http://localhost:3000.
  • context: ['/api']: Routes API requests to https://registry.npmjs.com and rewrites the path by removing /api. For example, /api/packages becomes /packages.
  • context: ['/api/**/projects/**/resources/stream']: Proxies WebSocket requests to ws://localhost:3000 to support WebSocket connections with the backend.

The proxy list is not complete. The /setup endpoint does not work on port 8080 and must be accessed on port 3000. There may be other endpoints missing as well.

I’m using this setup mainly for HMR during development, but it has also proved to be a better and more efficient alternative to the original setup.

In order to run you need to execute npm run start-watch and npm run web separately and the web app will be available on port :8080 (for HMR) while also preserving :3000

Related Issue(s)

None – this is just a playground.

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? → add the area:migration label

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.48%. Comparing base (7849fb0) to head (93117bb).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5889      +/-   ##
==========================================
- Coverage   76.51%   76.48%   -0.03%     
==========================================
  Files         369      369              
  Lines       17994    18004      +10     
  Branches     4194     4198       +4     
==========================================
+ Hits        13768    13771       +3     
- Misses       4226     4233       +7     

Flag	Coverage Δ
backend	76.48% <100.00%> (-0.03%)	⬇️

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

☔ View full report in Codecov by Sentry.
📢 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.