iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🐥

Trying out Java + Spring Boot + Thymeleaf with docker-compose

に公開
Java
Spring Boot
tech

I said next time I would try connecting to a database? That was a lie.
No, I just thought I should touch on the template engine first... 💦

TL;DR

What is Thymeleaf?

Thymeleaf is a template engine recommended for use with Spring Boot.
It's like ERB in Ruby on Rails or Razor Pages in ASP.NET Core.

If you are going to use Spring Boot not just as a Web API server but also to create views using a template engine, you will likely use it.

Prepare docker-compose.yml

cd your_project
mkdir server
touch docker-compose.yml

docker-compose.yml

docker-compose.yml
version: '3.6'
services:
  app:
    image: openjdk:15
    ports:
      - 8080:8080
    tty: true
    volumes:
      - ./server:/srv:cached
    working_dir: /srv

Create a Gradle Project

This time, I will also create it using a site called Spring Initializr.

The difference from the previous article is the part outlined in red.
If you are continuing from the previous article, you can just add
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
to server/build.gradle.

server/build.gradle
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
...

After finishing the input, click GENERATE and download the file.
Once downloaded, place the extracted content under your_project/server.

After placing it, server/src/main/java/com/example/api/ApiApplication.java is fine as is for now.

Let's briefly try the template engine Thymeleaf for now

Create a file named server/src/main/resources/templates/index.html and edit it as follows:

touch server/src/main/resources/templates/index.html
server/src/main/resources/templates/index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>SpringBoot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1 th:text="'Is this Thymeleaf?'">html-heading 1</h1>
    <p>Yes, it is recommended by SpringBoot.</p>
</body>
</html>

Start the Docker Container, Build with Gradle, and Start the Application

docker-compose up -d
docker-compose exec app bash
bash-4.4# pwd
/srv
bash-4.4# sh gradlew build
...
BUILD SUCCESSFUL in 6m 37s
6 actionable tasks: 6 executed
bash-4.4# java -jar build/libs/api-0.0.1-SNAPSHOT.jar

Once it's running, access http://localhost:8080/ to check it.

It was displayed even though no routing was configured.
It seems Thymeleaf handles this kind of routing automatically.
(As a test, I prepared index.html without Thymeleaf, and it resulted in a routing error.)

Now, let's stop the application once with Ctrl+c.

Trying to Display a View via a Controller

mkdir server/src/main/java/com/example/api/controllers
touch server/src/main/java/com/example/api/controllers/IndexController.java
server/src/main/java/com/example/api/controllers/IndexController.java
package com.example.api.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

    @RequestMapping({ "/", "/index" })
    public ModelAndView get(ModelAndView mav) {
        mav.addObject("target", "Thymeleaf");
        mav.setViewName("index");
        return mav;
    }
}

Let's also edit the server/src/main/resources/templates/index.html file slightly.

server/src/main/resources/templates/index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>SpringBoot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1 th:text="'Is this Thymeleaf?'">html-heading 1</h1>
    <p>Yes, it is recommended by SpringBoot.</p>
    <!-- Add the following line -->
    <div th:text="'Hello, ' + ${target} + '!!'"></div>
</body>
</html>

After compiling, let's display it again.

bash-4.4# sh gradlew build
bash-4.4# java -jar build/libs/api-0.0.1-SNAPSHOT.jar

This time, the value set in the ModelAndView on the Controller side is displayed!
Great job.

References

Here is the repository for this project:
https://github.com/JUNKI555/java_spring_boot_practice01

Discussion