Versioning resources in Spring MVC with Thymeleaf

Question

Versioning resources in Spring MVC with Thymeleaf

https://i.sstatic.net/ArllV.png

Struggling with resource versioning in Spring Mvc 4 while using thymeleaf template engine. Despite the code provided, I am unable to see the new version URL when viewing the page source. What could be causing this issue? What am I overlooking?

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/theme*//**").addResourceLocations("/resources/static/theme/")
            .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
            .resourceChain(false)
            .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
            .addTransformer(new CssLinkResourceTransformer());
    registry.addResourceHandler("/static*//**").addResourceLocations("/resources/static/")
            .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
            .resourceChain(false)
            .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
            .addTransformer(new CssLinkResourceTransformer());
    registry.addResourceHandler("/static/js*//**").addResourceLocations("/resources/static/js/")
            .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
            .resourceChain(false)
            .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
            .addTransformer(new CssLinkResourceTransformer());
}

@Bean
public ResourceUrlEncodingFilter resourceUrlEncodingFilter() {
    return new ResourceUrlEncodingFilter();
}

Utilizing expressions in the script tag. th:src="@{/resources/static/js/companyList.js}"

javascript java spring-mvc caching thymeleaf

Answer 1

Answer №1

By making changes only in the application.properties file, I successfully implemented it without writing any code:

# Enabling HTML5 application cache manifest rewriting.
spring.resources.chain.html-application-cache=true

# Activating the Spring Resource Handling chain. This is turned off by default unless a strategy has been enabled.
spring.resources.chain.enabled=true
# Utilizing the content Version Strategy.
spring.resources.chain.strategy.content.enabled=true
# List of patterns to be applied to the Version Strategy.
spring.resources.chain.strategy.content.paths=/**

I achieved adding hash versions to URLs for CSS and JS without needing to add any additional code.

Answer 2

By making changes only in the application.properties file, I successfully implemented it without writing any code:

# Enabling HTML5 application cache manifest rewriting.
spring.resources.chain.html-application-cache=true

# Activating the Spring Resource Handling chain. This is turned off by default unless a strategy has been enabled.
spring.resources.chain.enabled=true
# Utilizing the content Version Strategy.
spring.resources.chain.strategy.content.enabled=true
# List of patterns to be applied to the Version Strategy.
spring.resources.chain.strategy.content.paths=/**

I achieved adding hash versions to URLs for CSS and JS without needing to add any additional code.

Answer 3

Answer №2

1. Develop a custom Thymeleaf LinkBuilder using Spring's ResourceUrlProvider to generate versioned links:

@Configuration
public class TemplateEngineConfig {
    @Autowired
    public void configureTemplateEngine(SpringTemplateEngine engine,
                                        ResourceUrlProvider urlProvider) {
        engine.setLinkBuilder(new VersioningLinkBuilder(urlProvider));
    }
}

class VersioningLinkBuilder extends StandardLinkBuilder {
    private final ResourceUrlProvider urlProvider;

    VersioningLinkBuilder(ResourceUrlProvider urlProvider) {
        this.urlProvider = urlProvider;
    }

    @Override
    public String processLink(IExpressionContext context, String link) {
        String lookedUpLink = urlProvider.getForLookupPath(link);
        if (lookedUpLink != null) {
            return super.processLink(context, lookedUpLink);
        } else {
            return super.processLink(context, link);
        }
    }
}

2. Implement the usage of thymeleaf tags th:href and th:src

<link th:href="@{/main.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/main.js}" type="text/javascript"></script>

This will result in:

<link href="/main-0c362e5c8643b75ddf64940262b219f7.css" rel="stylesheet" type="text/css"/>
<script src="/js/main-c13acb86fa1012e27bbb01a7c4a9bf7f.js" type="text/javascript"></script>

3.(Optional) It is advisable to include browser cache headers. Add the following to your application.properties:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
spring.resources.cache.cachecontrol.max-age=365d
spring.resources.cache.cachecontrol.no-cache=false
spring.resources.cache.cachecontrol.no-store=false
spring.resources.cache.cachecontrol.cache-public=true

If you prefer using application.yml:

spring:
  resources:
    chain:
      strategy:
        content:
          enabled: true
          paths: /**
    cache:
      cachecontrol:
        max-age: 365d
        no-cache: false
        no-store: false
        cache-public: true

Answer 4

1. Develop a custom Thymeleaf LinkBuilder using Spring's ResourceUrlProvider to generate versioned links:

@Configuration
public class TemplateEngineConfig {
    @Autowired
    public void configureTemplateEngine(SpringTemplateEngine engine,
                                        ResourceUrlProvider urlProvider) {
        engine.setLinkBuilder(new VersioningLinkBuilder(urlProvider));
    }
}

class VersioningLinkBuilder extends StandardLinkBuilder {
    private final ResourceUrlProvider urlProvider;

    VersioningLinkBuilder(ResourceUrlProvider urlProvider) {
        this.urlProvider = urlProvider;
    }

    @Override
    public String processLink(IExpressionContext context, String link) {
        String lookedUpLink = urlProvider.getForLookupPath(link);
        if (lookedUpLink != null) {
            return super.processLink(context, lookedUpLink);
        } else {
            return super.processLink(context, link);
        }
    }
}

2. Implement the usage of thymeleaf tags th:href and th:src

<link th:href="@{/main.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/main.js}" type="text/javascript"></script>

This will result in:

<link href="/main-0c362e5c8643b75ddf64940262b219f7.css" rel="stylesheet" type="text/css"/>
<script src="/js/main-c13acb86fa1012e27bbb01a7c4a9bf7f.js" type="text/javascript"></script>

3.(Optional) It is advisable to include browser cache headers. Add the following to your application.properties:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
spring.resources.cache.cachecontrol.max-age=365d
spring.resources.cache.cachecontrol.no-cache=false
spring.resources.cache.cachecontrol.no-store=false
spring.resources.cache.cachecontrol.cache-public=true

If you prefer using application.yml:

spring:
  resources:
    chain:
      strategy:
        content:
          enabled: true
          paths: /**
    cache:
      cachecontrol:
        max-age: 365d
        no-cache: false
        no-store: false
        cache-public: true

Answer 5

Answer №3

Here is what worked for me:

Update in application.yml

...
resources:
  chain:
    strategy:
      content:
        enabled: true
        paths: /js/**,/css/**
...

Adjustment in index.html

...
<script th:src=@{/js/home.js}></script>
...

Outcome

The result will look something similar to this:

...
<script src=/js/home-440273f30b71d3cf4184b48ce5e10b94.js></script>
...

Answer 6

Here is what worked for me:

Update in application.yml

...
resources:
  chain:
    strategy:
      content:
        enabled: true
        paths: /js/**,/css/**
...

Adjustment in index.html

...
<script th:src=@{/js/home.js}></script>
...

Outcome

The result will look something similar to this:

...
<script src=/js/home-440273f30b71d3cf4184b48ce5e10b94.js></script>
...

Answer 7

Answer №4

In solving the issue, I analyzed the source code of Spring's ServletContextResource class to create a relative path and checked for the existence of the resource.

Resource location: /resources/static/

Path: /static/css/login.css

pathToUse: /resources/static/static/css/login.css --> this resource URL does not exist so it returns null.

ServletContextResource Class:

@Override
public Resource createRelative(String relativePath) {
    String pathToUse = StringUtils.applyRelativePath(this.path, relativePath);
    return new ServletContextResource(this.servletContext, pathToUse);
}

Solution: Resource location: /resources/static/

Path: /css/login.css

pathToUse: /resources/static/css/login.css

I updated the format by removing /resources from the path.

th:src="@{/css/login.css}"

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) 
{

     registry.addResourceHandler("/theme*//**").addResourceLocations("/resources/static/")
             .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
             .resourceChain(false)
             .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
             .addTransformer(new CssLinkResourceTransformer());
     registry.addResourceHandler("/css*//**").addResourceLocations("/resources/static/")
             .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
             .resourceChain(false)
             .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
             .addTransformer(new CssLinkResourceTransformer());
     registry.addResourceHandler("/js*//**").addResourceLocations("/resources/static/")
             .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
             .resourceChain(false)
             .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
             .addTransformer(new CssLinkResourceTransformer());

  @Override
  public void configure(final WebSecurity web) throws Exception {
web.ignoring().antMatchers("/theme/**").antMatchers("/js/**").antMatchers("/css/**");
         }

Answer 8

In solving the issue, I analyzed the source code of Spring's ServletContextResource class to create a relative path and checked for the existence of the resource.

Resource location: /resources/static/

Path: /static/css/login.css

pathToUse: /resources/static/static/css/login.css --> this resource URL does not exist so it returns null.

ServletContextResource Class:

@Override
public Resource createRelative(String relativePath) {
    String pathToUse = StringUtils.applyRelativePath(this.path, relativePath);
    return new ServletContextResource(this.servletContext, pathToUse);
}

Solution: Resource location: /resources/static/

Path: /css/login.css

pathToUse: /resources/static/css/login.css

I updated the format by removing /resources from the path.

th:src="@{/css/login.css}"

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) 
{

     registry.addResourceHandler("/theme*//**").addResourceLocations("/resources/static/")
             .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
             .resourceChain(false)
             .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
             .addTransformer(new CssLinkResourceTransformer());
     registry.addResourceHandler("/css*//**").addResourceLocations("/resources/static/")
             .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
             .resourceChain(false)
             .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
             .addTransformer(new CssLinkResourceTransformer());
     registry.addResourceHandler("/js*//**").addResourceLocations("/resources/static/")
             .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
             .resourceChain(false)
             .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
             .addTransformer(new CssLinkResourceTransformer());

  @Override
  public void configure(final WebSecurity web) throws Exception {
web.ignoring().antMatchers("/theme/**").antMatchers("/js/**").antMatchers("/css/**");
         }

Answer 9

Answer №5

The ResourceUrlEncodingFilter is being used to filter all URLs on the page, but this can lead to performance issues and is not an ideal solution. To address this issue, I recommend the following:

registry.addResourceHandler("/javascript/*.js", "/css/*.css", "/img/*")
                    .addResourceLocations("classpath:/static/javascript/", "classpath:/static/css/", "classpath:/static/img/")
                    .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
                    .resourceChain(true)
                    .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"));

To reference static resources within the page, you can use the function below:

<script th:src="${@mvcResourceUrlProvider.getForLookupPath('/javascript/app.js')}"></script>

Answer 10

The ResourceUrlEncodingFilter is being used to filter all URLs on the page, but this can lead to performance issues and is not an ideal solution. To address this issue, I recommend the following:

registry.addResourceHandler("/javascript/*.js", "/css/*.css", "/img/*")
                    .addResourceLocations("classpath:/static/javascript/", "classpath:/static/css/", "classpath:/static/img/")
                    .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
                    .resourceChain(true)
                    .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"));

To reference static resources within the page, you can use the function below:

<script th:src="${@mvcResourceUrlProvider.getForLookupPath('/javascript/app.js')}"></script>

Versioning resources in Spring MVC with Thymeleaf

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to empty a backbone collection in preparation for loading new data?

Angular integration of Jquery UI datapicker with read-only feature

Generate a dynamic text-box and drop-down list using HTML and JavaScript

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

Discovering the power of Next.js Dynamic Import for handling multiple exportsI hope this

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

Determine the duration/length of an audio file that has been uploaded to a React application

I am endeavoring to send out multiple data requests using a function, ensuring that the code execution occurs only once all the results have been received

Is it possible for URLSearchParams to retrieve parameters in a case-insensitive manner

Autocomplete fails to recognize any modifications made to the original object

Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

Strategies for efficiently loading 100,000 records into a table using Spring Boot on the server side and Angular on the front end

Executing a JavaScript function to trigger a PHP script that saves data into a MySQL database

Using Selenium WebDriver to Extract Variables from JavaScript SourceCode

How to eliminate excess white space on the right side in Bootstrap 4

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

Tips for implementing jQuery on HTML loaded post document.ready():

The error you are seeing is a result of your application code and not generated by Cypress

"Protractor encountered an issue when navigating to the most up-to-date Angular section in our