java - Custom template resolver not working when trying to use Thymeleaf with React JS

Question

I'm trying to setup a Spring Boot + React JS application and want that the are running inside the same WAR archive. So thanks to several tutorials on the internet I found out that the best way should be to add thymeleaf as dependency and then make a custom template resolver which points to the react js build directory. Somehow this is not working.

The error I get:

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [index], template might not exist or might not be accessible by any of the configured Template Resolvers

My web config with the custom resolvers:

@Controller
@EnableWebMvc
@ComponentScan
public class SpringWebConfig implements ApplicationContextAware,
    WebMvcConfigurer {

    private ApplicationContext applicationContext;

    @Autowired
    private SpringResourceTemplateResolver templateResolver;

    @Autowired
    private SpringTemplateEngine templateEngine;

    public SpringWebConfig() {
        super();
    }

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        this.applicationContext = applicationContext;
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("*")
            .allowCredentials(false).maxAge(3600);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(
            "/static/**",
            "/favicon.ico",
            "manifest.json"
        )
            .addResourceLocations(
                "classpath:/public/static/",
                "classpath:/public/favicon.ico",
                "classpath:/public/manifest.json"
            );
    }

    @Bean
    public SpringResourceTemplateResolver templateResolver(){
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(this.applicationContext);
        templateResolver.setPrefix("/WEB-INF/classes/public/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode(TemplateMode.HTML);
        templateResolver.setCacheable(true);
        return templateResolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine(){
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver);
        templateEngine.setEnableSpringELCompiler(true);
        templateEngine.addDialect(new Java8TimeDialect());
        return templateEngine;
    }

    @Bean
    public ThymeleafViewResolver viewResolver(){
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine);
        return viewResolver;
    }
}

The frontend controller:

@Controller
public class FrontendController {

    @GetMapping("**")
    public String index() {
        return "index";
    }
}

The structure in the tomcat webapp folder (I've added the WAR as ROOT):

What am I doing wrong? Or is there a better way to achieve that a Spring Boot and React JS is running inside the same WAR file? Just took the Thymeleaf option because of the many posts on the internet.

question from:https://stackoverflow.com/questions/65892325/custom-template-resolver-not-working-when-trying-to-use-thymeleaf-with-react-js

Answer 1

Waitting for answers