Show Hello World by Thymeleaf in Spring
Tags: java, springboot, intellij, thymeleaf
Published: 2020-05-10 14:45:06

# Introduction
Thymeleaf is a template engine for java web development.
In this article, you'll be able to start up your Spring Boot application and show a message on your browser.

# IDE
You can use either IntelliJ, Eclipse, or STS.

# Source Code

You can refer to the source code below.
It used Maven as a project management tool.
https://github.com/yoshi-koyama/introduction-to-thymeleaf

# Initialize the project.
You can create your project by using your IDE.
You can also generate your project on the following website.
https://start.spring.io/

You can download a zip file.
![Spring Initializr](https://dev-to-uploads.s3.amazonaws.com/i/igcplaafqvxglsf6oghu.png)

# Dependencies

pom.xml (Maven) dependencies look like this.

```xml
<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-starter-test</artifactId>
    <scope>test</scope>
    <exclusions>
      <exclusion>
        <groupId>org.junit.vintage</groupId>
        <artifactId>junit-vintage-engine</artifactId>
      </exclusion>
    </exclusions>
  </dependency>
</dependencies>
```
build.gradle (Gradle) dependencies look like this.

```gradle
dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
  implementation 'org.springframework.boot:spring-boot-starter-web'
  testImplementation('org.springframework.boot:spring-boot-starter-test') {
    exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
	}
}
```

# Create controller

Open the project by your IDE.
And fine the base package ***com.example.demo***.
Under the demo package, please create a ***controller*** package and ***HomeController***.

![controller package](https://dev-to-uploads.s3.amazonaws.com/i/fvzh9bfy7b9av0psp2o7.png)

Edit ***HomeController*** like this.

```java
package com.example.demo.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")
    public String hello(){
        return "hello";
    }
}
```

# Create HTML file

Under ***src/main/resources*** directory, you can find ***templates*** directory.

![templates directory](https://dev-to-uploads.s3.amazonaws.com/i/ck96ioz5bfrl0j3y35mf.png)

Create ***hello.html*** under ***templates*** directory.

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
```

# Run server

Just run the server and navigate to http://localhost:8080/

You can see this on your browser!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uw7qdamd9wpdn0wodl1x.png)

# Set the message on the controller

The ***th:text=”${attributename}”*** tag attribute is used to display the value of model attributes.

Please add ***message()*** method in ***HomeController*** like this.

``` diff
package com.example.demo.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")
    public String hello(){
        return "hello";
    }

    @GetMapping("/message")
    public String message(Model model) {
        model.addAttribute("message", "This is a custom message");
        return "message";
    }
}


```

And you also need to create a new HTML file named ***message.html***.

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Demo Project</title>
</head>
<body>
    <h1 th:text="${message}"></h1>
</body>
</html>
```

And restart the server and navigate to http://localhost:8080/message

You can see the following message on your browser.

![message](https://dev-to-uploads.s3.amazonaws.com/i/qdtrq9gqskzje8e6ybss.png)

# Learn more

Thymeleaf has a lot of features such as ***th:if***, ***th:each***, and ***th:block***.

Please learn more about it referring to these websites.

https://www.thymeleaf.org/
https://www.baeldung.com/thymeleaf-in-spring-mvc
https://spring.io/guides/gs/serving-web-content/