Load static resource in Spring Boot with Thymeleaf

java spring spring-boot thymeleaf

13,098

For a better understanding of registry.addResourceHandler("/**").addResourceLocations("classpath:/static/js/");

I wrote a more thorough answer here that discusses invalid resource location mappings. It didn't receive any upvotes, so I hope it's not terrible. :-)

In short, with the way you're mapping classpath:/static/js/, and then accessing, /js/test.js, you're telling Spring to look in /static/js/js/test.js.

What you probably want is classpath:/static/. In that case, when you try to access /js/test.js, it's looking in /static/js/test.js for the file instead.

As for Thymeleaf, I've never used it, but docs indicate you should load scripts with th:src instead of th:href. th:href appears to only be for HTML content.

13,098

Author by

boden

Updated on June 05, 2022

Comments

boden almost 2 years

I want to make page using thymeleaf. But I have some problem with the static files. I've investigated questions(1,2,3) with similar problem, but it didn't help me.

I use Spring Boot framework in the application. My files look like:

test.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="js/test.js" th:src="@{/test.js}"/>
</head>
<body>
<button onclick="testFunction('test value')">Button</button>
</body>
</html>

test.js

function testFunction(test) {
    console.log(test);
}

Configuration class

@Configuration
@EnableWebMvc
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/js/");
        super.addResourceHandlers(registry);
    }
}

And problem, when I load test.html file with javascript not loaded.

@GetMapping(value = "web/test")
public String getTestHtmlPage() {
    return "test";
}

/api/v1 is a configuration in application.properties => server.servlet-path=/api/v1

What do I do wrong? Can you help me?

Thanks all!

boden about 7 years

Thanks for answer, I tried to make change according to your answer. I found problem in source. I use property server.servlet-path in the application.properties. The server.servlet-path mean path to controller and equals /api/v1. When did I make request without server.servlet-path property all works fine (url http://localhost:8080/css/main.css). If do request with server.servlet-path property then I will receive 404 error (url the same server.servlet-path property, but I think it must be changed). Maybe do you know? I can't find solution..
boden about 7 years

I was added api/v1 to th:href and th:src and it work. Can I make it other way? When server.servlet-path will be change I also must to change path in the all .html files :-(
Christopher Schneider about 7 years

I'm not really sure, as I have no experience with Thymeleaf. I'd suggest looking into the docs to find out how th:href and th:src resolve paths. It seems like they're not aware of the servlet-path. There's probably a setting so Thymeleaf is aware of the context root you can set.