BrowserSync not refreshing pages on file change

[stratboy]

Issue details

Terminal says [Browsersync] File event [change] : ../template-parts/blocks/overlapping-columns/overlapping-columns.css

But browser are not refreshing.

Steps to reproduce/test case

Configuration is in a package.json scripts:

"dev:bs": "browser-sync start --proxy 'myserver.com/subdir/' --files '../**/*.css, ../**/*.php, ../../../lib/**/*.php, ./dist/*js, ./product-list/dist/*js'"

It properly refreshes when css files in other directories change. But in this case it does not, even if, as you can see above, it is detecting the changes

Please specify which version of Browsersync, node and npm you're running

• Browsersync [2.27.7]
• Node [v14.19.0]
• Npm [6.14.17]

Affected platforms

• [ ] OS X

Browsersync use-case

• [ ] CLI / npm scripts

If CLI, please paste the entire command below

browser-sync start --proxy 'myserver.com/subdir/' --files '../**/*.css, ../**/*.php, ../../../lib/**/*.php, ./dist/*js, ./product-list/dist/*js'

[the0neWhoKnocks]

I may be experiencing the same issue. I started up a new project today with a locked version of 2.27.7, the one that's been working for me for a while. After changing a file the browser starts to reload, I see the WS message about a reload but the browser and CLI hang. I dug around and found that the dependency of browser-sync-client was actually at latest 2.27.11. I'd expect since the two modules are so closely tied that browser-sync would lock versions for browser-sync-* dependencies. Since the changes were supposed to be patch changes I didn't think anything of it at first. So I started the process of narrowing down at what version it broke. Luckily it was a quick search:

# working state (for reloads, UI errors on Angluar issues)
npm i -D browser-sync@2.27.7 browser-sync-client@2.27.7 browser-sync-ui@2.27.7

# broken
npm i -D browser-sync@2.27.8 browser-sync-client@2.27.8 browser-sync-ui@2.27.8

The 2.27.8 release which brought in upgrades of socket.io seems to have borked live updates for me.

• OS: Linux Mint 21
• Node: v18.12.1
• NPM: v8.19.2

[the0neWhoKnocks]

Continued digging. Found that when running the newer modules I needed to add serveStatic. That setting's been there for ages, not sure why the socket.io change caused an issue. Snippet of what I have so far:

proxy: {
  target: `${protocol}://localhost:${SERVER__PORT}`,
  ws: true,
},
+ serveStatic: ['./dist/public'],

Best guess is that while reloading it some how was losing reference to local assets to load during a reload?

Now I'm trying to figure out why when I specify ports, does browser-sync add one to the UI port.

port: 3001,
ui: { port: 3002 },

// results in
// -----------------------------------
//        Local: http://localhost:3001
//  -----------------------------------
//           UI: http://localhost:3003
//  -----------------------------------

[the0neWhoKnocks]

Turns out the random port increment was because of ws: true in my above example. I currently don't have a websocket wired up on the new project so I removed it, and the UI port went back to 2.

When ws was missing, the socket request looks like:

http://localhost:3001/browser-sync/socket.io/?EIO=4&transport=polling&t=OKoD3oT

When I set ws I get this, even though I specify that the UI should be on that port:

http://localhost:3002/browser-sync/socket.io/?EIO=4&transport=polling&t=OKoD3oT

Perhaps there's been a regression due to the socket.io update, or there's now a race-condition that has the ports being assigned before the check for the UI's port.

[the0neWhoKnocks]

Ok, so these are the resulting changes that got reloads, websockets, and ports behaving for me (Current Connections in the UI is still blank, but can live with out it):

{
  files: [
    'dist/public/manifest.json',
  ],
  ghostMode: false,
  https: bSyncHTTPS,
  notify: false,
  open: false,
  port: SERVER__PORT + 1,
  proxy: {
    target: `${protocol}://localhost:${SERVER__PORT}`,
    ws: true,
  },
-  reloadDebounce: 300,
+  reloadDebounce: 1000,
  snippetOptions: {
    rule: {
      match: /<\/body>/i,
      fn: (snippet) => snippet,
    },
  },
+   socket: {
+     domain: `localhost:${SERVER__PORT + 3}`,
+     port: SERVER__PORT + 3,
+   },
  ui: {
    port: SERVER__PORT + 2,
  },
  watchOptions: chokidarOpts,
}

The socket node was needed to get reliably assignable ports, and reloadDebounce fixed the hanging during reload. Hope this can help someone else upgrading from 2.27.7.