SpringBootでLiveReloadを拡張機能なしで動作させる - ソフトウェアエンジニアの雑記

Chrome・FirefoxのLiveReloadの拡張機能の開発が止まっており、拡張機能なしでも動作させる方法をメモしておきます。

build.gradle

build.gradleの依存関係は下記になります。Mavenの方は適宜読み替えてください。

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
}

org.springframework.boot:spring-boot-devtoolsの中に、livereload.jsが同梱されていますので、これを使います。

Thymeleafのコード

今回は、Thymeleafのみで完結します。(JSPでもFreeMarkerなどでも可) scriptタグを1つ追加するのみとなります。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--/* 下記の1行を追加するのみ */-->
  <script src="http://localhost:35729/livereload.js"
          th:if="${@environment.getProperty('spring.devtools.livereload.enabled')}">
  </script>
</head>
<body>
    <h1>Live Reload 更新されればできている</h1>
</body>
</html>

動作確認

SpringBootを起動してブラウザを開いてあとに、HTMLを更新してみます。

上記のように、自動で反映されています。

注意

このままだと、本番環境でもコードがでてしまいますので Thymeleaf側で制御を行います。scriptタグ内に、下記の記述をしておきます。

th:if="${@environment.getProperty('spring.devtools.livereload.enabled')}"

これでbootRunで起動しなければscriptタグは出力されません。

まとめ

spring-boot-devtoolsのドキュメントでもあまり詳細には書いてないのですが、LiveReloadは便利なのでぜひ使ってください。