Browsersync cmd to work within docker container.

[Shashank-Bhatt1]

HI,

I installed Magento using documentation provided in manual way section of this repo.

I am following along hyva-theme documentation and trying to auto-refresh in my windows 11 system. Magento 2.4.8 p3 lives inside docker container and its replica is in wsl2 for editing as volumes (except few folders which are not bind mounted like pub/static, vendor etc..)

I am running this command from within src directory (where m2 is there in this repo) of wsl2 and not getting browser-sync in my windows host machine

docker run -it --rm --name browser-sync -p 3000:3000 -p 3001:3001 -v $(pwd):/sou
rce -w /source ustwo/browser-sync start --proxy "https://magento.test" --files 'app/**/*.phtml, app/**/*.xml, app/**/*.c
ss, app/**/*.js' --https --insecure true --host localhost --no-open

Also, tweaked in many other ways (e.g. removing --host option) like ordinally command provided in hyva theme docs.

https://magento.test works great at superfast linux speed but browser-sync does not.

I am on network mode as mirrored in .wslconfig file under <Users>/<Username>/.wslconfig in windows 11 system.

Any help would be great.

[dosubot[bot]]

Hi @Shashank-Bhatt1! I'm Dosu and I’m helping the docker-magento team.

The issue is that magento.test is a hostname configured on your host machine (Windows/WSL2), not within Docker's internal network. Your BrowserSync container can't resolve it.

Solution: Use the Docker service name instead of magento.test. In docker-magento, the nginx container is typically named app and listens on ports 8000 (HTTP) and 8443 (HTTPS) internally. Try:

docker run -it --rm --name browser-sync \
  --network $(docker network ls --filter name=magento -q | head -1) \
  -p 3000:3000 -p 3001:3001 \
  -v $(pwd):/source -w /source \
  ustwo/browser-sync start --proxy "https://app:8443" \
  --files 'app/**/*.phtml, app/**/*.xml, app/**/*.css, app/**/*.js' \
  --https --no-open

The key changes:

1. Connect to the same Docker network as your Magento containers using --network
2. Proxy to https://app:8443 (the internal service name and port) instead of magento.test

Alternative: docker-magento already has LiveReload built into the nginx configuration that proxies to port 35729 on the phpfpm container. This might work better with your setup than running a separate BrowserSync container.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[Shashank-Bhatt1]

@dosu.

Thanks for the answer and yes it indeed was the issue. But still when something changes, it does not auto reflect in the browser e.g. styles.css in the pub/static directory. For now it is symlink to the same file in app directory as i am in developer mode. I can see browser-sync file even change but nothing happens in the windows chrome browser and i have to keep hard-refresh manually to see the changes.

Also, it would be absolutely pleasant if you could share the process in order to make hot-reload work instantly in chrome when some file changes using builtin nginx config for livereload?

[dosubot[bot]]

Glad that helped! For the built-in LiveReload setup, here's what you need:

1. Expose port 35729 - Add to your docker-compose.yml under phpfpm:

phpfpm:
  ports:
    - "35729:35729"

2. Run setup script:

bin/setup-grunt

3. Add the client script to your theme's default_head_blocks.xml (critical step!):

<script defer="true" src="/livereload.js?port=443" src_type="url"/>

The ?port=443 is important because nginx proxies LiveReload through HTTPS.

4. Start the watcher:

bin/grunt watch

This automatically spawns the LiveReload server - no separate LiveReload installation needed.

Full documentation is in the README.

Note on BrowserSync not refreshing: BrowserSync needs to inject its own client script to trigger reloads. Even though it detects file changes, without the injected script the browser won't know to refresh. Since you're proxying HTTPS, the script injection can be tricky. The built-in LiveReload approach with Grunt is more reliable for this docker-magento setup.

Also worth noting: the LiveReload Chrome extension is no longer available in the Chrome Web Store, so the script tag method is the way to go.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.