Introduction about WebJars

I don’t know how you guys work with Java web applications using front-end frameworks such as JQuery, Bootstrap, … but for me, the management and configuration to use these frameworks is sometimes a big problem. For example, using the Backbone.JS library, this library has a dependency, the Underscore.JS library, if you want to use Backbone.JS, we must include the Underscore.JS library. Where should I put the .js files of the frameworks, sometimes I have to think, …

The problems I mentioned above, we can easily solve with WebJars. WebJars is a set of client-side web libraries packaged in JAR files, making us easy to manage and use popular front-end libraries and frameworks like JQuery, Bootstrap, … in Java web applications. You can use Maven or Gradle to manage these dependencies. WebJars works well with most Java web frameworks such as the Spring framework, … In this tutorial, I will show you how to use WebJars!

First, I will create a Spring Boot with Web dependency as an example. As I said, WebJars works well with most Java web frameworks, so you can use it in any Java web project.

Introduction about WebJars

As an example, I will add the WebJars dependency for JQuery, Bootstrap, and Backbone.JS as follows:

Because Backbone.JS has a dependency of Underscore.JS, you will see that Underscore.JS is also included in the project without us having to do anything:

Introduction about WebJars

Very convenient, isn’t it?

To declare using the front-ends and frameworks that I have added, I will create a new file app.js and index.html in the src/main/resources/static directory with the following content:


The path to the .js files declared in the <script> or .css in the <link> tag will depend on how these files are contained in the WebJars .jar file. I take an example of the JQuery library, you will see the jquery.min.js file is contained in the jquery-3.6.0.jar file as follows:

Introduction about WebJars

Comparing the way I declared above, you will see that the value of the src attribute in the <script> tag will start with the webjars directory located in the .jar file. Similarly, the href attribute of the <link> tag is the same.


Now if you run the application, you will see 2 alert messages displayed.

One is in the Backbone.JS code:

Introduction about WebJars

One is the JQuery code:

Introduction about WebJars

And display Bootstrap’s HTML and CSS:

Introduction about WebJars

Very good, isn’t it?

If you notice, with the way of declaring the path to the .js or .css files above, it will be very inconvenient if we upgrade the version of these libraries. We will have to change the code to update the path according to the new version because, as you can see, in the path to the .js or .css files, the version is included. To solve this problem, you can add a dependency of WebJars:

Now, we can declare paths to .js or .css files without version as follows:

The result is still the same if you run the application again.

Add Comment