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
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.
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
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 quirk1 with
EventSource when you’re testing a page and your
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.
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
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
So that’s fixed now too4.
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.
- See my merge requests for the
sendevent(#4) modules for further details. [return]
- And I literally mean
host, not even
hostname– the quirk does not manifest, for example, if you’re testing over
localhost:443(I did not test over port 80 because, well, it’s late 2019.) [return]
- For now you can use my fork of
instantbut 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]
- I’ll write up a short post with code snippets when I get a moment so we can all share a laugh. [return]