Webjars support

On this page we explain:

  • how to embed and link to Webjars resources in your application

  • how to configure Webjars serving from CDN

  • how to write Webjars links that work both with embedded Webjars and CDN

Using Webjars resources

Across Web takes over the Spring Boot configuration of automatically serving Webjar contents. Any resources with a path in /webjars/** will be served from jar files if they are packaged in the Webjars format.

@webjars prefix

Across Web additionally registers a @webjars path prefix which can be used for building links to the content, instead of using /webjars directly.

Using the prefix serves a double purpose:

  • it allows correct resolving of the resources either directly in Thymeleaf template or via web resource registration.

  • it allows you to configure a CDN instead of the /webjars path for serving the actual content

Webjars example

  • Maven dependency

  • Thymeleaf

  • Output

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.0</version>
</dependency>
<link rel="stylesheet" type="text/css" th:href="@{@webjars:/jquery/3.3.0/jquery.js}" />
<link rel="stylesheet" type="text/css" href="/webjars/jquery/3.3.0/jquery.js" />

Using a CDN for Webjars

Across Web allows you to switch all serving of Webjars content to a CDN (eg. the Webjars.org CDN: //cdn.jsdelivr.net/webjars). This can be done by setting the acrossWebModule.resources.webjars to the CDN prefix.

This will only work if all links to Webjars content have been done in a CDN-compatible way (see next section).

  • application.yml

  • Maven dependency

  • Thymeleaf

  • Output

acrossWebModule:
  resources:
    webjars: '//cdn.jsdelivr.net/webjars/'
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.0</version>
</dependency>
<link rel="stylesheet" type="text/css" th:href="@{@webjars:/jquery/3.3.0/jquery.js}" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/webjars/jquery/3.3.0/jquery.js" />
When serving Webjars from a CDN, it might no longer be necessary to include them in your application build. Your build tool probably supports some mechanism of dependency exclusions to exclude them from the artifact.

CDN-compatible links

To create Webjars links that can work with both embedded /webjars serving and CDN-based serving, the links should:

  • use the @webjars: prefix

  • include the groupId (Webjars flavor) after the prefix, but without a forward /

    • all content before the first / will be removed when using embedded Webjars

    • the exception is the org.webjars group, this is the default and may be omitted altogether

Valid CDN-compatible Webjars links:

  • @webjars:/jquery/3.3.0/jquery.js

  • @webjars:org.webjars/jquery/3.3.0/jquery.js (identical as previous)

  • @webjars:org.webjars.bower/jquery/3.4.0/jquery.js (bower flavor)

« Static resources Webjars support Links and URLs »