StealJS 0.10.0 just landed with a new feature that could change the way you develop: live-reload. Live-reload is an extension for Steal that speeds up development by eliminating the need to ever refresh your browser. It does this by intelligently reloading modules that become stale as you change your code. This technique is also known as "hot swapping" of modules. Steal doesn't refresh the page, but only re-imports modules that are marked as dirty. The result is a blazing fast development experience. See live-reload in action:

In this post I'll explain how you can add live-reload to your development workflow.

Setup

Let's start by installing the latest versions of steal and steal-tools. To do so you'll need an npm project:

npm init # Specify main.js as you "main"
npm install steal-tools -g
npm install steal --save-dev

We'll use CanJS to set up a Hello World but you can use any framework with live-reload.

npm install can --save

Next, we're going to create a small application that demonstrates rendering HTML and responding to reload events by re-rendering. We'll create: an html file that loads steal and your application, a main module that renders a template, and a template that says "Hello world". Your folder should look something like:

node_modules/
  steal/
  jquery/
  can/
index.html
main.js
hello.stache

index.html

<div id="app"></div>
<script src="node_modules/steal/steal.js"></script>

main.js

import $ from "jquery";
import helloTemplate from "./hello.stache!";

function render() {
  $("#app").html(helloTemplate({ name: "world" }));
}

render();

hello.stache

<div>Hello Hot module replacement comes to StealJS!</div>

Open index.html in your browser and you should see Hello world!. Cool, now that you've gotten a skeleton app let's wire together live-reload for instant editing.

Configuration

Back in your package.json add a system.configDependencies section and add live-reload.

{
  "system": {
    "configDependencies": [
      "live-reload"
    ]
  }
}

This will import live-reload before your main loads, and set up hot-swapping of modules. In order to utilize live-reload we want to re-render after each reload cycle. A reload cycle is any time Steal tears down stale modules and re-imports fresh versions.

How to do this varies depending on the framework you're using. For this simple example we're just going to replace our #site element's html by rendering our template.

To do this we need to import live-reload in our main and call the render() function after reload cycles. Change your main.js to look like:

main.js v2

import $ from "jquery";
import helloTemplate from "./hello.stache!";
import reload from "live-reload";

function render() {
  $("#app").html(helloTemplate());
}

render();

// Re-render on reloads
reload(render);

Notice that on reloads we are simply calling render(). You can perform more advanced transformations such as only responding when certain modules are reloaded and you can define a function to teardown side-effects when your module changes. All of this is defined in the live-reload docs.

Start using live-reload

Now that our app is configured to be live-reloadable we need to start a local server that will notify the client on module changes. StealTools comes with this. You can start it with:

steal-tools live-reload

Within your project folder. After a second or so you'll see a message that says something like:

Live-reload server listening on port 8012

Now reopen your browser and refresh index.html. You'll see a message in your console that a connection was made.

You're all set! Make any changes to main.js or hello.stache and they should reflect in the browser almost instantly. Each time a message will be logged in your console letting you know which module was reloaded.

I'm personally very excited to start using live-reload day-to-day. I think it's going to speed up the development code/debug cycle tremendously.