learnjs で livereload を有効にする

TL;DR

learnjs とは、サーバレスシングルページアプリケーション で題材として使われている、 Prepared Workspace です。

本書では、 LiveReload か LivePage が推奨（？）されているのですが、どちらも（安価な）有償ソフトウェアなのでとりあえず試してみるには少し敷居が高いとも言えます。

ラッパースクリプトである sspa を読んでみると

function livereload_server() {
  cd public
  exec livereloadx -s -p 9292 "$PWD"
}

というのがあり、 livereloadx も本書で触れられていますが、ブラウザ拡張のインストール方法が公式サイトからリンク切れになっており、不明でした（ストアにももうない模様？）。

そこで LiveReload のブラウザ拡張と互換のある livereload を使ってみることにしました。

導入方法

1. （本書で説明されているとおり） learnjs を fork してクローン
2. cd <learnjs をクローンしたディレクトリ>
3. server.js を用意（下の方に掲載）
4. npm init
   • ライセンス以外はデフォルト回答でOK
   • ライセンスは「MIT」を入力
5. npm install --save-dev connect serve-static livereload
6. echo package-lock.json >> .gitignore
7. echo node_modules >> .gitignore
8. git add .gitignore package.json server.js
9. git commit -m 'Added livereload-enabled server'
10. How do I install and use the browser extensions? から必要なブラウザ拡張をインストール
11. npm start
12. http://localhost:9292 にアクセス

server.js

var connect  = require('connect');
var static = require('serve-static');

var server = connect();
   
server.use(static(__dirname + '/public'));
server.listen(9292);

var livereload = require('livereload');
var server = livereload.createServer();
server.watch(__dirname + "/public");