Aral Balkan

Mastodon icon RSS feed icon

Site.js: now with live reload

Laura demonstrating the new live reload feature last night.

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.

Linux

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

macOS

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

Windows 10

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

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

Me, in my naïve younger days, earlier this week.

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

Theory, meet practice.

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 quirk1 with EventSource when you’re testing a page and your host is localhost.2 Basically, if you refresh the page from Firefox’s memory cache without doing a force refresh, your EventSource connection disconnects after 30 seconds.

Ooh, we’re half way there…

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 module3.

Development would be harder if you couldn’t bitch on Mastodon.

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 too4.

Getting started

Screenshot of the Site.js basic chat example running on a Raspberry Pi 4B.

I followed a tutorial and all I got was this lousy chat app…

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.

Like this? Fund us!

Small Technology Foundation is a tiny, independent not-for-profit.

We exist in part thanks to patronage by people like you. If you share our vision and want to support our work, please become a patron or donate to us today and help us continue to exist.


  1. See my merge requests for the instant (#17) and sendevent (#4) modules for further details. [return]
  2. And I literally mean host, not even hostname – the quirk does not manifest, for example, if you’re testing over localhost:999, only localhost:443 (I did not test over port 80 because, well, it’s late 2019.) [return]
  3. For now you can use my fork of instant but keep an eye on my pull request in Felix’s original repository and switch to using the original module once my changes have been merged. [return]
  4. I’ll write up a short post with code snippets when I get a moment so we can all share a laugh. [return]