Last updated: 2024-02-05

Hot Reload of Thymeleaf Templates during development

Frontend development involves frequent changes to the HTML code, the effects of which you want to see in the browser immediately. In order to always use the current template during development, a small extension of the code is necessary.

By default a Spring Boot application will load Thymeleaf templates from the classpath. For the bundled application this also makes a lot of sense, however during development every modified file has to be recompiled first to see the change. Even disabling the cache with spring.thymeleaf.cache=false cannot alter this behavior.

With the following configuration, which only becomes active for the profile local, the templates are loaded directly from the file system.

@Configuration
@Profile("local")
public class LocalDevConfig {

public LocalDevConfig(final TemplateEngine templateEngine) throws IOException {
        final ClassPathResource applicationYml = new ClassPathResource("application.yml");
        if (applicationYml.isFile()) {
            File sourceRoot = applicationYml.getFile().getParentFile();
            while (sourceRoot.listFiles((dir, name) -> name.equals("mvnw")).length != 1) {
                sourceRoot = sourceRoot.getParentFile();
            }
            final FileTemplateResolver fileTemplateResolver = new FileTemplateResolver();
            fileTemplateResolver.setPrefix(sourceRoot.getPath() + "/src/main/resources/templates/");
            fileTemplateResolver.setSuffix(".html");
            fileTemplateResolver.setCacheable(false);
            fileTemplateResolver.setCharacterEncoding("UTF-8");
            fileTemplateResolver.setCheckExistence(true);
            templateEngine.setTemplateResolver(fileTemplateResolver);
        }
    }

}

Configuration for hot swapping of Thymeleaf templates

A little bit of magic is needed here right at the beginning of our method: we first locate the file application.yml or application.properties from the classpath, so that we have an anchor in the file system. From there we go up until we find the highest level of our project by looking for the file mvnw or gradlew.

With this information we can configure our FileTemplateResolver and set it to the TemplateEngine. All changes to the Thymeleaf templates are now immediately visible in the browser - hot swapping is now active. Don't forget the add the required profile during development, for example with a parameter -Dspring.profiles.active=local.

If we work with Webpack and the DevServer, it can also be configured to watch HTML files. With this setup the browser will reload itself automatically after each change - no active page reload needed anymore.

Part of webpack.config.js to observe HTML files

With Bootify, modern Spring Boot applications with their own database schema, CRUD functions and advanced features can be initialized directly in the browser. In the Free Plan a frontend based on Thymeleaf can be selected, with which the LocalDevConfig is directly available - matching the selected setup for Yaml or Properties and the build type.

Start Project
No registration required

‹

Best Practices for Thymeleaf and Spring Boot

Using Webpack with Spring Boot

›

Create new account

Log in with existing account

Reset your password

Hot Reload of Thymeleaf Templates during development

General error