Spring Boot Thymeleaf static content doesn´t load

Question

I just started a new Spring Boot (with Spring Security) and Thymeleaf project. Since I wanted to integrate static resources I tried different file structures but with none of them, Spring bound the files in. Since I havent changed the static-resource path my console outputs Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler] on startup.

Different file structures I tried and didn´t succeed with.

src
 |--main
    |--java
    |--resources
       |--static
          |--css
             |--bootstrap.min.css
             |--custom_test.css
          |--templates
             |--....

also

src
 |--main
    |--java
    |--resources
       |--webjars          
          |--static
             |--css
                |--bootstrap.min.css
                |--custom_test.css
       |--templates
          |--....

or

src
 |--main
    |--java
    |--resources
       |--public
          |--css
             |--bootstrap.min.css
             |--custom_test.css
          |--templates
             |--....

In HTML/Thymeleaf I tried

    <link rel="stylesheet" type="text/css" href="webjars/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="webjars/static/css/custom_test.css"/>

or

    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/custom_test.css}"/>

None of this worked so far. I really hope you can help me and others with the same poblem. Thanks in advance!

Answer 1

You can try out some possible fixes below:

• If you are using Eclipse as your IDE and you add a static resource to the static sub-folders you should refresh the project folder in Eclipse for the new resource to be loaded.
• Another possible reason could be your local bootstrap version is not loading correctly, try to use an earlier version.
• Use an online version of bootstrap for both css and js files to see if there is an issue with your local bootstrap file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Your problem may be the configuration of Spring Security. First, check with the developer tools of your browser and see what the response is for the resources that you do not get on the client. The response status code could be 302 or 401, depending on your current configuration.

If that is the case, you need to add an additional configuration to your project that looks like the following:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter
{        
    @Override
    protected void configure(HttpSecurity http) throws Exception
    {
        http.authorizeRequests()
                .antMatchers("/").permitAll()
                .antMatchers("/favicon.ico").permitAll()
                .antMatchers("/css/**").permitAll()
                .antMatchers("/js/**").permitAll()
                .antMatchers("/static/**").permitAll()
                .antMatchers("/images/**").permitAll()
                .antMatchers("/blog/**").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
                .logout()
                .permitAll();
    }
// ...
}