Browser Sync won't load bundle.js on external devices for dev build

[SunnyJohal]

Node version: 6.2.2

npm version: 3.9.5

Operating system: MAC OSX El Capitan (v 10.11.15)

Command line used: npm start -s

Steps to reproduce:

• Npm install the starter kit
• Run the command in dev mode: npm start -s
• Once the app is loaded locally: On an external device enter the External access URL in the browser.
• Open the browser console, you will see the error message: http://localhost:3000/bundle.js net::ERR_CONNECTION_REFUSED

What I've tried:

• Using a different port for the app (no success).
• Trying a different external device (another laptop and phone, no luck).
• Using a different machine to run the app on (another mac, no luck).

Note:

Browser sync hot reloading works fine with the production build. It's the development environment that I appear to be having issues with .

Really love this starter kit and want to use it so hope it's an issue that I can get resolved. Cheers

Sunny

[kwelch]

Does the external address work at all? If you use it on the local device with the external address does it load?

[SunnyJohal]

Yes the external address works on my local device. Thanks for your response.

[coryhouse]

This is interesting timing because I was considering removing browsersync since it complicates configuration and I suspect few are using its sync features.

That said, great catch. I've reproduced the issue. I don't have a fix idea at this point, but thanks for the heads up.

[SunnyJohal]

I have a feeling that it is something to do with the webpack-dev-middleware package. I'll let you know if I find a fix for this issue. Cheers

[SunnyJohal]

Ok when I edit the publicPath property in webpack.config.dev.js to use the ip address on my local machine (in place of localhost) then hot reloading works. Not ideal but a temporary fix for anyone reading this issue.

[coryhouse]

Yep, you're on the right track. That's where I was focused as well. I hoped removing the publicPath altogether would resolve it, but that didn't fix it for me.

It does appear we don't need publicPath anymore. I could have sworn it was necessary before.

[SunnyJohal]

An even better fix is to simply comment out the publicPath property in webpack.config.js

[coryhouse]

Ah, indeed! Problem is, the public path was added to resolve this issue in dev: #125

Any ideas on how to support both use cases?

[SunnyJohal]

A possible solution could be to change the publicPath line to read publicPath: '/' (just an idea it would need testing). How can I reproduce the error in #125 ?

[SunnyJohal]

I'm not getting this error when I leave out the public path. Is it still an issue? Are you able to test this locally?

[coryhouse]

"I'm not getting this error..."

Which error are you referring to?

[SunnyJohal]

I am able to load webfonts without any issues.

[SunnyJohal]

Ignore that last post I can see the blob: prefix on the url now. I'll look into this further

[SunnyJohal]

There needs to be a way to get the ip address dynamically using node. Do you know of an easy way to do this?

[kwelch]

We should be able to pull this off with the process.env object. As you would expect the properties are IP and port.

[SunnyJohal]

Hi ketch,
I'm getting undefined when I'm trying to access process.env.IP did you have any luck? Am I referencing that property correctly?

[SunnyJohal]

*kwelch

[SunnyJohal]

Ok so I've figured out a work around to fetch the ip address dynamically for now (based on this post)

So after line 3 in webpack.config.dev.js I add the following code to get the ipAddress

const os = require('os');
const ifaces = os.networkInterfaces();

let lookupIpAddress = null;

for ( let dev in ifaces ) {
  if ( dev !== 'en1' && dev !== 'en0' ) {
    continue;
  }

  ifaces[ dev ].forEach( function( details ) {
    if ( details.family === 'IPv4' ) {
      lookupIpAddress = details.address;
    }
  });
}

let ipAddress   = lookupIpAddress;

Then I replace the line publicPath: 'http://localhost:3000/', with publicPath: 'http://' + ipAddress + ':3000/'

If there is a more succinct way of getting the same result I'd love to hear it.

[kwelch]

They may be undefined, I typically use those variables with fallbacks. I should have some time tonight to crack this open and take a look. I know that I have given demos using Browsersync on external devices.

[SunnyJohal]

Awesome, I look forward to seeing what you come up with!

[kwelch]

Please see comment on #125, I did my best to go into detail on what I was seeing and why.

[kwelch]

This can be closed with that PR merge.

[coryhouse]

Thanks for the heads up @kwelch! Thanks to @kwelch for resolving!

PR: #207