Static files can not found Spring MVC + Thymeleaf

Question

I have a spring application which is a starting project. I used Thymeleaf as template engine. But i have problem which is i can not reach to the static files such as CSS or javascript. This is my file structure for this application.

This is the configuration file for Thymeleaf engine. And i also tried to add resource handling which is :
SpringBoot with Thymeleaf - css not found
package com.ggk.config;

import org.springframework.beans.BeansException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;


@Configuration
@EnableWebMvc
@ComponentScan("com.ggk")
public class ThymeleafConfig extends WebMvcConfigurerAdapter {

    @Bean
    public ServletContextTemplateResolver servletContextTemplateResolver() {
        ServletContextTemplateResolver servletContextTemplateResolver = new ServletContextTemplateResolver();
        servletContextTemplateResolver.setPrefix("/WEB-INF/templates/");
        servletContextTemplateResolver.setSuffix(".html");
        servletContextTemplateResolver.setTemplateMode("HTML5");
        servletContextTemplateResolver.setCacheable(false);

        return servletContextTemplateResolver;
    }

    @Bean
    @Autowired
    public SpringTemplateEngine springTemplateEngine(ServletContextTemplateResolver servletContextTemplateResolver) {
        SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
        springTemplateEngine.setTemplateResolver(servletContextTemplateResolver);
        return springTemplateEngine;
    }
    @Bean
    @Autowired
    public ThymeleafViewResolver thymeleafViewResolver(SpringTemplateEngine springTemplateEngine) {
        ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();
        thymeleafViewResolver.setTemplateEngine(springTemplateEngine);
        return thymeleafViewResolver;
    }






}

here is my index.html adding css files.

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

Answer 1

I guess you cannot view the static resources directly via chrome as well, like:

http://<domain_name>:<port>/<context_root>/css/animate.css

I think it gives you a 404 error. If this is the case, that means your app needs a configuration to serve static resources. Basically you need to add a ResourceHandler to your config. See following link for an example:

https://stackoverflow.com/a/30663486/878361

In summary you need to:

1. extend WebMvcConfigurerAdapter (which you've already done)

2. override addResourceHandlers method and add your resource locations like follows:

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

Answer 2

Move css and images to webapp.