Is it possible to HMR a resource on a remote server?

Question

I'm developing a typescript react app on salesforce and have a bit of a unique workflow use-case. In order to easy the burden of deployments every time I made a change to my app, I have a switch to load the js bundle from localhost in my salesforce page (served by webpack-dev-server).

visualforce

<apex:outputPanel layout="none" rendered="{!$CurrentPage.parameters.local == '1'}">
    <script src="https://localhost:8080/bundle.js" />
</apex:outputPanel>

This works great, but it would be really cool if I could leverage HMR as well. Is this possible?

I've got HMR working on the local resource, but it doesn't seem to work from Salesforce.

Answer 1

When you HMR it requests 2 files:

• something.hot-reload.json
• and something.hot-reload.js

If it can't GET both files it fails. Check you haven't got 404s in your network tab when it is requesting these files.

Another issue here is that if it needs to get the files from a remote server then that server won't be on the same domain and thus CORS will kick in. If you don't put the CORS headers on the responding server then the requests will fail.

Alternatively, since CORS is only enforced by the browser, you can do some proxying on the webpack-dev-server to proxy the requests for these files if need be. See https://webpack.js.org/configuration/dev-server/#devserver-proxy.