How do you integrate Spring Boot with Thymeleaf for template rendering?

Table of Contents

• Introduction
• Steps to Integrate Spring Boot with Thymeleaf
  • Step 1: Add Dependencies
    • For Maven:
    • For Gradle:
  • Step 2: Configure Thymeleaf
    • Example: Configuring Thymeleaf in application.properties
  • Step 3: Create Thymeleaf Templates
    • Example: index.html Template
  • Step 4: Create a Controller to Handle Requests
    • Example: GreetingController.java
  • Step 5: Run the Application
  • Step 6: Using Dynamic Content in Thymeleaf
    • 1. Displaying Conditional Content
    • 2. Iterating Over Collections
    • 3. Formatting Dates
  • Step 7: Handling Static Content
    • Example: Referencing Static Resources
• Conclusion

Introduction

Thymeleaf is a modern server-side Java template engine used for rendering web pages in Spring Boot applications. It is a popular choice for Spring MVC applications due to its ability to process HTML, XML, and other file formats and seamlessly integrate with Spring Boot for rendering dynamic content. By integrating Thymeleaf into your Spring Boot application, you can easily generate dynamic HTML views based on your model data.

In this guide, we will show you how to integrate Spring Boot with Thymeleaf, from setting up the project to rendering dynamic content in your templates.

Steps to Integrate Spring Boot with Thymeleaf

Step 1: Add Dependencies

To integrate Thymeleaf with your Spring Boot application, you first need to add the Thymeleaf dependency to your pom.xml (for Maven) or build.gradle (for Gradle).

For Maven:

For Gradle:

These dependencies include the necessary libraries for Thymeleaf and Spring Boot web support, enabling template rendering functionality.

Step 2: Configure Thymeleaf

Spring Boot automatically configures Thymeleaf, so there is no need for extensive configuration. However, you can customize its settings by modifying application.properties or application.yml in your src/main/resources directory.

Example: Configuring Thymeleaf in application.properties

In this configuration:

• spring.thymeleaf.prefix: Specifies the directory where your Thymeleaf templates are located (default is classpath:/templates/).
• spring.thymeleaf.suffix: The file extension for Thymeleaf templates (default is .html).
• spring.thymeleaf.mode: Defines the mode of the template. You can set it to HTML, XML, or others based on your need.
• spring.thymeleaf.encoding: The character encoding to use when reading template files.
• spring.thymeleaf.cache: If set to false, disables caching, which is useful during development to avoid needing to restart the server for changes.

Step 3: Create Thymeleaf Templates

Thymeleaf templates are placed in the src/main/resources/templates/ directory. These templates contain static and dynamic content, with placeholders for variables that are passed from the controller.

Example: index.html Template

In this example:

• The xmlns:th="http://www.thymeleaf.org" defines the XML namespace for Thymeleaf.
• The <span th:text="${name}">User</span> syntax is used to dynamically render the name variable passed from the controller.

Step 4: Create a Controller to Handle Requests

In your Spring Boot application, you'll create a controller that handles HTTP requests and populates the model with data to be rendered in the template.

Example: GreetingController.java

In this controller:

• The greet method handles the root URL (/), adds a name attribute to the model, and returns the index view name.
• Spring Boot will automatically look for src/main/resources/templates/index.html to render the template.

Step 5: Run the Application

Now that you've configured everything, you can run your Spring Boot application. When you navigate to http://localhost:8080/ in a browser, Spring Boot will process the index.html template, replacing the ${name} placeholder with the value provided in the model (John Doe).

Step 6: Using Dynamic Content in Thymeleaf

Thymeleaf allows you to use various expressions and logic in your templates to make content dynamic. Here are a few examples of what you can do:

1. Displaying Conditional Content

This example conditionally displays a welcome message if the user object is not null and a login prompt otherwise.

2. Iterating Over Collections

This code iterates over the items collection and renders each item in an unordered list.

3. Formatting Dates

This formats the orderDate into the specified yyyy-MM-dd format.

Step 7: Handling Static Content

If your application includes static content (like CSS, JavaScript, or images), place them in the src/main/resources/static/ directory. You can reference these resources in Thymeleaf templates using the @{} syntax.

Example: Referencing Static Resources

Conclusion

Integrating Thymeleaf with Spring Boot allows for the seamless rendering of dynamic HTML content, which is essential for building modern web applications. By configuring Thymeleaf, creating templates, and using a controller to populate the model, you can build rich, dynamic views. With features like conditional rendering, iteration over collections, and easy integration with static resources, Thymeleaf provides a powerful tool for building interactive web applications in Spring Boot.