Thymeleaf fails to load resources

3
votes

Hello i'm trying to render my html page with thymeleaf but it fails to load the .js file. I'm using spring-boot and my file structure is src/main/resources/templates this contains all my html files. My css files are located in src/main/resources/static/css/. My .js files are located in src/main/resources/js/.

Now i tried rendering my guest.html file but it's failing to load resources as i tried inspecting the element on chrome and it displays error message below:

http://localhost:8080/js/bootstrap-formhelpers.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/js/bootstrap.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

Below is the issue in my guest.html file that fails to locate the resources:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" th:src="@{https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js}" ></script>
<script src="../js/bootstrap.min.js" th:src="@{js/bootstrap.min.js}"></script>
<script src="../js/bootstrap-formhelpers.min.js" th:src="@{js/bootstrap-formhelpers.min.js}"></script>
1
htmlthymeleaf
On a sidenote, when using the @{...} link url expressions, you should always start your resource urls with a /. This makes sure Thymeleaf will create a link starting from the context path. – Tom Verelst

1 Answers

7
votes

Spring Boot does not serve static content from src/main/resources by default. It serves content from the following classpath locations:

  • classpath:/META-INF/resources
  • classpath:/static
  • classpath:/resources
  • classpath:/public

Therefor, src/main/resources/static/css is served, but not src/main/resources/js/.

Move the js directory to the src/main/resources/static directory to have it served. Another option is to add a resource handler:

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

You can also override the spring.resources.staticLocations property.

More information about serving static content with Spring Boot can be found in the Spring Boot Documentation: Static Content.