Advertise Browsersync instances over mDNS (bonjour/zeroconf/avahi)
The Browsersync-mDNS plugin advertises the current Browsersync instance over multicast Bonjour. This makes it fast and easy to connect from other test devices regardless of dynamic IP addresses, *.local
support or whatever.
$ npm install --save-dev browsersync-mdns
Add Browsersync-mDNS to the Browsersync init block's plugins array and the instance will be advertised when Browsersync starts up.
browserSync.init({
plugins: ["browsersync-mdns"]
});
Include --plugins browsersync-mdns
in your browsersync command:
browser-sync start -s app --plugins browsersync-mdns
Note that both Browsersync and this plugin will need to be installed globally.
In most cases, Browsersync-mDNS will advertise the current instance using the name
value from package.json.
To use a specific name instead, define the plugin using an object.
browserSync.init({
plugins: [
{
module: "browsersync-mdns",
options: {
name: "Local Dev Site"
}
}
]
});
See the Browsersync plugins documentation for other plugin configuration examples.
If options.name
isn't defined and a package.json file can't be found, the hostname will be used as a fallback.
For browsing mDNS/Bonjour services on Android and iOS, I've been using Tomoaki Takeda's (parKhang CyungCyung's?) BonjourSearch app (Android, iOS). It's a free, barebones app that does one simple thing really well. I haven't yet found a functional equivalent for Windows.
This project was partly inspired by stephenfri's bs-console-qrcode project, which prints a QR code linking to the current Browsersync instance directly in the terminal (and browser console).
Bonjour / ZeroConf / mDNS / multicast DNS / Avahi / DNS-SD... Can't we just pick one name?