Java / Gradle

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:

Some time on your hands
A decent text editor or IDE (e.g. IntelliJ IDEA)
JDK 21 or greater installed with JAVA_HOME configured appropriately

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.

Download and unzip the source

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=gradle \
    --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.

build.gradle

implementation("io.micronaut.views:micronaut-views-thymeleaf")

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:

./gradlew test

Then open build/reports/tests/test/index.html in a browser to see the results.

Native Tests

The io.micronaut.application Micronaut Gradle Plugin automatically integrates with GraalVM by applying the Gradle plugin for GraalVM Native Image building.

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

To execute the tests, execute:

./gradlew nativeTest

Then open build/reports/tests/test/index.html in a browser to see the results.

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

Next Steps

Explore more features with Micronaut Guides.

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).