DEV Community

Thomas Schühly
Thomas Schühly

Posted on

Fixing the Spring Boot LiveReload Server with Gradle for Thymeleaf and TailwindCSS

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>
Enter fullscreen mode Exit fullscreen mode

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")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Now start a continuous build with:

.\gradlew -t sync
Enter fullscreen mode Exit fullscreen mode

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"))
}
Enter fullscreen mode Exit fullscreen mode

We then need to create a package.json:

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

Enter fullscreen mode Exit fullscreen mode

Add a tailwind.config.js:

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

Enter fullscreen mode Exit fullscreen mode

Add a styles.css in resources/static/:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

and include output.css in our html:

<link href="/output.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

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

.\gradlew tailwind
Enter fullscreen mode Exit fullscreen mode

And it works:

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

Discussion (0)