Webpack 3 devserver hot module replacement through apache mod_proxy

Question

I have a project where we use webpack's devserver for local development. We also have the hot module replacemet for live reload: hot module replacement

We have our front end running in docker. With that front end, we have also apache's mod_proxy. Idea is to have all http call's to go through the mod_proxy. So browser will send http to mod_proxy, that will then proxy to front end. This works well without hot module replacement. But for some reason, we are unable to get the hot module replacement work. I guess it is because hot module replacement uses web sockets, and tunneling web socket call's through apache's mod_proxy is not enabled by default?

Has someone been able to achieve this? How did you manage to do it? What configurations were needed in devserver / hot module replacement? Did you use apache's mod_proxy web socket tunnel: mod_proxy_wstunnel, and how did you configure it? You do not need to answer to all the sub questions listed before, I just need the info on how to get it working.

Answer 1

A. Yes. I could get this working with the following configuration in Apache2

<Location /sockjs-node>
        RequestHeader set Host "localhost:4200"
        RequestHeader set Origin "http://localhost:4200"
        ProxyPass ws://localhost:4200/sockjs-node
        ProxyPassReverse ws://localhost:4200/sockjs-node
        CacheDisable on
</Location>
<Location /sockjs-node/info>
        ProxyPass http://localhost:4200/sockjs-node/info
        ProxyPassReverse http://localhost:4200/sockjs-node/info
        CacheDisable on
</Location>

B. My apache2 server has mod_proxy and mod_proxy_wstunnel enabled.

C. I am using this configuration for my angular 7 development.