{"id":18241,"library":"connect-browser-sync","title":"connect-browser-sync","description":"Connect middleware that automatically injects BrowserSync script tags into responses. Version 2.1.0 supports BrowserSync >=2.0.0, with an optional Turbolinks workaround. Released 2015, no recent updates. Compared to Gulp/Grunt plugins, this integrates directly with Connect/Express middleware stack.","status":"maintenance","version":"2.1.0","language":"javascript","source_language":"en","source_url":"git://github.com/schmich/connect-browser-sync","tags":["javascript","browsersync","browser-sync","express","connect"],"install":[{"cmd":"npm install connect-browser-sync","lang":"bash","label":"npm"},{"cmd":"yarn add connect-browser-sync","lang":"bash","label":"yarn"},{"cmd":"pnpm add connect-browser-sync","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: requires browser-sync >=2.0.0","package":"browser-sync","optional":false}],"imports":[{"note":"CommonJS only; no default or named ESM export. Use require().","wrong":"import { connectBrowserSync } from 'connect-browser-sync';","symbol":"connect-browser-sync","correct":"var connectBrowserSync = require('connect-browser-sync');"},{"note":"Must call .create() and then .init() on the instance. .init() returns the instance.","wrong":"var bs = require('browser-sync').init({...});","symbol":"browser-sync","correct":"var browserSync = require('browser-sync').create();"},{"note":"The middleware factory expects a BrowserSync instance. Do not pass the raw module.","wrong":"app.use(require('connect-browser-sync'));","symbol":"middleware invocation","correct":"app.use(require('connect-browser-sync')(bs));"}],"quickstart":{"code":"var express = require('express');\nvar app = express();\n\nif (app.get('env') === 'development') {\n var browserSync = require('browser-sync');\n var bs = browserSync.create().init({ logSnippet: false });\n app.use(require('connect-browser-sync')(bs));\n app.get('/hello', function(req, res) {\n res.send('Hello');\n });\n app.listen(3000);\n}","lang":"javascript","description":"Shows how to set up connect-browser-sync with Express in development mode, injecting BrowserSync scripts."},"warnings":[{"fix":"Ensure app.use(require('connect-browser-sync')(bs)) appears before app.use(express.static(...)) and route definitions.","message":"Middleware must be placed before any route/static handlers you want BrowserSync to affect.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Upgrade both packages: npm install browser-sync@latest connect-browser-sync@latest","message":"Version 2.x only works with browser-sync >=2.0.0. Version 1.x uses browser-sync 1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Evaluate if package is still functional with your BrowserSync version; test thoroughly.","message":"Package not updated since 2015, and BrowserSync has evolved. May still work but consider modern alternatives like Vite or webpack HMR.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure your HTML responses have proper doctype and closing body/head tags.","message":"Injection only works on responses with Content-Type: text/html and containing or . Non-HTML responses are ignored.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pass second argument: app.use(require('connect-browser-sync')(bs, { injectHead: true }));","message":"When using Turbolinks, set { injectHead: true } to avoid conflicts.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"var bs = browserSync.create().init({ logSnippet: false }); app.use(require('connect-browser-sync')(bs));","cause":"Middleware is called with undefined bs variable.","error":"ReferenceError: bs is not defined"},{"fix":"app.use(require('connect-browser-sync')(bs));","cause":"Missing parentheses: not calling the factory.","error":"TypeError: connect-browser-sync is not a function"},{"fix":"Move middleware before all routes. Check Content-Type header.","cause":"Middleware not executed because it's placed after route handlers, or response is not text/html.","error":"BrowserSync script tag not injected"},{"fix":"npm install browser-sync --save-dev","cause":"browser-sync is not installed.","error":"Cannot find module 'browser-sync'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}