BrowserSync does not work with a proxy on docker host.

[asannikov]

Issue details

BS is installed on docker host. But i tried to use it on local host as well. The result is the same.

All ports are accessible:
https://domain.test:3000/ => shows website
http://domain.test:3001/ => shows BS dashboard

CLI shows:

[debug] Found a free port: 3000
[debug] Setting Option: port - 3000
[debug] +  Step Complete: Finding an empty port
[debug] -> Starting Step: Getting an extra port for Proxy
[debug] +  Step Complete: Getting an extra port for Proxy
[debug] -> Starting Step: Checking online status
[debug] Resolved www.google.com, setting online: true
[debug] Setting Option: online - true
[debug] +  Step Complete: Checking online status
[debug] -> Starting Step: Resolve user plugins from options
[debug] +  Step Complete: Resolve user plugins from options
[debug] -> Starting Step: Set Urls and other options that rely on port/online status
[debug] Setting multiple Options
[debug] +  Step Complete: Set Urls and other options that rely on port/online status
[debug] -> Starting Step: Setting Internal Events
[debug] +  Step Complete: Setting Internal Events
[debug] -> Starting Step: Setting file watchers
[debug] +  Step Complete: Setting file watchers
[debug] -> Starting Step: Merging middlewares from core + plugins
[debug] Setting Option: middleware - List []
[debug] +  Step Complete: Merging middlewares from core + plugins
[debug] -> Starting Step: Starting the Server
[debug] Proxy running, proxing: https://domain.test
[debug] Running mode: PROXY
[debug] +  Step Complete: Starting the Server
[debug] -> Starting Step: Starting the HTTPS Tunnel
[debug] +  Step Complete: Starting the HTTPS Tunnel
[debug] -> Starting Step: Starting the web-socket server
[debug] Setting Option: clientEvents - List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[debug] +  Step Complete: Starting the web-socket server
[debug] -> Starting Step: Starting the UI
[debug] Setting Option: session - 1655184177731
[UI] Starting Step: Setting default plugins
[UI] Step Complete: Setting default plugins
[UI] Starting Step: Finding a free port
[UI] Step Complete: Finding a free port
[UI] Starting Step: Setting options also relevant to UI from BS
[UI] Step Complete: Setting options also relevant to UI from BS
[UI] Starting Step: Setting available URLS for UI
[debug] Getting option via path: [ 'urls' ]
[UI] Step Complete: Setting available URLS for UI
[UI] Starting Step: Starting the Control Panel Server
[UI] Using port 3001
[UI] Step Complete: Starting the Control Panel Server
[UI] Starting Step: Add element events
[UI] Step Complete: Add element events
[UI] Starting Step: Registering default plugins
[UI] Step Complete: Registering default plugins
[UI] Starting Step: Add options setting event
[UI] Step Complete: Add options setting event
[debug] +  Step Complete: Starting the UI
[debug] -> Starting Step: Merge UI settings
[debug] Setting Option: urls - Map { "local": "https://localhost:3000", "external": "https://domain.test:3000", "ui": "http://localhost:3001", "ui-external": "http://localhost:3001" }
[debug] +  Step Complete: Merge UI settings
[debug] -> Starting Step: Init user plugins
[debug] Setting Option: userPlugins - 
[debug] +  Step Complete: Init user plugins
[Browsersync] Proxying: https://domain.test
[Browsersync] Access URLs:
 --------------------------------------
       Local: https://localhost:3000
    External: https://domain.test:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...

on any change in the files of the website, BS catches changes but does not refresh the browser.
`[Browsersync] Reloading Browsers...``

I tried different browsers: Chrome, Safari, FF.

Steps to reproduce/test case

Used docker environment: https://github.com/markshust/docker-magento.
after install:
configure ports in docker-compose.yml:

    image: markoshust/magento-php:8.1-fpm-1
    ports:
      - "3000:3000"
      - "3001:3001"

Then call from the project root on your local host:
bin/root npm install -g npm@8.12.1
bin/root npm install -g browser-sync
bin/bash and there create a config file, provided belowCall it form the container (on bin/bash): browser-sync start --config bs-config.js --no-open --https`

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

• Browsersync [ 2.27.10 ]
• Node [ v18.2.0 ]
• Npm [ 8.12.1 ]

Affected platforms

• [ x ] linux
• [ x ] OS X
• [ x ] docker

Browsersync use-case

• API
• Gulp
• Grunt
• [ x ] CLI

If CLI, please paste the entire command below

browser-sync start --config bs-config.js --no-open --https

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

bs-config.js file:

module.exports = {
    "ui": {
        "port": 3001
    },
    "files": "**/*",
    "watchEvents": [
        "change"
    ],
    "watch": true,
    "ignore": [],
    "single": false,
    "watchOptions": {
        "ignoreInitial": true
    },
    "server": false,
    "proxy": "https://domain.test/",
    "port": 3000,
    "middleware": false,
    "serveStatic": [],
    "ghostMode": {
        "clicks": true,
        "scroll": true,
        "location": true,
        "forms": {
            "submit": true,
            "inputs": true,
            "toggles": true
        }
    },
    "logLevel": "debug",
    "logPrefix": "Browsersync",
    "logConnections": true,
    "logFileChanges": true,
    "logSnippet": true,
    "rewriteRules": [],
    "open": "false",
    "browser": "default",
    "cors": false,
    "xip": false,
    "hostnameSuffix": false,
    "reloadOnRestart": false,
    "notify": true,
    "scrollProportionally": true,
    "scrollThrottle": 0,
    "scrollRestoreTechnique": "window.name",
    "scrollElements": [],
    "scrollElementMapping": [],
    "reloadDelay": 0,
    "reloadDebounce": 500,
    "reloadThrottle": 0,
    "plugins": [],
    "injectChanges": true,
    "startPath": null,
    "minify": true,
    "host": "domain.test",
    "localOnly": false,
    "codeSync": true,
    "timestamps": true,
    "clientEvents": [
        "scroll",
        "scroll:element",
        "input:text",
        "input:toggles",
        "form:submit",
        "form:reset",
        "click"
    ],
    "socket": {
        "socketIoOptions": {
            "log": false
        },
        "socketIoClientConfig": {
            "reconnectionAttempts": 50
        },
        "path": "/browser-sync/socket.io",
        "clientPath": "/browser-sync",
        "namespace": "/browser-sync",
        "clients": {
            "heartbeatTimeout": 5000
        }
    },
    "tagNames": {
        "less": "link",
        "scss": "link",
        "css": "link",
        "jpg": "img",
        "jpeg": "img",
        "png": "img",
        "svg": "img",
        "gif": "img",
        "js": "script"
    },
    "injectNotification": false
};

[asannikov]

I found JS error in chrome console for https://domain.test:3000/:

Uncaught TypeError: F is not a function
    r browser-sync-client.js:5923
    qs browser-sync-client.js:6007
    <anonymous> browser-sync-client.js:7257
    <anonymous> browser-sync-client.js:7301
[browser-sync-client.js:5923](https://hafesan.test:3000/browser-sync/browser-sync-client.js?v=2.27.10:formatted)
    r browser-sync-client.js:5923
    qs browser-sync-client.js:6007
    <anonymous> browser-sync-client.js:7257
    <anonymous> browser-sync-client.js:7301````

i believe it's a reason why it does not work, but how to fix it?

[DenisLanz]

I've the same issue, trying to find a solution but still no luck.

Never mind, in my case it was the same as in #1968, though I had the same Uncaught TypeError: F is not a function.

I was able to solve it by removing the async option from the snippet:

"snippetOptions": {
 "async" : false
}

[felixranesberger]

Could you solve your issue @asannikov ?

[MeCapron]

Hello,

this is still an issue for me as in Magento we cannot (in fact we can, but it needs some tricks) load the script before require.

[asannikov]

@felixranesberger
i solved it by not using https. With HTTP it works well.

@MeCapron
i use it for Magento either. Only one thing i noticed - it does not work with xdebug. However, without xdebug and with HTTP it works well.