Working on a client site, I had no option to install the server locally or even have access to a dev version, I still wanted to have browsersync refreshing the page when the CSS (or JavaScript changed)

I've found a solution on this GitHub thread

I'm using the Proxie app to inject my changes and manipulate the client's server's response.

I'm adding this browser sync scrip tag like this (Proxie uses Cheerio for modifying the returned html):

$('body').prepend('<script async="" src="https://localhost:3014/browser-sync/browser-sync-client.js?v=2.26.3"></script>')

I had to make sure to add a rule:

Any response header ☛ contains ☛ html

so that Proxie ignores all other files (CSS, JavaScript, images, etc)

The browser-sync config needed a few options to make it work:

https: true, cors: true ☛ not sure about this one host: 'localhost' localOnly: true

Finally, I also have a rule in Proxie to map the external /assets folders (containing CSS, etc) to a local folder. Again, I'm not 100% sure this is needed with browsersync.

With this setup, I'm working on an https site, that I have no access to (to the server code), while still updating like I was working on a local website!

Note about Browsersync HTTPS certificate

I had some issues on both Chrome and Firefox, that the browser-sync could not be loaded:

GET https://localhost:3014/browser-sync/browser-sync-client.js?v=2.26.3 net::ERR_CERT_AUTHORITY_INVALID

There's some ways to add a certificate to Browsersync, (see also this GitHub issue), but I was too lazy to go through all that.

Instead what worked:

Open the browser-sync snippet (https://localhost:3014/browser-sync/browser-sync-client.js?v=2.26.3) in another tab, accept the warning message and then reload the main page!