Tunneling an SPFX WebPart to BrowserStack using ngrok

Question

I've tried this to no avail unfortunately, is there a way of tunneling a locally running version of an SPFX webpart in order to debug it through BrowserStack.

I can get it working directly with SP through the debug query string but it doesn't seem to work via an emulated device on BrowserStack.

https://tenant.sharepoint.com/sites/fakeSite?debug=true&noredir=true&debugManifestsFile=https://1a228f088633.ngrok.io/temp/manifests.js

Any help would be great, I am also aware this may not be possible :)

Answer 1

We debug locally hosted SPFx serves but we do not use ngrok. You have to be aware that there are limitations on which ports are usable as well, the default port 4321 will not work with browser stack. Hopefully that helps, an alternative to debug locally that works for us:

1. Ensure that Resolve all URLs through my network is enabled for your device
2. Update the serve.json port to 8888
3. In serve.json add "hostname": "bs-local.com",
4. Update c:\windows\system32\drivers\etc\hosts to include an entry: 127.0.0.1 bs-local.com

Then to test:

1. Navigate to https://bs-local.com:8888/ within the simulator and approve the certificate by proceeding to page
2. Append the updated hostname to the end of the SP url ?loadSPFX=true&debugManifestsFile=https://bs-local.com:8888/temp/manifests.js
3. Navigate to the BrowserStack website > select iPad Air (or any other device).

Additional Reference:

• Why is my URL redirected to http://bs-local.com from http://localhost?