Spring Boot Thymeleaf Hello World Example

Introduction

In this chapter, we will create a simple “Hello World” web application using Spring Boot and Thymeleaf. Thymeleaf is a popular templating engine for Java applications, especially for web applications. It integrates seamlessly with Spring Boot to produce dynamic web pages.

Tools and Technologies Used

Java 21
Spring Boot 3.2
Thymeleaf
IntelliJ IDEA
Maven
Browser

Setting Up the Project

Using Spring Initializr

Open Spring Initializr:
- Navigate to Spring Initializr in your web browser.
Configure Project Metadata:
- Group: com.company
- Artifact: thymeleaf-helloworld
- Name: thymeleaf-helloworld
- Spring Boot Version: 3.2 (select the latest and stable version)
- Description: Spring Boot Thymeleaf Hello World Example
- Package name: com.company.thymeleaf
- Packaging: Jar
- Java Version: 21 (or the latest version available)
Select Dependencies:
- Add the following dependencies:
  - Spring Web
  - Thymeleaf
Generate and Download:
- Click the “Generate” button to download the project as a ZIP file.

Importing the Project into IntelliJ IDEA

Open IntelliJ IDEA:
- Launch IntelliJ IDEA from your installed applications.
Import the Project:
- On the welcome screen, click “Open or Import”.
- Navigate to the directory where you downloaded the Spring Initializr ZIP file.
- Select the ZIP file and click “Open”.
- IntelliJ IDEA will unzip the file and import the project.
Configure Maven (if needed):
- IntelliJ IDEA will automatically detect the Maven build file (pom.xml) and import the project.
- If prompted, confirm any necessary Maven configurations.

Creating the Thymeleaf Template

Create an HTML Template

Create the templates directory:
- In the src/main/resources directory, create a new directory named templates.
Create the HTML file:
- Inside the templates directory, create a new file named hello.html.
- Add the following code to hello.html:

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Hello Thymeleaf</title> </head> <body> <h1 th:text="'Hello, ' + ${name} + '!'">Hello, World!</h1> </body> </html>

Explaining the Thymeleaf Template

DOCTYPE Declaration: Declares the document type as HTML5.
xmlns:th Attribute: Declares the Thymeleaf XML namespace, which allows you to use Thymeleaf attributes.
<h1 th:text="'Hello, ' + ${name} + '!'">Hello, World!</h1>: This line uses Thymeleaf’s th:text attribute to dynamically set the content of the <h1> tag. The ${name} expression is replaced with the value of the name variable from the model.

Creating the Controller

Create a Controller Class

Create a new package:
- In the src/main/java/com/company/thymeleaf directory, create a new package named controller.
Create the Controller Class:
- Inside the controller package, create a new class named HelloController.
- Add the following code to the HelloController class:

package com.company.thymeleaf.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HelloController { @GetMapping("/hello") public String hello(Model model) { model.addAttribute("name", "World"); return "hello"; } }

Explaining the Controller Class

@Controller Annotation: Marks the class as a Spring MVC controller.
@GetMapping("/hello") Annotation: Maps HTTP GET requests to the /hello URL to the hello method.
hello Method: Adds the attribute name with the value “World” to the model and returns the name of the Thymeleaf template (hello).

Running the Application

Run Your Spring Boot Application

Open Application Class:
- Navigate to the main application class (annotated with @SpringBootApplication).
Run the Application:
- In IntelliJ IDEA, right-click the main application class and select “Run ‘ThymeleafHelloworldApplication'”.
- Alternatively, open a terminal, navigate to the project directory, and run mvn spring-boot:run.
Verify the Application:
- Open a web browser and go to http://localhost:8080/hello.
- You should see the message “Hello, World!”.

Conclusion

In this chapter, we have created a simple “Hello World” web application using Spring Boot and Thymeleaf. We set up the project, created a Thymeleaf template, implemented a controller, and ran the application to display a dynamic message. This example provides a foundation for building more complex web applications with Spring Boot and Thymeleaf.