connect-browser-sync
Connect middleware for BrowserSync.
Use this middleware to automatically inject the necessary BrowserSync <script> tags into your HTML pages. Alternatively, you can integrate BrowserSync with your app using Gulp or Grunt.
Usage
Assuming you will only use BrowserSync in development:
npm install browser-sync --save-dev
npm install connect-browser-sync --save-dev
// app.js
var express = require('express');
var app = express();
// Other configuration...
if (app.get('env') === 'development') {
var browserSync = require('browser-sync');
var bs = browserSync.create().init({ logSnippet: false });
app.use(require('connect-browser-sync')(bs));
}
// Routes and handlers...See the BrowserSync API docs for initialization options.
Notes
- You must use version 2.0.0 or greater of the
browser-syncpackage. - The
app.usestatement must come before any handlers that you want to integrate with BrowserSync. This includes both dynamic route handlers and static asset handlers. - Injection only happens on responses with a
Content-Typeheader oftext/htmland content containing a</body>or</head>tag.
Compatibility
BrowserSync 1.x
If you need to use BrowserSync 1.x, use version 1.0.2 of this package.
Turbolinks
Turbolinks and BrowserSync can conflict (see turbolinks#147 and browser-sync#977). As a workaround, you can inject the BrowserSync tags into <head> instead.
To inject the tags into <head>, specify { injectHead: true }:
if (app.get('env') === 'development') {
var browserSync = require('browser-sync');
var bs = browserSync.create().init({ logSnippet: false });
app.use(require('connect-browser-sync')(bs, { injectHead: true }));
}Example
See the example folder.
License
Copyright © 2014 Chris Schmich
MIT License, See LICENSE for details.