Entwicklung einer Spring Boot-Anwendung mit Thymeleaf und Tailwind CSS

Alexander Kusmin — Fri, 15 Dec 2023 09:47:55 +0000

Entwicklung einer Spring Boot-Anwendung mit Thymeleaf und Tailwind CSS

Moderne Webentwicklung erfordert nicht nur eine robuste Backend-Infrastruktur, sondern auch leistungsstarke Werkzeuge für die Gestaltung ansprechender Benutzeroberflächen. Dieser Beitrag enthält eine Schritt-für-Schritt-Anleitung zur Entwicklung einer Web-Anwendung mit Spring Boot mit Thymeleaf und Tailwind CSS via Gradle-Node-Plugin. Diese Kombination ermöglicht die Implementierung dynamischer Inhalte sowie die Erstellung responsiver und modernen Benutzeroberflächen.

Setup von Spring Boot

Es wird eine Spring Boot Anwendung mit folgender Konfiguration benötigt:

Spring Boot Version 3.2.0
Kotlin als Programmiersprache für Spring
Kotlin (Groovy) für das Build-Tool
Abhängigkeit Spring Web v3.2.0

Diese Konfiguration kann hier über den Spring Initializr direkt heruntergeladen werden. Mit dem Befehl ./gradlew bootRun wird die Anwendung gestartet und anschließend unter der Adresse http://localhost:8080 erreichbar.

Integration von Thymeleaf

Thymeleaf ist eine leistungsfähige Template-Engine für die Webentwicklung und ermöglicht die Integration dynamischer Inhalte in Seiten. In der Datei build.gradle wird die Thymeleaf-Abhängigkeit eingebunden:

./build.gradle

...
dependencies {
    ...

    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf:3.2.0'
}
...

Thymeleaf-Templates

Zu Beginn wird im Ressourcenverzeichnis ein neues Thymeleaf-Template src/main/resources/templates/index.html erstellt. Dieses Template zeigt einen Text als Überschrift an, der mithilfe von Thymeleaf aus den Ressourcen geladen wird. Dazu legen wir im Ressourcenverzeichnis eine Datei src/main/resources/messages.properties an, in der die Texte definiert werden. An sich mag dies für unser Beispiel etwas umständlich sein, jedoch ermöglicht dieser Ansatz später eine einfachere Übersetzung der Anwendung, indem der Inhalt der messages.properties pro Sprache vorliegt.

index.html

messages.properties

index.html




    
    Index


ignored

messages.properties

myIndexText=This is index!

Mit th: werden Thymeleaf-Anweisungen eingeleitet. In diesem Fall wird Thymeleaf angewiesen, den Text-Inhalt für das Element zu definieren. Mit #{...} werden Ressourcen über einen eindeutigen Schlüssel angefordert, hier der Text This is index mit dem Schlüssel myIndexText aus der zuvor definierten messages.properties. Auf der offiziellen Seite von Thymeleaf sind alle Funktionen ausführlich und mit vielen Beispielen dokumentiert.

Spring Boot Controller

Damit die Spring Boot Anwendung auch die Seite anzeigt, muss ein Controller erstellt werden, welcher das Template für den Endpunkt rendert.

./src/main/.../DemoController.kt

package com.example.demo

import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestMapping

@Controller
@RequestMapping
class DemoController {
    @GetMapping("/")
    fun myIndexEndpoint(model: Model): String {
        return "index"
    }
}

Erweiterung des Beispiels mit weiteren Thymeleaf Funktionen

Die Seite unter http://localhost:8080 wird nun wie folgt erweitert:

Dem Template wird eine Liste von Strings übergeben. Diese Strings stellen weitere Endpunkte namens /foo, /bar und /baz dar.
Der bisherige Controller wird für die weiteren Endpunkte entsprechend erweitert.
Die Endpunkte zeigen wie zuvor die Index-Seite nur einen Text an. Es werden dafür Templates erstellt.
Das aktuelle Index-Template verweist auf diese Endpunkte mit einer Navigation.

DemoController.kt

messages.properties

index.html

foo.html

bar.html

baz.html

DemoController.kt

...
@Controller
@RequestMapping
class DemoController {
    @GetMapping("/")
    fun myIndexEndpoint(model: Model): String {
        model.addAttribute("myEndpoints", listOf("foo", "bar", "baz"))
        return "index"
    }

    @GetMapping("/foo")
    fun fooEndpoint(): String = "foo"

    @GetMapping("/bar")
    fun barEndpoint(): String = "bar"

    @GetMapping("/baz")
    fun bazEndpoint(): String = "baz"
}

messages.properties

myIndexText=This is index!
myNavigateText=Navigate to {0}
myFooText=This is foo!
myBarText=This is bar!
myBazText=This is baz!

index.html

...

...

    ignored


...

foo.html




    
    Foo


ignored

bar.html




    
    Bar


ignored

baz.html




    
    Baz


ignored

Unsere Anwendung sieht nun folgendermaßen aus:

Styling mittels Tailwind CSS

Die Integration von Tailwind CSS in die Spring Boot Anwendung bietet eine flexible und leistungsstarke Styling-Option für das Frontend. Dieses Kapitel beschreibt die Integration und Verwendung von Tailwind CSS.

Verwendung des Gradle Plugin für Node und Konfiguration von Tailwind CSS

Für die Integration von Tailwind CSS in die Spring Boot Anwendung wird das Gradle Node Plugin verwendet. Dies ermöglicht eine Verwaltung der Node.js-Abhängigkeiten wie z.B. Tailwind CSS direkt aus Gradle heraus. Um das Plugin in das Projekt einzubinden, muss die Gradle-Konfiguration folgendermaßen angepasst werden:

Wir fügen das Plugin gradle-node-plugin hinzu.
Es wird ein neuer Gradle-Task registriert, die den Tailwind CSS zur Generierung der output.css ausführt.
Die Gradle-Task npmInstall wird so angepasst, dass npm die benötigten Pakete selbständig installiert.
Die Gradle-Task für die Kompilierung mit Kotlin wird so angepasst, dass Tailwind CSS immer vor der Kompilierung ausgeführt wird.

Zusätzlich müssen die beiden Dateien tailwind.config.js und package.json entsprechend angelegt werden.

build.gradle

tailwind.config.js

package.json

build.gradle

...
plugins {
    ...
    // Gradle plugin for Node
    id 'com.github.node-gradle.node' version '7.0.1'
}
...
// Necessary for node-gradle plugin
node {
    download = true
}

// This task will run `tailwindcss` command and generate the output.css file from styles.css
tasks.register('tailwind', NpxTask) {
    command = 'tailwindcss'
    args = ['-i', './src/main/resources/static/styles.css', '-o', './src/main/resources/static/output.css']

    // This task depends on npmInstall task
    dependsOn(tasks.npmInstall)
}

// Make npmInstall task depend on npmSetup task and adds package.json as input
tasks.npmInstall {
    inputs.file('package.json')
    dependsOn(tasks.npmSetup)
}

tasks.withType(KotlinCompile).configureEach {
    ...
    // Update the output.css file every time after compiling Kotlin code
    dependsOn(tasks.tailwind)
}
...

tailwind.config.js

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

package.json

{
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.7",
    "tailwindcss": "^3.3.6"
  }
}

Der Gradle-Befehl ./gradlew tailwind ist nun ausführbar und sollte bei korrekter Konfiguration folgende Ausgabe erzeugen:

Verwendung von Tailwind CSS

Unser Beispiel wird nun mit Hilfe von Tailwind CSS erweitert. Dazu können die Tailwind CSS Klassen direkt im Template verwendet oder in der styles.css unter src/main/resources/static gesammelt werden. Die dort enthaltenen Klassen werden dann von Tailwind CSS in output.css gebündelt. Für dieses Beispiel wird auch die einfache Unterstützung von Responsive Design durch Tailwind CSS genutzt. So soll die Index-Seite auf einem kleineren Bildschirm die Menüpunkte zeilenweise auflisten, ansonsten spaltenweise. Wichtig ist, dass die output.css in den Thymeleaf-Templates korrekt verlinkt wird.

styles.css

index.html

styles.css

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

body {
    @apply bg-gray-200 w-full p-4 flex flex-col gap-4 items-center justify-center;
}

.headline {
    @apply text-4xl font-extrabold leading-none tracking-tight;
}

.headline-white {
    @apply text-white;
}

.btn {
    @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
    @apply bg-blue-500 text-white;
}
.btn-blue:hover {
    @apply bg-blue-700;
}

index.html




    
    Index
    


ignored

    ignored

foo.html




    
    Foo
    


ignored

bar.html




    
    Bar
    


ignored

baz.html




    
    Baz
    


ignored

Schlusswort

Es ist wichtig anzumerken, dass dieser Ansatz, wie jeder andere auch, Vor- und Nachteile hat. Thymeleaf ermöglicht eine nahtlose Integration von Backend- und Frontend-Logik, könnte aber bei komplexeren Frontend-Anforderungen an seine Grenzen stoßen. Tailwind CSS bietet eine unübertroffene Flexibilität beim Styling, aber die umfangreichen Klassen können zu überladenem HTML-Code führen.

Für weitere Details steht das GitHub Repository zur Verfügung, das alle im Artikel beschriebenen Schritte und Konfigurationen enthält.

Der Beitrag Entwicklung einer Spring Boot-Anwendung mit Thymeleaf und Tailwind CSS erschien zuerst auf INOTEQ GmbH.

Thymeleaf Archive | INOTEQ GmbH

Entwicklung einer Spring Boot-Anwendung mit Thymeleaf und Tailwind CSS

Entwicklung einer Spring Boot-Anwendung mit Thymeleaf und Tailwind CSS

Inhaltsverzeichnis

Setup von Spring Boot

Integration von Thymeleaf

Thymeleaf-Templates

ignored

Spring Boot Controller

Erweiterung des Beispiels mit weiteren Thymeleaf Funktionen

ignored

ignored

ignored

Styling mittels Tailwind CSS

Verwendung des Gradle Plugin für Node und Konfiguration von Tailwind CSS

Verwendung von Tailwind CSS

ignored

ignored

ignored

ignored

Schlusswort