Setting Up Browsersync

Add live reloads and synchronized cross-device testing to your workflow

Because your development environment may have its own approach to Browsersync-like functionality, Browsersync is not included by default. You can install it as follows (in the same place you ran npm install):

npm install browser-sync --save-dev

If you’re using a custom .test domain for local development, you can use Browsersync’s proxy mode with that domain by adding the following line to the scripts section of your package.json file alongside the other watch:* commands:

"watch:browser-sync": "browser-sync start --proxy \"https://development-website.test\" --files \"theme\" --no-notify --no-inject-changes",Code language: plaintext (plaintext)

You’ll just need to update development-website.test to match your local development domain. You should also confirm you’re using the correct protocal—either https or http.

Separating Browsersync from the watch script

If you don’t want to use Browersync every time you run npm run watch, you’ll need to remove the command from the previous section and create a command for Browsersync without the watch: prefix:

"browser-sync": "browser-sync start --proxy \"https://development-website.test\" --files \"theme\" --no-notify --no-inject-changes",Code language: plaintext (plaintext)

Then you can add a command that runs the normal watch:* scripts alongside your new browser-sync command:

"watch-bs": "run-p watch:** browser-sync",Code language: plaintext (plaintext)

Running npm run watch will continue to work the same way as it always has, and npm run watch-bs will run the standard series of watch:* commands alongside your new one to execute Browsersync.