Search code examples
javascriptjavaspringspring-bootwebjars

How can I correct include path for webjars?


I'm trying to include Bootstrap 4 within my Spring Boot project, but I'm seeing the error: Bootstrap tooltips require Popper.js

So I included the dependency:

<dependency>
  <groupId>org.webjars.npm</groupId>
  <artifactId>popper.js</artifactId>
  <version>1.13.0</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.32-1</version>
</dependency>

But when I include it inside the page I can' find the the popper.js . Why?

This is what I used:

<script th:src="@{/webjars/npm/popper.js/popper.min.js}" type="text/javascript"></script>

What is the correct path to include it?

EDIT:

Same problem with font-awesome:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>font-awesome</artifactId>
    <version>5.0.2</version>
</dependency>

and

<link rel="stylesheet" th:href="@{/webjars/font-awesome/dist/font-awesome.min.css}" />

Solution

  • When I loaded that library into my workspace, it indicates this path: META-INF/resources/webjars/popper.js/1.13.0/dist. So try it:

    1. without /npm in path
    2. with version number
    3. with dist folder

      <script th:src="@{/webjars/popper.js/1.13.0/dist/popper.min.js}" type="text/javascript"></script>
      

    EDIT: (Reaction on comment)

    Font awesome JAR has a lot of different folders in WebJAR distribution. Look at my IJ screenshot:

    enter image description here

    So for highlighted file in screenshot, you would use

     <link rel="stylesheet" th:href="@{/webjars/font-awesome/5.0.2/svg-with-js/css/fa-svg-with-js.css}" />
    

    Hope that after whowing the screenshot you understand how these webjar folders work. WebJAR just adds bunch of UI resources to your WEB-INF/resources folder and you need to figure out correct path from your workspace.