Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BrowserSync not refreshing pages on file change #1978

Open
2 tasks
stratboy opened this issue Oct 6, 2022 · 4 comments
Open
2 tasks

BrowserSync not refreshing pages on file change #1978

stratboy opened this issue Oct 6, 2022 · 4 comments

Comments

@stratboy
Copy link

stratboy commented Oct 6, 2022

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
Copy link

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 [email protected] [email protected] [email protected]

# broken
npm i -D [email protected] [email protected] [email protected]

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
Copy link

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
Copy link

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
Copy link

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.

the0neWhoKnocks added a commit to the0neWhoKnocks/scaffold that referenced this issue Dec 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants