Getting Started With Thymeleaf In Spring Boot
Tutorial on how to run an HTML template using Thymeleaf starting from Spring Boot Application setup.
Join the DZone community and get the full member experience.
Join For FreeThymeleaf is a Java Template Engine which enables creation of web applications. It enables interaction between Java Classes and HTML/XML templates.
Thymeleaf Provides below Template Modes:
HTMLXMLTEXTJAVASCRIPTCSSRAW
In this article we are going to get familiar with Thymeleaf and the set up starting from basic configurations.
If you already have a Spring Boot application ready, Skip to Step 2.
Step 1:
Create a Spring Boot Project. Using STS or Spring Initializr. While creating Spring Boot Project add dependency for Thymeleaf and Spring Web.
For Gradle:
xxxxxxxxxx
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
For Maven:
xxxxxxxxxx
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
If you have used the Spring Initializr, unzip and Import Project in IDE.
For Gradle: Import -> Gradle -> Existing Gradle Project
For Maven: Import -> Maven -> Existing Maven Projects
Once Project is Set up we can get started with Implementing Thymeleaf.
Step 2:
Create a Controller Class in package. Either add a new package or use the default package containing main application class.
DemoController.java :
xxxxxxxxxx
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
public class DemoController {
(value = "/thymeleafTemplate")
public String getTemplate((name="name", required=false, defaultValue="World") String name, Model model) {
model.addAttribute("name", name);
return "thymeleafTemplate";
}
}
In the above class, we have created a Controller, and notified Spring Boot using @Controller.
It is not recommended to use @RestController in this scenario as it contains @ResponseBody which binds method return value to response body. Hence its responses are interpreted differently than @Controller.
Create a Get method using @GetMapping and name the value as 'thymeleafTemplate', which is also going to be the name of the HTML template. The method getTemplate accepts the name and model. Name will be passed to the template using the model. If no name is passed by the user, we are setting the default value 'World'.
Step 3:
Add a HTML template.
thymeleafTemplate.html
Add template in the resources folder. src/main/resources/templates/thymeleafTemplate.html
xxxxxxxxxx
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Thymeleaf Spring Boot Demo </title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<h4>Welcome to Thymeleaf Demo In Spring Boot</h4>
</body>
</html>
We are mapping the value received in GET request, in the template using ${name}.
Step 4:
Build code.
Run the application using IDE: Run as -> Spring Boot App
Or to run the code externally:
Create Jar files in the target directory using the below commands:
For Maven:
xxxxxxxxxx
mvn clean install
For Gradle:
xxxxxxxxxx
gradle clean build
Once Code compiles and Jar file is created, start the application:
xxxxxxxxxx
java –jar <JARFILE>
Server will run on default port 8080:
Once your application has started, hit the URL from the browser:
Now you can start building on this code and create your own web application.
To create an index.html include it in the static folder - src/main/resources/static. It will be the default html to run if we hit the brower with out specifying path: http://localhost:8080
Project Directory:
To get started you can get the above project directly from ThymeLeaf Demo Project
Clone Directly:
xxxxxxxxxx
https://github.com/bhagyashreenigade/thymeLeafDemo.git
IDE used for Development: STS 4
Opinions expressed by DZone contributors are their own.
Comments