live-server with hot module reload
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package.json
ws-inject.html

README.md

hot-server

No config hot reloading for sketching bl.ocks quickly.

Instructions

Install:

> npm install -g hot-server

Serve directory statically:

> hot-server

Save changes to *.js or *.css and they'll be injected via a websocket without a full refresh.

Since your whole script file reruns, you'll probably want to clean up anything it adds to the page with something like var svg = d3.select('#graph').html('').append('svg'). Stopping any timers and clearing any listeners that don't reset is also a good idea:

if (window.timer) timer.stop()
window.timer = d3.timer(function(t){
  // cool animation code
})

To persist data between refreshes, declare and initialize your data in a separate file from the rest of your code. Only the changed file will rerun.

Default port is 3000; > hot-server --port=4444 sets the port.

Is this the right tool for me?

If you're building an actual webapp, probably not! This is a very naive approach to hot reloading that will not work with more complicated code. Webpack might be a better option:

Or a even a different language:

But! If you're mostly working on short, simple pieces and dislike yak shaving config files this might be a good fit. It is as simple to use as python -m SimpleHTTPServer with the added benefit of seemly magically updating pages without a refresh.

The code is also relatively simple - just 60 lines of code for the server and 25 for the client - and you might be able to re-purpose it. I incorporated a modified version into a somewhat slow make/requirejs/grunt build system at work and reduced the time it took to see the result of changing my code from ~6 seconds to 0.