Nibbling Perfect Macaroni
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


1.7.22 • Public • Published

Dead-simple live injection of Brunch-built CSS/JS files in the browser

Build Status Dependency status Dev Dependency status Code Climate Test Coverage


Brunch? fb-flo? What?

  • Brunch is a kickass front-end app assets builder; basically it's what most people trod through the swamps of Grunt, Gulp or what-have-you for, only much, much better and far, far, simpler to use.
  • fb-flo is a great little system by Facebook to let you live update CSS or JS files inside an open browser page (instead of just reloading the whole thing). As it depends on JS runtime's hotswap capabilities, it's not available everywhere yet; but for Chrome, it kinda rules.

The only thing is, you need to write your own fb-flo server, which is a tiny Node.js program; most of the time, that just means copy-pasting the (small) example code from their homepage, and then running it. But for Brunch users, the ideal way would be through a plugin that auto-starts and auto-stops the server, and figures out automatically what to watch (the final results of the build pipeline).

So we made fb-flo-brunch: your lovely Brunch plugin to have automatic fb-flo capability over your watched build!


Get in your Brunch-using project's root directory, and just install the plugin:

$ npm install --save-dev fb-flo-brunch


As most Brunch plugins do, this one Just Works™ out of the box. But we're just as nerdy as the next developer when it comes to customization… and fb-flo itself offers quite a few options. So you can tweak the plugin's behavior to your heart's content inside Brunch's config.plugins.fbFlo main key.

In the table below, the “fb-flo?” column states whether this is just an fb-flo option, directly forward to the server or resolver. For full details on their default values and behavior, check out the fb-flo doc.

Option fb-flo? Description Default
enabled Whether the plugin is enabled or not true
host server What network interface to listen to see fb-flo
message The message to log on the client-side (browser) when a resource just got updated live. The %s code will be replaced by the resource's name. The presence of this automatically defines fb-flo’s update resolver option. “%s has just been updated with new content”
messageColor A CSS color name for displaying the message black
messageLevel What console level to display message on log
messageResourceColor A CSS color name for the resource name in message
pollingInterval server see fb-flo see fb-flo
port server What port to listen to 8888
resolverMatch resolver (match) see fb-flo see fb-flo
resolverReload resolver (reload) Extends fb-flo's boolean-only values with anymatch sets, allowing for tremendous flexibility false
useFilePolling server see fb-flo see fb-flo
useWatchman server see fb-flo see fb-flo
verbose server Whether to output everything on the wire… false
watchDotFiles server see fb-flo see fb-flo


We welcome all contributions, most importantly bug fixes, augmented test coverage and extended docs.

See for details and guidelines on how to help.


This work is MIT-licensed and © 2015 Christophe Porteneuve.

Check LICENSE for full details.




npm i fb-flo-brunch

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability