How do you implement Thymeleaf templates in Spring Boot?

Table of Contents

Introduction

Thymeleaf is a powerful, flexible, and modern templating engine for Java applications, often used for rendering dynamic HTML content in Spring Boot applications. It integrates seamlessly with Spring Boot and allows you to generate rich, dynamic views directly from your Spring controllers. Thymeleaf is especially popular because it can run in both web and non-web environments, making it ideal for various use cases such as server-side rendering of HTML templates.

This guide will walk you through the process of integrating Thymeleaf templates into a Spring Boot application, configuring it correctly, and rendering data dynamically from controllers.

Step 1: Add Thymeleaf Dependency to Your Spring Boot Project

To use Thymeleaf in a Spring Boot application, you first need to add the Thymeleaf dependency to your pom.xml file if you're using Maven.

Maven Configuration (pom.xml):

In Spring Boot, the spring-boot-starter-web already includes spring-boot-starter-thymeleaf, so you don’t need to explicitly add the Thymeleaf dependency unless you're doing advanced configuration.

If you’re using Gradle, you can add the following dependency in your build.gradle:

Gradle Configuration (build.gradle):

Step 2: Configure Thymeleaf Settings (Optional)

In most cases, Spring Boot will automatically configure Thymeleaf for you with sensible defaults. However, you can customize the configuration in the application.properties or application.yml file.

Example Configuration in application.properties:

These properties allow you to control where Thymeleaf looks for templates (prefix), what file extension it expects (suffix), whether or not caching is enabled, and other properties such as encoding and template mode.

Step 3: Create Thymeleaf Templates

Thymeleaf templates are usually stored in the src/main/resources/templates directory of your Spring Boot project. The templates typically have the .html extension, but you can configure the suffix property to match your desired format.

Example: home.html (Thymeleaf Template)

Create a simple Thymeleaf template in the src/main/resources/templates directory. For example, create a home.html file with some dynamic content.

In this template, ${username} is a variable that will be populated with dynamic data from the Spring controller.

Step 4: Create a Spring Controller to Render the View

In Spring Boot, controllers are used to handle HTTP requests and return views (Thymeleaf templates in this case). You need to create a controller class that maps a request to a Thymeleaf view.

Example Controller: HomeController.java

Explanation:

  • The @Controller annotation marks this class as a Spring MVC controller.
  • The @GetMapping("/home") annotation maps the /home URL to the homePage method.
  • The model.addAttribute("username", "John Doe"); line adds the username attribute to the model, which will be injected into the Thymeleaf template (home.html).
  • The string "home" returned from the homePage method corresponds to the home.html Thymeleaf template (the .html suffix is automatically appended by Spring Boot).

Step 5: Run the Application

To run the application, use the following command if you are using Maven:

If you are using Gradle:

Once the application is running, you can access the Thymeleaf view by navigating to http://localhost:8080/home in your browser. You should see the rendered HTML page with the dynamic data ("John Doe").

Example: Passing Multiple Variables to Thymeleaf Template

You can pass multiple variables from your controller to the Thymeleaf template. For example, add more attributes to the model in the homePage method:

Updated Controller with Multiple Variables

Updated home.html Template

In this example:

  • The username and greeting attributes are added to the model in the controller.
  • These attributes are then accessed and displayed in the home.html template using Thymeleaf syntax (th:text).

Step 6: Using Thymeleaf Layouts (Optional)

If you want to use common layouts (e.g., header, footer) across multiple pages, you can use Thymeleaf's fragment inclusion feature. Here's an example:

layout.html (Base Layout Template)

home.html (Template Using Layout)

This technique allows you to maintain a consistent layout structure across multiple templates while minimizing code duplication.

Conclusion

Integrating Thymeleaf templates in a Spring Boot application is straightforward. By adding the Thymeleaf dependency, configuring settings, creating templates, and mapping controllers, you can dynamically generate and render HTML content. Thymeleaf offers powerful features such as layout inheritance, conditional rendering, and looping, making it an excellent choice for dynamic web applications.

Share
Similar Questions