Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/schmich/connect-browser-sync
Connect middleware for BrowserSync
https://github.com/schmich/connect-browser-sync
browser-sync browsersync connect express javascript middleware server
Last synced: 9 days ago
JSON representation
Connect middleware for BrowserSync
- Host: GitHub
- URL: https://github.com/schmich/connect-browser-sync
- Owner: schmich
- License: mit
- Created: 2014-02-06T21:58:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-03-30T19:42:30.000Z (over 2 years ago)
- Last Synced: 2024-10-12T16:48:51.995Z (25 days ago)
- Topics: browser-sync, browsersync, connect, express, javascript, middleware, server
- Language: JavaScript
- Homepage: https://www.npmjs.org/package/connect-browser-sync
- Size: 27.3 KB
- Stars: 16
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# connect-browser-sync
[Connect](https://github.com/senchalabs/connect) middleware for [BrowserSync](https://github.com/shakyShane/browser-sync).
Use this middleware to automatically inject the necessary BrowserSync `` tags into your HTML pages. Alternatively, you can integrate BrowserSync with your app using [Gulp](https://github.com/shakyShane/gulp-browser-sync) or [Grunt](https://github.com/shakyShane/grunt-browser-sync).
[](https://npmjs.org/package/connect-browser-sync)
[](https://travis-ci.org/schmich/connect-browser-sync)
## Usage
Assuming you will only use BrowserSync in development:
```
npm install browser-sync --save-dev
npm install connect-browser-sync --save-dev
```
```javascript
// 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](http://www.browsersync.io/docs/api/) for initialization options.
## Notes
- You must use version 2.0.0 or greater of the `browser-sync` package.
- The `app.use` statement 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-Type` header of `text/html` and content containing a `</body>` or `</head>` tag.
## Compatibility
### BrowserSync 1.x
If you need to use BrowserSync 1.x, use [version 1.0.2](https://github.com/schmich/connect-browser-sync/releases/tag/v1.0.2) of this package.
### Turbolinks
Turbolinks and BrowserSync can conflict (see [turbolinks#147](https://github.com/turbolinks/turbolinks/issues/147) and [browser-sync#977](https://github.com/BrowserSync/browser-sync/issues/977)). As a workaround, you can inject the BrowserSync tags into `<head>` instead.
To inject the tags into `<head>`, specify `{ injectHead: true }`:
```javascript
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](example) folder.
## License
Copyright © 2014 Chris Schmich
<br>
MIT License, See [LICENSE](LICENSE) for details.