springspring-bootthymeleaftwitter-bootstrap-4webjars

Spring boot + Thymeleaf + webjars Bootstrap 4

I'm trying to add bootstrap to my Spring Boot project using Thymeleaf.

index.html

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"> </head>
<body>

<div th:replace="@{'views/' + ${content}} :: ${content}"></div>

<div lang="en" th:replace="fragments/footer :: footer"> </div>
</body>
</html>

footer.html

<div xmlns:th="http://www.thymeleaf.org" th:fragment="footer" >
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script  th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.0.0-1/js/bootstrap.min.js}"  ></script>
</div>

header.html

<head xmlns:th="http://www.thymeleaf.org" th:fragment="header" >
    <meta charset="UTF-8">
    <title>Модуль планирования ПД</title>
    <link th:rel="stylesheet"  th:href="@{webjars/bootstrap/4.0.0-1/css/bootstrap.min.css} "/>
</head>

MvcConfig.java

    @Configuration
public class MvcConfig implements WebMvcConfigurer {

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

Styles doesn't applied to page and throwing error: Syntax error: expected expression, got '<' in jquery, bootstrap, popper.

How I can solve this problem?

Thanks.

Solution

  • To make more easy I got webjars-locator:

     <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.0.0-2</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>
        <version>0.30</version>
    </dependency>

    And at my page, at the end, I put:

    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

    And need to setup this WebMvcConfigure class:

    @Configuration
public class SpringMVCConfiguration implements WebMvcConfigurer {
private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
  "classpath:/META-INF/resources/",
  "classpath:/resources/", 
  "classpath:/static/",
  "classpath:/public/"};

  @Override
 public void addResourceHandlers(ResourceHandlerRegistry registry) {
 registry.addResourceHandler("/**")
 .addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
 registry.addResourceHandler("/webjars/**")
 .addResourceLocations("/webjars/").resourceChain(false);
   }
 }

    I did not use any other setup in Spring boot to work with.