Live reload for thymeleaf template

Question

When I change a thymeleaf .html file residing inside /templates , I expect the browser to automatically reload the page. I have the live reload plugin installed and its able to do a handshake with the spring boot server. However , upon chaning a thymeleaf template file , I have to manually reload the browser. Any suggestions what I might be missing. Obviously I have spring-boot-devtools enabled and have also manually updated the property devtools.livereload.enabled = true. And spring devtools is correctly relecting changes to any template or controller in build target , and with a manual reload of browser , I see the changes.

As per spring docs.

Certain resources do not necessarily need to trigger a restart when they are changed. For example, Thymeleaf templates can be edited in-place. By default, changing resources in /META-INF/maven, /META-INF/resources, /resources, /static, /public, or /templates does not trigger a restart but does trigger a live reload.

I have my local running over a broken https. ( Some certificate issue , which causes a not secure message in chrome address bar. Could this be the reason live reload is not working.

Answer 1

After 3 years of frustation here is a solution for a working HOT SWAP:

https://attacomsian.com/blog/spring-boot-auto-reload-thymeleaf-templates

Below are my tested settings (this is the only thing I've changed for it to work).

application.yaml:

spring:
  thymeleaf: # Thymeleaf
    cache: false
    mode: HTML
    encoding: UTF-8
    prefix: file:src/main/resources/templates/
  resources: # Static resources
    static-locations: file:src/main/resources/static/
    cache:
      period: 0

What it does:

• Applies changes to your views (and/or static content) if you've altered anything in static/ or templates/
• It does so without the need to manually compile or reboot the entire web server

What it does not:

• Reload the page for you in the browser (you still have to refresh the page in the browser; btw that LiveReload Chrome extension won't work either, maybe with some webpack magic you can make it work)

This is all assuming you didn't override the default paths (/resources/templates, /resources/static).

P.S. I've tried with a self-signed TLS cert, it still works. Yes it won't behave like Angular with browser page reloading out of the box.

Answer 2

To have HTML / CSS / JS reloading automatically in Spring Thymeleaf can be simple and bug free, have only tested in IntelliJ.

Add this to maven, use ${spring.version} var or replace by your version:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <version>${spring.version}</version>
    <optional>true</optional>
    <scope>runtime</scope>
</dependency>

Add to the header of the html:

<script src="http://localhost:35729/livereload.js"></script>

When using IntelliJ:

Answer 3

I had the same issue. I had spring boot dev tools and templates in /src/main/webapp/WEB-INF/templates. The only thing i needed to do was set spring.thymeleaf.cache to false. In my case i had to do it in the java code.

@Bean
public SpringResourceTemplateResolver templateResolver(){
    // SpringResourceTemplateResolver automatically integrates with Spring's own
    // resource resolution infrastructure, which is highly recommended.
    final SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
    templateResolver.setApplicationContext(this.applicationContext);
    templateResolver.setPrefix("/WEB-INF/templates/");
    templateResolver.setSuffix(".html");
    // HTML is the default value, added here for the sake of clarity.
    templateResolver.setTemplateMode(TemplateMode.HTML);
    // Template cache is true by default. Set to false if you want
    // templates to be automatically updated when modified.
    templateResolver.setCacheable(false);
    templateResolver.setOrder(2);
    return templateResolver;
}

I got this sample code from thymeleaf https://github.com/thymeleaf/thymeleafexamples-springmail/blob/3.0-master/src/main/java/thymeleafexamples/springmail/business/SpringMailConfig.java

Answer 4

EDIT:

You can enbale automatic regreshing of your browser with e.g. a live reload plugin. You could use http://livereload.com/extensions/

A hint from official spring boot docs is here: https://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-devtools.html#using-boot-devtools-livereload

Explanation why it does not work out of the box

I think you are mixing things here. "Live reload" in terms of Spring Boot applications means that you do not need to restart your application server after editing your html. This does not mean that you get hot reloading like in angular from webpack dev server.

So you still have to trigger a refresh of your browsers page.

See here for more details for how it works in WDS: https://webpack.js.org/concepts/hot-module-replacement/

And here from spring's perspective https://docs.spring.io/spring-boot/docs/current/reference/html/howto-hotswapping.html