作記録

記憶代わり

IntelliJ IDEA + Spring Boot Dev Tools + Thymeleaf でHTMLファイルの自動更新をする

1 - 使用技術のバージョン

技術 バージョン
InteliJ IDEA 2021.3.2
Spring Boot Dev Tools 2.6.4
Spring Boot Starter Thymeleaf 2.6.4

2 - IntelliJ IDEAの設定

2.1 - 自動的にプロジェクトをビルドするようにする

下記の画像の通り Preference > ビルド、実行、デプロイ > コンパイラー から 自動的にプロジェクトをビルドする にチェックを入れる。

f:id:JTNsaku:20220227003024p:plain

2.2 - 自動Makeの開始を可能にする

下記の画像の通り Preference > 詳細設定 から 開発対象のアプリケーションが実行中でも自動 Make の開始を可能にする にチェックを入れる。

f:id:JTNsaku:20220227003656p:plain

参考

https://youtrack.jetbrains.com/issue/IDEA-274903

3 - application.propertiesの設定

spring.thymeleaf.cache=false

4 - Chrome拡張機能 LiveReload をインストール

4.1 - 下記のURLから LiveReload というChrome拡張機能をインストールする。

chrome.google.com

4.2 - 下記の画像の通り LiveReload をピン留めする

f:id:JTNsaku:20220227005925p:plain

5 - 起動

4.1 - 下記の画像の DEBUG ボタンから Spring Boot Application を起動する

f:id:JTNsaku:20220227004829p:plain

4.2 - IntelliJ IDEA からブラウザを起動する

下記の画像の 表示 > ブラウザーで開く > Chrome を押してブラウザを起動する。

f:id:JTNsaku:20220227010331p:plain

以上で、HTMLファイルを修正するとブラウザも更新されるようになる。