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

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

  • 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
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";
    }
}

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

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

[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

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