LiveReloading with Thymeleaf

I couldn't get Live Reload with Spring Boot and Thymeleaf to work. The problem seems to be so widespread that even @wimdeblauwe the author of Taming Thymeleaf uses gulp/npm to get Live Reloading working.

I thought why do we need to use Javascript to get our Spring Boot Developer Experience up to par with the big Javascript Frameworks? We have a perfectly fine Build Tool with Gradle!

LiveReload.js

First we need to include a script tag which points to the LiveReload Server:

<script src="http://localhost:35729/livereload.js"></script>

Gradle Sync

The plan is the same as with the npm scripts. Sync the templates into the build output so LiveReload triggers properly. This is done with the Gradle Sync Task:

// build.gradle.kts
tasks.register("sync"){
    inputs.files("./src/main/resources/static","./src/main/resources/templates",)
    doLast {
        sync {
            from("./src/main/resources/static")
            into("build/resources/main/static")
        }
        sync {
            from("./src/main/resources/templates")
            into("build/resources/main/templates")
        }
    }
}

Now start a continuous build with:

.\gradlew -t sync

Each time one of the inputs.files directory changes the sync task is rerun and LiveReload works.

Tailwind CSS

To use TailwindCSS we use the node-gradle plugin and create a npx task:

// build.gradle.kts
plugins {
    ...
    id("com.github.node-gradle.node") version "3.4.0"
}

tasks.register<com.github.gradle.node.npm.task.NpxTask>("tailwind"){
    command.set("tailwindcss")
    args.set(listOf("-i", "./src/main/resources/static/styles.css",  
        "-o" ,"./src/main/resources/static/output.css", "--watch"))
}

We then need to create a package.json:

{
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "tailwindcss": "^3.1.4"
  }
}

Add a tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
}

Add a styles.css in resources/static/:

@tailwind base;
@tailwind components;
@tailwind utilities;

and include output.css in our html:

<link href="/output.css" rel="stylesheet">

Now we can start the tailwind npx task in a new terminal:

.\gradlew tailwind

And it works:

You can see an example at: github.com/tschuehly/thymeleaf-livereload-gradle