3

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.

NSjonas
  • 10,693
  • 9
  • 66
  • 92

1 Answers1

2

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
danday74
  • 52,471
  • 49
  • 232
  • 283
  • So I think I'l able to get around the CORS issue, but the `something.hot-reload.json` and ` something.hot-reload.js` I think are the issue. The `something` in that URL is pointed to the remote server, but I think it needs to point to localhost? Is there anyway to configure this? – NSjonas Sep 22 '17 at 22:26
  • find where the .json and .js files are being served - so for example in your browser go to http://localhost/i/think/they/are/here/hot-reload.json - you should see a JSON file - ok so now you know where they ... the next step ... – danday74 Sep 22 '17 at 22:50
  • is to make the requests go to the right place - i think for me the answer was setting the publicpath - https://webpack.js.org/configuration/dev-server/#devserver-publicpath - or you could set up a proxy at wherever the requests are currently going to proxy requests for hot-reload.json to localhost (this may not be easy, i think in my scenario both servers were running on localhost on diff ports so it was possible) – danday74 Sep 22 '17 at 22:56
  • ya, mine aren't running on local host, but a remote PAAS so i'm not sure how that would work... – NSjonas Sep 23 '17 at 03:28
  • i assume u have webpack running on localhost and api calls go to the PAAS, file requests to webpack? if so then send all requests to localhost and get webpack to proxy API calls to the PAAS.- use the proxy setting - determine which calls go to PAAS by putting /api in the path on those requests. sorry answer came to me late last night but i fell asleep – danday74 Sep 23 '17 at 08:18
  • Wouldn't `something.hot-reload.json` still re requested to the relative URL of the site the actual application is running on? I can send all MY requests, but I don't seem to control to change where the `react-hot-loader` is sending it's requests (otherwise I would just send them to localhost) – NSjonas Sep 24 '17 at 05:57
  • its hard to answer without fully understanding your setup. I have no experience with PAAS. However, typically you would have your code in a github repo that you clone to your local machine. Webpack would run on your local machine and all requests would be to your local machine. Where APIs are not running locally or are running on a diff port then you would proxy those requests to the desired location using webpack dev server config. I'm not sure why webpack is requesting hot-reload.json from a different domain. Is there something in your webpack config or your webpack-dev-server ... – danday74 Sep 24 '17 at 09:23
  • config that refers to the other domain? (typically all code making http requests would not hardcode the domain but would use window.location or something similar to use the current domain) – danday74 Sep 24 '17 at 09:24
  • ^ ya that's my point. Even if I setup the proxy, the code isn't running on local host, the `app.js` bundle is just being served from by webpack (it's actually running on something like `https://na.14.salesforce.com`). So no matter what it seems like the hotloader scripts are going to make the request relative to the URL. I don't think my use case is supported, but thanks for your help! – NSjonas Sep 24 '17 at 15:12