Bug: Auto-detect HOST for HMR to allow frontend access from another machine without manual configuration

[Shyam-Raghuwanshi]

Describe the bug

When developing Plone with Volto on a remote server, VM, WSL, or any environment where the frontend is accessed from a different machine, CSS and JavaScript fail to load because the HMR (Hot Module Replacement) assets reference localhost:3001.

The browser on the remote machine tries to load assets from localhost:3001, but localhost refers to the browser's machine, not the server running Volto.

Current Workaround
Users must manually set the HOST environment variable:
HOST=192.168.1.100 make frontend-start

This workaround is documented in:

plone/documentation#1780
plone/cookieplone#52

Volto should work correctly when accessed from a different network interface without requiring users to manually specify the HOST environment variable.

Suggested Solutions
Use relative URLs for HMR assets - Instead of http://localhost:3001/..., use relative paths like //hostname:3001/... where hostname is derived from the request.

Auto-detect host from request headers - The server could read the Host header from incoming requests and dynamically generate HMR URLs.

Proxy HMR through the main port - Route HMR WebSocket connections through port 3000 instead of requiring a separate port 3001.

Use window.location.hostname - On the client side, use the browser's current hostname instead of hardcoded localhost.

Related Issues
plone/documentation#1780
plone/cookieplone#52

Related PR
plone/documentation#2040

[shiveshsaini]

Hey! I'd like to work on this issue.

The problem makes sense - when you're developing on a remote server or VM and try to access from your local browser, HMR breaks because it's hardcoded to localhost:3001.

I'm thinking we could auto-detect the hostname from window.location and set the dev server to bind to 0.0.0.0. Should work for most setups and still respect the HOST variable if someone sets it manually.

I'll test it thoroughly across different scenarios (local, remote, Docker, WSL) before submitting.

Mind if I take this on?

[pratyush07-hub]

@shiveshsaini please read and follow First-time contributors, especially Things not to do, Contributing to Plone, and Contributing to Volto.