Thymeleaf Example with Spring Boot

Author:
In this tutorial, we will learn how to create a simple Hello World Thymeleaf App with Spring boot.

Spring Boot aims to make it easy to create Spring-powered, production-grade applications, and services with minimum fuss. It takes an opinionated view of the Spring platform so that new and existing users can quickly get to the bits they need.

Thymeleaf is a Java-based library used to create a web application. It provides good support for serving XHTML/HTML5 in web applications.
Learn spring boot at https://www.javaguides.net/p/spring-boot-tutorial.html.

Development Steps

1. Create a Spring Boot Application

There are many ways to create a Spring Boot application. You can refer below articles to create a Spring Boot application.

2. Add Maven Dependencies

<?xml version="1.0" encoding="UTF-8"?>
<project
    xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.0.4</version>
        <relativePath />
        <!-- lookup parent from repository -->
    </parent>
    <groupId>net.javaguides</groupId>
    <artifactId>thymeleaf-springboot-tutorials</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>thymeleaf-springboot-tutorials</name>
    <description>Demo project for Spring Boot Thymeleaf and Hibernate </description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <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>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>
Spring boot uses the below dependency to work with Thymeleaf: 
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3. Spring MVC Controller - HelloWorldController.java

package net.javaguides.springboot;

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

@Controller
public class HelloWorldController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello World!");
        return "helloworld";
    }
}

4. Thymeleaf ViewResolver Configuration

Spring boot will auto-configure view resolver for Thymeleaf whenever it will find the springboot-thymeleaf-starter dependency on the classpath. Spring boot will pick Thymeleaf templates (HTML pages) from resources/templates folder.

5. Thymeleaf Template - helloworld.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Hello World App</title>
</head>
<body>
    <h1 th:text="'Thymeleaf ' + ${message} + ' App'"> </h1>
</body>
</html>

6. Run the app and demo

Let's run this spring boot application from IDE -> Right-click -> Run As -> Java Application: 
package net.javaguides.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootThymeleafHelloWorldExampleApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootThymeleafHelloWorldExampleApplication.class, args);
    }
}

Related Thymeleaf Tutorials and Examples

  1. Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
  2. Thymeleaf Example with Spring Boot
  3. How to Add CSS and JS to Thymeleaf
  4. Add Bootstrap CSS to Thymeleaf
  5. How to handle null values in Thymeleaf?
  6. How to Loop a List by Index in Thymeleaf
  7. Thymeleaf Array Example - Array Index, Array Iteration
  8. Thymeleaf Enums Example
  9. Thymeleaf If Else Condition Example
  10. Thymeleaf Switch Case Example

Comments

Post a Comment

Leave Comment