I have a spring boot (I use Thymeleaf for templating) project where I want to use some jQuery libraries.
Unfortunately, the webjars aren't loading at all. I have tried many configuration but all of them failed.
Here is the code snippet of my HTML page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<title>JAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.js"
th:src="@{/webjars/jquery/2.1.4/jquery.min.js}" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.js" type="text/javascript"
th:src="@{/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js}"></script>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<link href="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
rel="stylesheet" media="screen" />
</head>
I have added them in the pom file:
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>jquery</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery-file-upload</artifactId>
<version>9.10.1</version>
</dependency>
But when calling the page I got a 404 on jquery.min.js and jquery.fileupload.min.js.
GET http://localhost:8888/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js
2015-09-21 02:02:04.059 home:9
GET http://localhost:8888/webjars/jquery/2.1.4/jquery.min.js 404 (Not Found)
You are referencing jquery library correctly. Maybe you are missing resource handler configuration.
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
Or if you use JavaConfig
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
Webjars documentation
If this will not work, please check if you have webjars on classpath (open your application JAR in 7Zip and check if webjars resources are inside it.)
After inspecting the webjar for jquery, I got this working by adding a "dist" subpath.
<script src="webjars/jquery/2.1.4/dist/jquery.min.js" type="text/javascript"></script>
The webjars dependencies should be available on the spring boot classpath, so you should try referencing the webjars using the src attribute like so:
<script src="webjars/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js"></script>
<link href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet" media="screen" />
<link href="webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
rel="stylesheet" media="screen" />
I ended up doing a mvn clean install (from cmd prompt) to get the target cleaned and all the lib/jars populated correctly. I am using Spring boot with Intelij.
Additional answer found on one blog:
When using Spring Framework version 4.2 or higher, it will
automatically detect the webjars-locator library on the classpath and
use it to automatically resolve the version of any WebJars assets.
In order to enable this feature, we’ll add the webjars-locator library
as a dependency of the application:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
In this case, we can reference the WebJars assets without using the
version; (...)
if you use servlet 3.x just add :
1- using java config :
@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").resourceChain(false);
registry.setOrder(1);
}
}
2- or xml config :
<mvc:resources mapping="/webjars/**" location="/webjars/">
<mvc:resource-chain resource-cache="false" />
</mvc:resources>