HMR and CSS injection workflow

about.md

budo + LiveReactLoad integration

• stubs out index.html
• runs watchify
• serves on port 9966
• notifies LiveReactLoad on bundle update
• reloads HTML with LiveReload
• injects CSS with LiveReload
• pretty-prints requests to console

Setup:

npm install budo babelify livereactload garnish --save-dev

package.json

"scripts": {
  "start": "node dev | garnish"
}

Run:

npm start

Then open localhost:9966.

dev.js

#!/usr/bin/env node
var lrload = require('livereactload')

var app = require('budo')('index.js:bundle.js', {
  stream: process.stdout,
  transform: ['babelify', 'livereactload'],
})
  .watch() //watch for *.html, *.css
  .live()  //start LiveReload server for CSS/HTML
  .on('connect', function() {
    lrload.listen() //listen for HMR
  })
  .on('update', function() {
    lrload.notify()  //trigger HMR  
  })
  .on('watch', function(ev, file) {
    app.reload(file) //trigger CSS injection / HTML reload
  })