Browser-sync

Browser-sync is a powerful tool for theme development, enabling simultaneous testing across multiple devices and automatic browser reloads upon file changes.

Run Browser-sync on Your Host Machine

First, ensure Browser-sync is installed globally. If not, install it:

npm install -g browser-sync

To run Browser-sync from your Hyvä theme:

cd path/to/project/app/design/frontend/Acme/default/web/tailwind
npm run browser-sync

Ensure the PROXY_URL environment variable is set to your Magento development instance's hostname.

Alternatively, run it directly:

browser-sync start --proxy "https://your-magento.test" --https --files 'app/**/*.phtml, app/**/*.xml, app/**/*.css, app/**/*.js'

Press CTRL-C to stop the watcher.

Browser-sync with Docker

Run Browser-sync in Docker, especially if your theme files are only within Docker containers and not locally mounted.

To start Browser-sync via Docker for hot-reloading theme changes, execute:

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'

Troubleshooting

If browser reloads don't show changes, verify that caches like full_page, blocks_html, and layout are disabled.