19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

HelloKoding
Guides Spring Boot JPA and Hibernate REST with Spring Security with Spring Java Data Structure Algorithm

Golang

Spring Boot Thymeleaf Tutorial with Example

Last modified @ 26 October 2020

# Spring Boot

This tutorial walks you through the steps of creating a Hello World web app example with Spring Boot
and Thymeleaf

Thymeleaf is a server-side Java template engine for both web and standalone environments

What you will build

A Spring Boot web application using Thymeleaf view template for server-side rendering (SSR) HTML
web page

The web page accepts and shows the value of a query string parameter input from the user on the HTML
web page

What you'll need

JDK 8+ or OpenJDK 8+

Maven 3+

Your favorite IDE

Init project structure

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 1/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

You can create and init a new Spring Boot project by using Spring Initializr or your IDE

Following is the final project structure with all the files we would create

├── src
│ └── main
│ ├── java
│ │ └── com
│ │ └── hellokoding
│ │ └── springboot
│ │ └── view
│ │ ├── Application.java
│ │ └── HelloController.java
│ └── resources
│ ├── static
│ │ ├── css
│ │ │ └── main.css
│ │ └── js
│ │ └── main.js
│ ├── templates
│ │ └── hello.html
│ └── application.properties
└── pom.xml

pom.xml is the configuration file used by Maven to manage project dependencies and build process, it
is usually placed in the project root directory

Web controller classes are used for mapping user requests to Thymeleaf template files, would be created
inside src/main/java

Thymeleaf view template files would be created inside src/main/resources/templates

CSS and JavaScript files would be created inside src/main/resources/static

application.properties is a configuration file used by Spring Boot, would be created inside

src/main/resources

Application.java is a launch file for Spring Boot to start the application, would be created inside
src/main/java

Project dependencies
For a Spring Boot Thymeleaf web application, we will need the following dependencies on the pom.xml
file

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 2/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

spring-boot-starter-web provides all the dependencies and auto-configuration we need to

develop a web application in Spring Boot, including the Tomcat embedded servlet container

spring-boot-starter-thymeleaf provides the support for compiling Thymeleaf files

The library versions can be omitted as it will be resolved by the parent pom provided by Spring Boot

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Apart from that, we also use the spring-boot-devtools dependency to auto-trigger an application
restart or live reload in the development environment whenever Java class or static files on class-path
change, respectively. However, to leverage that, you need to configure your IDE to auto-save and auto-
compile when files are modified

In the production environment, when a Spring Boot application is launched from a jar file, the
devtools is auto disabled

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>

Create Controller
Create a Spring Boot controller file to map HTTP requests to Thymeleaf view template files

[HelloController.java]

package com.hellokoding.springboot.view;

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

@Controller

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 3/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example
public class HelloController {
@GetMapping({"/", "/hello"})
public String hello(Model model, @RequestParam(value="name", required=false, defaultValue="Wo
model.addAttribute("name", name);
return "hello";
}
}

The @Controller annotation indicates the annotated class is a web controller

@GetMapping maps HTTP GET request for "/" (home page) and "/hello" to the hello method

@RequestParam binds method parameter name to request query string parameter

Model is a Spring object for sharing data between handler and view template

The view template name is defined by the return statement of the handler and the
spring.thymeleaf.suffix config property which defined in the below
application.properties file. So in this hello handler method, the return view is
hello.html

Create Thymeleaf View Template file

Create a simple Thymeleaf view template file to show a dynamic message to user

[hello.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="'Hello, ' + ${name} + '!'"></title>
<link href="/css/main.css" rel="stylesheet">
</head>
<body>
<h2 class="hello-title" th:text="'Hello, ' + ${name} + '!'"></h2>
<script src="/js/main.js"></script>
</body>
</html>

The dynamic message is ${name} . It is an Java Expression Language enabling Thymeleaf files to access
the data from the model. Its value is filled by the model.addAttribute("name", name); defined
in the above HelloController

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 4/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

Static files
Create 2 simple CSS and JavaScript files inside /src/main/resources/static

The main.css file is linked into Thymeleaf view via <link href="/css/main.css"
rel="stylesheet">

[main.css]

.hello-title{
color: darkgreen;
}

The main.js file is included into Thymeleaf view via <script src="/js/main.js">
</script>

[main.js]

(function(){
console.log("Hello World!");
})();

Application Configurations
Create application.properties file inside src/main/resources to configure Spring MVC
view resolver via the spring.mvc.view properties

[application.properties]

spring.thymeleaf.template-loader-path: classpath:/templates
spring.thymeleaf.suffix: .html
spring.thymeleaf.cache: false

The spring.thymeleaf.template-loader-path property defines the path to Thymeleaf files,

the spring.thymeleaf.suffix property defines the file extension we would like to use

Under the hood, Spring Boot will auto-configure Spring MVC view resolver based on the above settings

Run and Test

Create an Application class and use @SpringBootApplication annotation to launch the application

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 5/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

[Application.java]

package com.hellokoding.springboot.view;

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

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

Run the application by typing the following command on the terminal console at the project root
directory

./mvnw clean spring-boot:run

You would see this text in the console

o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http)

with context path ''

Access to http://localhost:8080 on your web browser, the following response is expected

Hello, World!

Try to modify the Thymeleaf, CSS, and JavaScript files, and refresh the browser, the HTML response
would be updated accordingly thanks to the support from spring-boot-devtools

In a production environment, you may like to package and run the Spring Boot application as a single jar
file

./mvnw clean package

java -jar target/thymeleaf-helloworld-1.0-SNAPSHOT.jar

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 6/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

Conclusion
In this tutorial, we learned to create a Hello World web application in Spring Boot with Thymeleaf. The
source code is available on Github

# Spring Boot

Share to social

Twitter Facebook

Van N.
Van N. is a software engineer, creator of HelloKoding. He loves coding, blogging, and traveling. You may find him
on GitHub and LinkedIn

Comments

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 7/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

17 Comments 
1 Login

G Join the discussion…

LOG IN WITH OR SIGN UP WITH DISQUS ?

Name

 11 Share Best Newest Oldest

YD Yesid Davila. − ⚑
7 years ago

Hello, I do the steps of the example and the project runs smoothly.
but when searching the path in the browser, the html view is not displayed.
instead, this message appears:

"Whitelabel Error Page

This application has no explicit mapping for / error, so you are seeing this as a fallback.
Mon Feb 05 22:41:53 VET 2018
There was an unexpected error (type = Not Found, status = 404).
No message available "

I repeat, the project runs smoothly. but it does not show the view.

4 4 Reply ⥅

Sumit Shrestha > Yesid Davila.

− ⚑
7 years ago

ya how to fix it...?? what is project structure for netbeans??

0 0 Reply ⥅

Lukas Gužauskas − ⚑
5 years ago

Hello, I do the steps of the example and the project runs smoothly.
But the browser doesn't find /css/style.css. I get error page that htttp is not found 404

Can someone explaine me?

0 0 Reply ⥅

Сергей − ⚑
5 years ago

Please help me include header and footer in my jsp page :)

0 0 Reply ⥅

Ruan Nawê − ⚑
5 years ago

Excelent tutorial
0 0 Reply ⥅

F
Ferko − ⚑
5 years ago

Please, Coud somebody tell me, what is the meaning of main.js?

0 0 Reply ⥅

I Ivana Milic − ⚑
5 years ago
https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 8/12
 I
19/12/2024 16:34
5 years ago
Spring Boot Thymeleaf Tutorial with Example

Thank you!
0 0 Reply ⥅

deadxperia − ⚑
5 years ago

It doesn't work. Author please update the repository or just delete this article, it's useless until you fix it.

0 0 Reply ⥅

T test > deadxperia

− ⚑
5 years ago

Of cource you are not capable of fixing it yourself because idiot

0 0 Reply ⥅

S
starrychloe − ⚑
6 years ago

Got the exception

org.thymeleaf.exceptions.TemplateInputException: Error resolving template "index", template might not exist or might
not be accessible by any of the configured Template Resolvers
0 0 Reply ⥅

G
Got Motivation − ⚑
7 years ago

You Save my time. Thank you.

0 0 Reply ⥅

T Trnal − ⚑
7 years ago

AMAZING !!!!! thank you so much :)

0 0 Reply ⥅

Mathenge − ⚑
8 years ago

Thank you very much. This really helped me.

0 0 Reply ⥅

Kevin Yang − ⚑
8 years ago

Hi,Giau Ngo.Can I reprint your articles translated into Chinese?

0 0 Reply ⥅

Van N. Mod > Kevin Yang − ⚑

8 years ago

Sure Kevin, feel free

0 0 Reply ⥅

Avata This comment was deleted. −

WG Wael Gomaa
> Guest − ⚑
8 years ago

you can use org.springframework.boot.web.support.SpringBootServletInitializer instead (Y)

3 0 Reply ⥅

Wiktor Kalinowski − ⚑
7 years ago
https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 9/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

Working fine, good tutorial ;)

0 1 Reply ⥅

Search ...

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 10/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 11/12
19/12/2024 16:34 Spring Boot Thymeleaf Tutorial with Example

HelloKoding - Practical Coding Guides, Tutorials and Examples Series

Guides

Spring Boot

JPA and Hibernate

REST with Spring

Security with Spring

Java

Data Structure

Algorithm

Golang

GitHub

Facebook

Twitter

LinkedIn

© 2023 HelloKoding - Practical Coding Guides, Tutorials and Examples Series

Content on this site is available under the CC-BY-4.0 license

Paramètres concernant la confidentialité et les cookies

Géré par Google. Conforme au TCF de l'IAB. ID de CMP : 300

https://hellokoding.com/spring-boot-hello-world-example-with-thymeleaf/ 12/12