Browsersync behind haproxy SSL termination, not working

I'm using docker entirely on local. Say haproxy container is proxying to my webapp backend container with SSL termination (self-signed). Besides, I've setup dnsmasq to resolve example.com to 127.0.0.1 and added 127.0.0.1 to the top of the DNS server list of my computer so that I can access my webapp running on the localhost with example.com in my browser. This worked perfectly.

Then, I connect haproxy to browser-sync backend container (ustwo/browser-sync) and browser-sync to my webapp. Seems something corrupt. The static part of the webapp shows correctly and API requests response well, but no browser-sync's stuff is working, outputting some text (see below) into the console of my browser. Maybe I misconfigured browser-sync but I couldn't find any information helpful.

This is my bs-config.js:

module.exports = {
  ui: {
    port: 8002
  },
  files: './dst/**/*',
  proxy: 'http://app:8000',
  port: 8001,
  logLevel: 'debug',
  logConnections: true,
  logFileChanges: true,
  logSnippet: true,
  open: false,
  cors: true,
  reloadOnRestart: true,
  reloadDebounce: 750,
  socket: {
    domain: 'localhost:8001'
  }
}

where app is the docker link of my webapp and 8000 is the listening port. Outputs on the console of different browsers are following (browser versions are latest).

Safari: [Error] Failed to load resource: An SSL error has occurred and a secure connection to the server cannot be made. https://localhost:8001/browser-sync/socket.io/?EIO=3&transport=polling&t=MCur2YU
Chrome: GET https://localhost:8001/browser-sync/socket.io/?EIO=3&transport=polling&t=MCuuI9k 0 ()
Firefox: No logs

Can anyone help? Or, I mean, is this possible?

Solution

I've resolved the issue by myself 😂

  socket: {
    domain: 'example.com'
  }

Setting like this enables browser-sync connection in my case. Maybe the point is, to make it pass through the haproxy, not directly, in order to resolve SSL requests from browsers properly.

But then I faced new issues; autoreloading timeouts with 504 and CSS injection doesn't work. After some inspection, I realised the cause was on my webapp side. I was misconfiguring the file watcher to restart the webserver when updates on static files (which should trigger only browser-sync to reload, not the webserver).

I'm so sorry for making noise 😇