koa-browser-sync

BrowserSync middleware for Koa

koa-browser-sync

BrowserSync middleware for Koa.

Use this middleware to automatically inject the necessary browser-sync snippet into your HTML pages.

npm install koa-browser-sync --save-dev

There is two ways to use this module.

####1) Start browser-sync and inject the snippet with init: true (This option is set to false by default).

See the BrowserSync docs for initialization options.

var koa = require('koa');
var app = koa();
 
if (app.env == 'development') {
  // Use init option to start the server, default: false 
  // Other options are passed directly to browser-sync 
  // ex: {init:true, files: ["app/css/**/*.css"], logConnections: false} 
  app.use(require('koa-browser-sync')({init: true}));
}
 
app.use(function *(){
  this.body = '<html><body>Hello World</body></html>';
});
 
app.listen(3000);

####2) Get the snippet from BROWSERSYNC_SNIPPET environment variable (usefull to start browser-sync from a build tool like gulp, grunt, etc)

var koa = require('koa');
var app = koa();
 
if (app.env == 'development') {
  // No options or {init: false} 
  // The snippet must be provide by BROWSERSYNC_SNIPPET environment variable 
  app.use(require('koa-browser-sync')();
}
 
app.use(function *(){
  this.body = '<html><body>Hello World</body></html>';
});
 
app.listen(3000);
  • All the options are passed directly to browser-sync.
  • Injection only happens on responses with a Content-Type header of text/html and containing a closing body tag </body>.

MIT License

Simon Degraeve