Practical coding guides

Spring Boot Thymeleaf Tutorial with Example

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

What you’ll build

Spring Boot Hello World

What you’ll need

  • Your favorite IDE
  • JDK 8+ or OpenJDK 8+
  • Maven 3+

The tech stack

  • Spring Boot is a popular Java based framework used to build production-grade web applications and services
  • Thymeleaf is a Java based server-side template engine

Init project structure

You can create and init a new Spring Boot project by using Spring CLI or Spring Initializr. Learn more about using these tools at here

The final project structure as below

├── 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

Project dependencies

Add spring-boot-starter-web and spring-boot-starter-thymeleaf into your project as a dependency on pom.xml or build.gradle file. The library versions can be omitted as it is resolved by the parent pom provided by Spring Boot



You can find the full pom.xml file as below


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">







Define Controller


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;

public class HelloController {
    @GetMapping({"/", "/hello"})
    public String hello(Model model, @RequestParam(value="name", required=false, defaultValue="World") String name) {
        model.addAttribute("name", name);
        return "hello";

@Controller 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 (value="name",...)

Model is an object 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

View Template


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

Static files


    color: darkgreen;


    console.log("Hello World!");

Application Configurations


package com.hellokoding.springboot.view;

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

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


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

Run and Test

You can run the application by typing the following command on terminal console at the project root directory

$ mvn 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!

Source code


Follow HelloKoding