Java / Maven

Server-side HTML with Thymeleaf

Learn how to render an HTML page with Thymeleaf and Micronaut Views

Sergio del Amo
On this guide
In this section

Getting Started

In this guide, we will create a Micronaut application written in Java.

What you will need

To complete this guide, you will need the following:

Solution

We recommend that you follow the instructions in the next sections and create the application step by step. However, you can go right to the completed example.

Writing the Application

Create an application using the Micronaut Command Line Interface or with Micronaut Launch.

mn create-app example.micronaut.micronautguide \
    --features=views-thymeleaf,http-client,graalvm \
    --build=maven \
    --lang=java \
    --test=junit
Note
 If you don’t specify the --build argument, Gradle with the Kotlin DSL is used as the build tool.
If you don’t specify the --lang argument, Java is used as the language.
If you don’t specify the --test argument, JUnit is used for Java and Kotlin, and Spock is used for Groovy.

The previous command creates a Micronaut application with the default package example.micronaut in a directory named micronautguide.

If you use Micronaut Launch, select Micronaut Application as application type and add views-thymeleaf, http-client, and graalvm features.

Note
 If you have an existing Micronaut application and want to add the functionality described here, you can view the dependency and configuration changes from the specified features, and apply those changes to your application.

Diff

Setup IntelliJ IDEA to develop Micronaut Applications.

Views

To use the Thymeleaf Java template engine to render views in a Micronaut application, add the following dependency on your classpath.

pom.xml
<dependency>
    <groupId>io.micronaut.views</groupId>
    <artifactId>micronaut-views-thymeleaf</artifactId>
    <scope>compile</scope>
</dependency>

API Response

For this guide, we will use a publicly available REST API jsonplaceholder.typicode.com as a 3rd party Photo API.

Create a Photo record to map the API response:

java/src/main/java/example/micronaut/Photo.java
package example.micronaut;

import io.micronaut.core.annotation.ReflectiveAccess;
import io.micronaut.serde.annotation.Serdeable;

@Serdeable // 
@ReflectiveAccess // 
public record Photo(Long albumId, String title, String url, String thumbnailUrl) {
}
1 Declare the @Serdeable annotation at the type level in your source code to allow the type to be serialized or deserialized.
2 Declare the @ReflectiveAccess annotation on a specific type, constructor, method, or field to enable reflective access only for the annotated element.

Thymeleaf accesses Photo via reflection. By adding the @ReflectiveAccess annotation, the Micronaut Graal annotation processor generates the necessary reflection metadata to generate a Native Image with GraalVM.

HTTP Client

Add a Micronaut declarative HTTP Client:

java/src/main/java/example/micronaut/PhotosClient.java
package example.micronaut;

import io.micronaut.core.annotation.Blocking;
import io.micronaut.http.annotation.Get;
import io.micronaut.http.annotation.PathVariable;
import io.micronaut.http.client.annotation.Client;

@Client(id = "photos") // 
public interface PhotosClient {

    @Get("/photos/{id}")// 
    @Blocking
    Photo findById(@PathVariable Long id); // 
}
1 Use @Client to use declarative HTTP Clients. You can annotate interfaces or abstract classes. You can use the id member to provide a service identifier or specify the URL directly as the annotation’s value.
2 The @Get annotation maps the findById method to an HTTP GET request on /photos/{id}.
3 You can define path variables with a RFC-6570 URI template in the HTTP Method annotation value. The method argument can optionally be annotated with @PathVariable.

HTTP Client Configuration

We used photos as the HTTP Client identifier.

Configure the micronaut.http.services.photos.url to point the client identifier to jsonplaceholder.typicode.com

src/main/resources/application.properties
micronaut.http.services.photos.url=https://jsonplaceholder.typicode.com

Controller

Create a controller, which invokes the declarative HTTP client:

java/src/main/java/example/micronaut/PhotosController.java
package example.micronaut;

import io.micronaut.http.MediaType;
import io.micronaut.http.annotation.Controller;
import io.micronaut.http.annotation.Get;
import io.micronaut.http.annotation.PathVariable;
import io.micronaut.http.annotation.Produces;
import io.micronaut.scheduling.TaskExecutors;
import io.micronaut.scheduling.annotation.ExecuteOn;
import io.micronaut.views.View;

import java.util.Collections;
import java.util.Map;

@Controller("/photos") // 
public class PhotosController {

    private final PhotosClient photosClient;

    public PhotosController(PhotosClient photosClient) { // 
        this.photosClient = photosClient;
    }

    @Produces(MediaType.TEXT_HTML) // 
    @ExecuteOn(TaskExecutors.BLOCKING) // 
    @View("photos/show.html") // 
    @Get("/{id}") // 
    Map<String, Photo> findById(@PathVariable Long id) { // 
        return Collections.singletonMap("photo", photosClient.findById(id));
    }
}
1 The class is defined as a controller with the @Controller annotation mapped to the path /photos.
2 Use constructor injection to inject a bean of type PhotosClient.
3 Set the response content-type to HTML with the @Produces annotation.
4 It is critical that any blocking I/O operations (such as fetching the data from the database) are offloaded to a separate thread pool that does not block the Event loop.
5 Use View annotation to specify which template to use to render the response.
6 The @Get annotation maps the findById method to an HTTP GET request on /photos/{id}.
7 You can define path variables with a RFC-6570 URI template in the HTTP Method annotation value. The method argument can optionally be annotated with @PathVariable.

Thymeleaf template

Create a Thymeleaf template in src/main/resources/views/photos/show.html:

src/main/resources/views/photos/show.html
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Photo</title>
</head>
<body>
<h1 th:text="${photo.title}"></h1>
<a th:href="${photo.url}"><img th:src="${photo.thumbnailUrl}" th:alt="${photo.title}"/></a>
</body>
</html>

Tests

Write a test that verifies the application renders the HTML page.

java/src/test/java/example/micronaut/PhotosControllerTest.java
package example.micronaut;

import io.micronaut.http.HttpRequest;
import io.micronaut.http.MediaType;
import io.micronaut.http.client.BlockingHttpClient;
import io.micronaut.http.client.HttpClient;
import io.micronaut.http.client.annotation.Client;
import io.micronaut.http.uri.UriBuilder;
import io.micronaut.test.extensions.junit5.annotation.MicronautTest;
import org.junit.jupiter.api.Test;

import java.net.URI;

import static org.junit.jupiter.api.Assertions.assertDoesNotThrow;
import static org.junit.jupiter.api.Assertions.assertNotNull;
import static org.junit.jupiter.api.Assertions.assertTrue;

@MicronautTest // 
class PhotosControllerTest {

    @Test
    void photoTest(@Client("/") HttpClient httpClient) { // 
        BlockingHttpClient client = httpClient.toBlocking();
        URI uri  = UriBuilder.of("/photos").path("1").build();
        HttpRequest<?> request = HttpRequest.GET(uri).accept(MediaType.TEXT_HTML);
        String html = assertDoesNotThrow(() -> client.retrieve(request));
        assertNotNull(html);
        assertTrue(html.contains("<!DOCTYPE html>"));
        String expectedUrl = "https://via.placeholder.com/600/92c952";
        String expectedTitle = "accusamus beatae ad facilis cum similique qui sunt";
        String expectedThumbnailUrl = "https://via.placeholder.com/150/92c952";
        assertTrue(html.contains("<h1>" + expectedTitle + "</h1>"));
        assertTrue(html.contains("<a href=\"" + expectedUrl + "\"><img src=\"" + expectedThumbnailUrl + "\" alt=\"" + expectedTitle + "\"/></a>"));
    }
}
1 Annotate the class with @MicronautTest so the Micronaut framework will initialize the application context and the embedded server. More info.
2 Inject the HttpClient bean and point it to the embedded server.

Testing the Application

To run the tests:

./mvnw test

Native Tests

The Maven plugin for GraalVM Native Image building allows you to run native tests.

This plugin supports running tests on the JUnit Platform as native images. This means that tests will be compiled and executed as native code.

First, add the following profile to pom.xml:

 <profile>
      <id>native</id>
      <build>
        <plugins>
          <plugin>
            <groupId>org.graalvm.buildtools</groupId>
            <artifactId>native-maven-plugin</artifactId>
            <extensions>true</extensions>
            <executions>
              <execution>
                <id>test-native</id>
                <goals>
                  <goal>test</goal>
                </goals>
                <phase>test</phase>
              </execution>
            </executions>
          </plugin>
        </plugins>
      </build>
    </profile>

Then, to execute the native tests, execute:

./mvnw -Pnative test

INFO: A test may be disabled within a GraalVM native image via the @DisabledInNativeImage annotation.

Next Steps

Explore more features with Micronaut Guides.

Read more about Micronaut Views.

Help with the Micronaut Framework

The Micronaut Foundation sponsored the creation of this Guide. A variety of consulting and support services are available.

License

Note
 All guides are released with an Apache License 2.0 for the code and a Creative Commons Attribution 4.0 license for the writing and media (images).