{"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,"search_vec":"'2.0.0':19 '2.1.0':16 '2015':26 'automat':8 'browser':3,44 'browser-sync':43 'browsersync':10,18,42 'compar':30 'connect':2,5,47 'connect-browser-sync':1 'connect/express':38 'direct':36 'express':46 'gulp/grunt':32 'inject':9 'integr':35 'javascript':41 'middlewar':6,39 'option':22 'plugin':33 'recent':28 'releas':25 'respons':14 'script':11 'stack':40 'support':17 'sync':4,45 'tag':12 'turbolink':23 'updat':29 'version':15 'workaround':24","created_at":"2026-04-25T07:37:12.614898+00:00","updated_at":"2026-04-25T07:37:12.614898+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/schmich/connect-browser-sync","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/connect-browser-sync","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking","web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}