Site.js: now with live reload

I just released version 12.9.6 of Site.js with live reload support for static pages.

There’s also a fix for the update command, so please update to this version so that you can keep updating using the update command when we move to 12.10.x and beyond.

Get Site.js version 12.9.6

Update to it

To update to Site.js version 12.9.6 from Site.js version 12.9.5, you can use the update command:

site update

Install it from scratch

If you’re running an earlier version of Site.js or if you are going to install it for the first time:

Copy and paste the following command into your terminal. Before you pipe any script into your computer, always view the source code (Linux and macOS, Windows) and make sure you understand what it does.

wget -qO- https://sitejs.org/install | bash

curl -s https://sitejs.org/install | bash

iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content

Instructions for other platforms: Linux | macOS | Windows

Live reload

Site.js is the easiest way to develop, test, and deploy a static web site but, until today, it wasn’t necessarily a delightful development experience as you needed to refresh your static pages manually to see the changes you made… like it was 2009 or something!

Well, take your hand off that refresh button because the latest version of Site.js comes with live reload out of the box.

Server-sent events to the rescue

I implemented the live reload functionality using my fork of the excellent instant module, which in turn uses my fork of the also excellent sendevent module, both of which are by Felix Gnass and use server-sent events (SSE; also known as EventSource).

Rescuing server-sent events from a fox

While I initially thought that I’d be done implementing the feature in mere minutes thanks to the instant module, it actually took me two days. And we have Mr. Firefox Browser to thank for that.

Turns out, Firefox has a peculiar quirk¹ with EventSource when you’re testing a page and your host is localhost.² Basically, if you refresh the page from Firefox’s memory cache without doing a force refresh, your EventSource connection disconnects after 30 seconds.

It took me about 20 minutes to integrate the instant module into Site.js and two days to narrow down and fix the issues with Firefox and contribute my fixes upstream. And that, ladies and gentlemen, is the wacky world of development that we all know and love.

It was worth it, though, because now Firefox behaves exactly like Chrom(ium) with EventSource connections over localhost when using the instant module³.

And a fix for the update command

Some days when you’re making things you have these “doh!” moments where you realise you did something really silly.

I had one of those today while attempting to use the Site.js update command to update from version 12.9.5 to this release, which was originally meant to be version 12.10.0.

Long story short, Site.js told me I was running a newer version than the latest released version because I, in all my glory, thought I was doing integer comparison while actually doing string comparison and, lexographically, 10 comes before 9.

Yay, me.

So that’s fixed now too⁴.

Getting started

If you’re wondering what Site.js is, check out the Site.js web site and have a glance at the Site.js documentation.

There’s also a tutorial I released a few weeks ago that takes you through building static and dynamic sites with Site.js as you build a simple chat app using WebSockets.

I hope the new live reload feature makes your life easier and, as always, if you have any thoughts or suggestions – or if you run into any issues – please let me know.