Micronaut | Use Thymeleaf for dynamic templating

Photo by Anja Junghans on Unsplash

What is Thymeleaf?

Thymeleaf is a dynamic templating engine for serverless applications like Micronaut or Spring. It is really useful if you want to create non static content that gets generated dynamically. Or with the words of the official website:

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf’s main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

Configure Thymeleaf

First of all, we have to install dependencies.

Gradle

implementation(“io.micronaut.views:micronaut-views-thymeleaf”)

Maven

<dependency>     
   <groupId>io.micronaut.views</groupId>     
   <artifactId>micronaut-views-thymeleaf</artifactId> 
</dependency>

The next step is to configure the location of the html files. By default it is set to src/main/resources/views, but you can change the location for these files by configuring the src/main/resources/application.yml file. There you can change or add the location of these static-resources.

Add the HTML Template files

If you want to display some HTML files, you have to put them into the location that you’ve defined in the last step. There are two types of files, index files, where the content goes in, and template files, which create the structure of the site.

Add the index.html file to src/main/resources/views

1. As you can see here, I added a style.css file to the page and use entries for the content. Thymeleaf has the functionality to iterate through lists of Objects.
2. I use this functionality with the th:each annotation. For each entry in entries, it will iterate through. With this, I can read out the id of the entry and the title.
3. Right in the second line, it provides the title and the section to the layoutFile. This is really important for later use
4. If you want to use these Thymeleaf functionalities, you also have to use the corresponding attributes.

Add the Template.html file

This file is only used to template the whole application.

This Layout file uses the title and the menu provided by the index file to replace its own content with it. It is especially useful if you have multiple sites with different contents but with a mostly identical structure.

For example you could put a footer in the template file, which would get displayed on every page you use this template.

Create the View

1. In this Example, I have defined the View Annotation to index, which means that the file that we want to display is the index.html file. You don’t have to provide the .html extension.
2. The Get Annotation configures the path on which it should display the content
3. showMenu() returns an HttpResponse.ok with a list of Entries.
4. The data class Entries gets defined with an id and a title.

More info about Micronaut Views

Enjoy your dynamically templated site

I know this is not the prettiest site you’ve ever seen, but it shows pretty good that the templating worked as expected.

Now I hope now you know how to setup a Thymeleaf and Micronaut for dynamic templating.