Open stratboy opened 1 year ago
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.
Linux Mint 21
v18.12.1
v8.19.2
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
// -----------------------------------
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.
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
.
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
Affected platforms
Browsersync use-case
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'