//cdn.jsdelivr.net/webjars/{groupId}
in front of your static asset URLs. For instance, if using the org.webjars : jquery
WebJar and your local URL to jquery.js
is /webjars/jquery/2.1.0/jquery.js
then the CDN URL would be: //cdn.jsdelivr.net/webjars/org.webjars/jquery/2.1.0/jquery.js
libraryDependencies += "org.webjars" % "bootstrap" % "3.1.1-2"
GET /assets/*file controllers.Assets.at(path="/public", file)
bootstrap.css
is available at:
/assets/lib/bootstrap/css/bootstrap.css
libraryDependencies ++= Seq(
"org.webjars" %% "webjars-play" % "2.6.3",
"org.webjars" % "bootstrap" % "3.1.1-2"
)
-> /webjars webjars.Routes
@this(webJarsUtil: org.webjars.play.WebJarsUtil)
... HTML page ...
@webJarsUtil.locate("bootstrap.min.css").css()
@webJarsUtil.locate("bootstrap.min.js").script()
@webJarsUtil.requireJs(routes.Assets.versioned("javascripts/index.js"))
RequireJS
API to setup the config, for example:
<script>
var require = {
callback: function() {
// default requirejs configs
@for(webJarJson <- org.webjars.RequireJS.getSetupJson(routes.WebJarAssets.at("").url).values()) {
@if(webJarJson != null) {
requirejs.config(@Html(webJarJson.toString));
}
}
// example custom requirejs config
requirejs.config({
paths: {
jquery: "//code.jquery.com/jquery-1.11.1.min"
},
shim: {
bootstrap: []
}
});
}
};
</script>
@webJarsUtil.locate("requirejs", "require.min.js").script(Map("data-main" -> routes.Assets.versioned("javascripts/index.js").url))
webjars.use-cdn=true
play.filters.headers.contentSecurityPolicy = "default-src 'self' https://cdn.jsdelivr.net"
Xitrum from 3.13 has built-in support for WebJars. If you have a dependency like this:
libraryDependencies += "org.webjars" % "underscorejs" % "1.6.0-3"
In you Scalate view template file, you can write like this (the below examples use Jade syntax):
script(src={webJarsUrl("underscorejs/1.6.0", "underscore.js", "underscore-min.js")})
Xitrum will automatically use underscore.js
for
development environment and underscore-min.js
for
production environment.
The result will look like this:
<script src="/webjars/underscorejs/1.6.0/underscore.js?XOKgP8_KIpqz9yUqZ1aVzw"></script>
If you want to use the same file for both environments:
script(src={webJarsUrl("underscorejs/1.6.0/underscore.js")})
For examples, see xitrum-new and xitrum-demos (online).
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
<link rel='stylesheet' href='webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-servlet-2.x</artifactId>
<version>1.1</version>
</dependency>
<!--Webjars Servlet-->
<servlet>
<servlet-name>WebjarsServlet</servlet-name>
<servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>WebjarsServlet</servlet-name>
<url-pattern>/webjars/*</url-pattern>
</servlet-mapping>
<!--Webjars Servlet-->
<servlet>
<servlet-name>WebjarsServlet</servlet-name>
<servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class>
<init-param>
<param-name>disableCache</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>2</load-on-startup>
</servlet>
It is off course also possible to instantiate the WebjarsServlet programmatically (e.g. with Spring Boot's ServletRegistrationBean).
webjars-locator-core
library on the classpath and use it to automatically resolve the version of any WebJar assets for you.
In order to enable this feature, you will need to add the webjars-locator-core library as a dependency of your application in the pom.xml file, like:
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.48</version>
</dependency>
</dependencies>
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
<h:outputStylesheet library="webjars" name="bootstrap/3.1.0/css/bootstrap.min-jsf.css" />
<h:outputScript library="webjars" name="jquery/1.11.2/jquery.js" />
https://github.com/groovydev/modules-manager-grails-plugin.git
grails package-plugin
grails install-plugin ../modules-manager-grails-plugin/grails-modules-manager-0.2.1.zip
dependencies {
compile 'org.webjars:bootstrap:3.1.0'
}
grails refresh-modules
<head>
<r:require modules="jquery, bootstrap"/>
<r:layoutResources/>
And then at the bottom of the page right before the body add:
<r:layoutResources/>
</body>
<r:script>
$(function (){ ... }
package org.webjars;
import com.yammer.dropwizard.Service;
import com.yammer.dropwizard.bundles.AssetsBundle;
import com.yammer.dropwizard.config.Configuration;
import com.yammer.dropwizard.config.Environment;
public class MainService extends Service {
public static void main(String[] args) throws Exception {
new MainService().run(args);
}
private MainService() {
super("sample-dropwizard");
addBundle(new AssetsBundle("/META-INF/resources/webjars", 0, "/webjars"));
}
}
<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
webjars-locator-core
library on the classpath and use it to automatically resolve the version of any WebJar assets for you.
In order to enable this feature, you will need to add the webjars-locator-core library as a dependency of your application in the pom.xml file, like:
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.48</version>
</dependency>
</dependencies>
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
webjars-locator
library like this:
@ResponseBody
@RequestMapping(value = "/webjarsjs", produces = "application/javascript")
public String webjarjs() {
return RequireJS.getSetupJavaScript("/webjars/");
}
Note The RequestMapping
must not be the same as given to the ResourceHandler
getSetupJavaScript
has to be the url given to ResourceHandler
and end with a /
RequestMapping
returns the setup code for your webjars and requirejs. It has to be included in your template before loading RequireJS. A basic setup looks like this:
<script src="/webjarsjs"></script>
<script data-main="/js/app" src="/webjars/requirejs/require.min.js"></script>
This loads the WebJars RequireJS configuration from webjars-locator and the RequireJS with a main JavaScript of js/app.
RequireJS.setup
helper.
Some of the WebJars may not be updated to the new WebJars RequireJS syntax so if you experience problems please file issues on the WebJars you are using.
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
<mvc:resources mapping="/webjars/**" location="/webjars/"/>
@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/");
<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
webjars-locator-core
library on the classpath and use it to automatically resolve the version of any WebJar assets for you.
In order to enable this feature, you will need to add the webjars-locator-core library as a dependency of your application in the pom.xml file, like:
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.30</version>
</dependency>
</dependencies>
<mvc:resources mapping="/webjars/**" location="/webjars/">
<mvc:resource-chain resource-cache="true"/>
</mvc:resources>
registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").setCachePeriod(CACHE_PERIOD).resourceChain(true).addResolver(new WebJarsResourceResolver());
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
webjars-locator
library like this:
@ResponseBody
@RequestMapping(value = "/webjarsjs", produces = "application/javascript")
public String webjarjs() {
return RequireJS.getSetupJavaScript("/webjars/");
}
Note The RequestMapping
must not be the same as given to the ResourceHandler
getSetupJavaScript
has to be the url given to ResourceHandler
and end with a /
RequestMapping
returns the setup code for your webjars and requirejs. It has to be included in your template before loading RequireJS. A basic setup looks like this:
<script src="/webjarsjs"></script>
<script data-main="/js/app" src="/webjars/requirejs/require.min.js"></script>
This loads the WebJars RequireJS configuration from webjars-locator and the RequireJS with a main JavaScript of js/app.
RequireJS.setup
helper.
Some of the WebJars may not be updated to the new WebJars RequireJS syntax so if you experience problems please file issues on the WebJars you are using.
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
public class AppModule {
public static void contributeClasspathAssetAliasManager(MappedConfiguration configuration) {
configuration.add("webjars", "META-INF/resources/webjars");
}
}
<link rel='stylesheet' media='screen'
href='${asset:classpath:/META-INF/resources/webjars/bootstrap/3.1.0/css/bootstrap.min.css}'></link>
<script type='text/javascript'
src='${asset:classpath:/META-INF/resources/webjars/jquery/1.9.0/jquery.min.js}'></script>
<dependencies>
<dependency>
<groupId>de.agilecoders.wicket.webjars</groupId>
<artifactId>wicket-webjars</artifactId>
<version>0.3.4</version>
</dependency>
</dependencies>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.11.0</version>
</dependency>
</dependencies>
/**
* @see org.apache.wicket.Application#init()
*/
@Override
public void init() {
super.init();
WicketWebjars.install(this);
}
<link rel='stylesheet' href='/webjars/jquery/1.11.0/jquery.js'>
@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.render(JavaScriptHeaderItem.forReference(
new WebjarsJavaScriptResourceReference("jquery/1.11.0/jquery.js")));
}
@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
// current will be replaced with "1.11.0"
response.render(JavaScriptHeaderItem.forReference(
new WebjarsJavaScriptResourceReference("jquery/current/jquery.js")));
}
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.4</version>
</dependency>
</dependencies>
public class AjaxApplication extends Application {
@Override
protected void onInit() {
addWebjarsResourceRoute();
//business code here
}
}
<link href="${webjarsAt('bootstrap/3.3.1/css/bootstrap.min.css')}" rel="stylesheet">
for css or
<script src="${webjarsAt('intercooler-js/0.4.10/src/intercooler.js')}"></script>
for js.
:dependencies [[org.webjars/bootstrap "3.1.0"]]
(def app
(-> handler
(wrap-resource "/META-INF/resources")))
(defn -main []
(run-jetty app {:port (Integer/parseInt (or (System/getenv "PORT") "8080"))}))
<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='assets/css/bootstrap.min.css'>
The right asset will be transparently accessed and served with proper HTTP caching behavior.
webapp
, classpath
and more.
<dependencies>
<dependency>
<groupId>com.github.dandelion</groupId>
<artifactId>dandelion-webjars</artifactId>
<version>1.1.0</version>
</dependency>
</dependencies>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.11.3</version>
</dependency>
</dependencies>
{
"assets": [
{
"version": "1.11.3",
"locations": {
"webjar": "jquery.js"
}
}
]
}
Note
Note the usage of the webjar
location key, that tells Dandelion to fetch the asset from a WebJar.
<script src="/[contextPath]/webjars/jquery/1.11.3/jquery.js"></script>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
Router router = Router.router(vertx);
router.route("/assets/lib/*").handler(StaticHandler.create("META-INF/resources/webjars"));
<link rel='stylesheet' href='assets/lib/bootstrap/3.1.0/css/bootstrap.min.css'>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>
</dependencies>
<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>
<dependencies>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-webjars-locator</artifactId>>
</dependency>
</dependencies>
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
Add the webjars-locator-lite dependency, i.e. in Gradle:
implementation("org.webjars:webjars-locator-lite:0.0.4")
Add your WebJars, i.e. in Gradle:
runtimeOnly("org.webjars:bootstrap:5.3.2")
Define a routing path, an extension function that handles route resolution with the locator, create a shared / singleton instance of the locator, and configure the routing:
val WEBJARS_PATH = "/webjars"
fun WebJarVersionLocator.route(webJar: String, path: String) = run {
path(webJar, path)?.let {
"$WEBJARS_PATH/$it"
}
}
val server = embeddedServer(CIO, port = 8080) {
val webJarVersionLocator = WebJarVersionLocator()
install(CallLogging)
routing {
staticResources(WEBJARS_PATH, "META-INF/resources/webjars")
// other routes
}
}
Use the webjarVersionLocator
i.e. in kotlinx.html
:
link(webJarVersionLocator.route("bootstrap", "css/bootstrap.min.css"), rel = "stylesheet")