browser-sync

Start a server from a specific directory

$ browser-sync start --server [path/to/directory] --files [path/to/directory]

$ browser-sync start --server --files '[path/to/directory/*.css]'

$ browser-sync init

$ browser-sync start --config [config_file]

browser-sync command [options]

Common commands:
start [options]         Start BrowserSync in your project.
init                    Create a boilerplate config file.
reload [options]       Reload all connected browsers.
--version              Output version info.
--help                 Display help information.

--server, -s
    Start a static file server. Can accept a path or a boolean (current directory).

--files, -f paths
    Specify files to watch for changes. Accepts glob patterns (e.g., '**/*.html, **/*.css').

--proxy, -p url
    Proxy an existing backend server (e.g., 'localhost:3000'). BrowserSync will inject its script into proxied pages.

--port number
    Specify the port BrowserSync will run on (default: 3000).

--no-ui
    Disable the BrowserSync UI (accessible on a separate port).

--no-open
    Prevent BrowserSync from automatically opening a browser window on startup.

--browser name
    Specify which browser(s) to open (e.g., 'chrome', 'firefox', or a comma-separated list).

--index file
    Specify a custom index file to serve when using --server (default: 'index.html').

--single
    Serve a Single Page Application (SPA). All requests will fallback to the 'index.html' file.

--notify
    Enable/disable the in-browser notifications (e.g., 'Connected to BrowserSync').

browser-sync is an indispensable open-source tool for modern web development, dramatically improving workflow efficiency. It serves your static files, proxies an existing server, or integrates with task runners like Gulp or Grunt. Its core features include live reloading (injecting CSS/JS changes without full page refreshes) and synchronized browsing across multiple devices and browsers. This synchronization extends to scrolls, clicks, form inputs, and navigation, ensuring a consistent testing environment. It also provides a minimalist user interface (UI) to manage connections, test network sync speed, and inspect elements. By automating repetitive tasks, browser-sync allows developers to focus on writing code and instantly seeing its effects, making responsive design and cross-browser testing much faster and more reliable.

browser-sync requires Node.js and npm to be installed. When watching a large number of files on Linux, you might encounter limits on the number of file descriptors (inotify watches); increasing this limit via 'sysctl -w fs.inotify.max_user_watches=524288' might be necessary. Complex server-side rendering or specific websocket implementations may require careful proxy configuration to ensure correct injection.

browser-sync is typically installed globally via npm (Node Package Manager):
npm install -g browser-sync
This allows you to run the command directly from your terminal.

Upon starting, browser-sync typically opens two browser tabs: your project and the BrowserSync UI. The UI, usually on a different port (e.g., 3001), provides an interface to control connected devices, view logs, test network sync speed, and manage options during development.

For more complex setups or to store common settings, you can create a configuration file named bs-config.js (or a custom name) in your project root. This file can be generated with browser-sync init and allows programmatic configuration of all BrowserSync options.

Developed by Shane Osbourne, browser-sync quickly rose to prominence within the front-end development community as a superior alternative for live-reloading and synchronized testing. It filled a critical gap by providing a robust, cross-device solution that integrated seamlessly with existing build processes and static sites, becoming a de-facto standard for rapid web development and testing.

nodemon(1), webpack-dev-server(1), live-server(1), gulp(1), grunt(1)