browserSync suddenly has problem injecting its script to custom domain and does for localhost (webpack-mix)

Question

The situation is like this - I'm using Laravel's webpack-mix and for each project I use a custom domain like example-domain.test. I had a configuration that made browserSync sync files at domain: bs.example-domain.test and not sync for domain example-domain.test and it looked like this:

mix.browserSync({
  injectChanges: false,
  notify: true,
  host: 'bs.example-domain.test',
  port: 80,
  proxy: 'example-domain.test',
  open: 'external',
  files: [
    './html/assets/images',
    './html/templates',
    './html/views',
  ],
}); 

So the browser was refreshing fine when using addresses like:

• http://localhost
• http://bs.example-domain.test

and didn't for:

• http://example-domain.test

And that was the expected behavior. It worked fine for some time and in the recent week it stopped. The magic browserSync script for reloading is only injected to the http://localhost address and there the syncing works fine, but that's all - it doesn't work anymore for bs.example-domain.test.

I checked my project for HTML or JS errors but all is fine. It could be that some node modules update broke something (node version is the same for some time). Did anyone had similiar problem, how can I make browserSync to inject its script to my custom domain address too or how can I inject the script files myself to make it work? (copying the lines generated by browsersync from the localhost setup doesn't make syncing work)

Answer 1

After some hours I have found out what the problem was. It was my mistake in the hosts configuration, instead of:

192.168.10.10       example-domain.test
192.168.10.10       bs.example-domain.test

it should have been:

192.168.10.10       example-domain.test
127.0.0.1           bs.example-domain.test

Now I have working BrowserSync for bs.example-domain.test and no BrowserSync for example-domain.test.