Browser-sync is a tool that helps you test and develop themes on multiple devices at once, and auto-reloads all browsers when a file has changed on your machine.
Using browser-sync on your host machine
You can run browser-sync directly on your machine.
Make sure browser-sync is installed locally, or install it with:
You can run browser-sync from your Hyvä theme:
cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/ PROXY_URL="https://your-magento.test" npm run browser-sync
PROXY_URL environment variable to the host name you use to access your Magento development instance in the browser.
Or, you can run it directly with:
browser-sync start --proxy "https://your-magento.test" --https --files 'app/**/*.phtml, app/**/*.xml, app/**/*.css, app/**/*.js'
CTRL-C will stop the watcher.
browser-sync with Docker
You may prefer to run browser-sync in Docker, for example if you don’t have your theme files mounted from your local machine but only inside your docker containers.
You can start browser-sync through a Docker container to initiate hot-reload on theme-changes by running:
docker run -dt --name browser-sync --host -p 3000:3000 -p 3001:3001 -v $(PWD):/source -w /source ustwo/browser-sync start --proxy "yourdomain.localhost" --files 'app/**/*.phtml, app/**/*.xml, app/**/*.css, app/**/*.js'
If you don’t see changes when the browser reloads, check if caches are disabled, e.g.
If you have issues with caching during development, consider using Magento Cache Clean. Magento Cache Clean has a built-in watcher, so you don't have to worry about caching again.