To get it to run, this handler needs be registered as follows in faces-config.xml:

 <application>
   <resource-handler>org.omnifaces.resourcehandler.CDNResourceHandler</resource-handler>
 </application>
 

By default, it runs only when the current JSF project stage is not set to Development.

Standard configuration

To configure the CDN URLs, a "org.omnifaces.CDN_RESOURCE_HANDLER_URLS" context parameter has to be provided wherein the CDN resources are been specified as a comma separated string of libraryName:resourceName=http://cdn.example.com/url key=value pairs. The key represents the default JSF resource identifier and the value represents the full CDN URL, including the scheme. The CDN URL is not validated by this resource handler, so you need to make absolutely sure yourself that it is valid. Here's an example:

 <context-param>
   <param-name>org.omnifaces.CDN_RESOURCE_HANDLER_URLS</param-name>
   <param-value>
     js/script1.js=http://cdn.example.com/js/script1.js,
     somelib:js/script2.js=http://cdn.example.com/somelib/js/script2.js,
     otherlib:style.css=http://cdn.example.com/otherlib/style.css,
     images/logo.png=http://cdn.example.com/logo.png
   </param-value>
 </context-param>
 

With the above configuration, the following resources:

 <h:outputScript name="js/script1.js" />
 <h:outputScript library="somelib" name="js/script2.js" />
 <h:outputStylesheet library="otherlib" name="style.css" />
 <h:graphicImage name="images/logo.png" />
 

Will be rendered as:

 <script type="text/javascript" src="http://cdn.example.com/js/script1.js"></script>
 <script type="text/javascript" src="http://cdn.example.com/somelib/js/script2.js"></script>
 <link type="text/css" rel="stylesheet" href="http://cdn.example.com/otherlib/style.css" />
 <img src="http://cdn.example.com/logo.png" />
 

Note that you can also use this on resources provided as ResourceDependency by the JSF implementation and/or component libraries. For example, JSF's own javax.faces:jsf.js resource which is been used by <f:ajax> can be provided by a CDN URL using the following syntax:

 javax.faces:jsf.js=http://cdn.example.com/jsf.js
 

Wildcard configuration

You can also use the wildcard syntax to map every single resource of a specific library to a common CDN URL. To achieve that, just use * as the sole resource name and make sure that the CDN URL ends with /*. Here's an example:

 <context-param>
   <param-name>org.omnifaces.CDN_RESOURCE_HANDLER_URLS</param-name>
   <param-value>jquery-cdn:*=http://code.jquery.com/*</param-value>
 </context-param>
 

 <h:outputScript library="jquery-cdn" name="jquery-1.9.1.js" />
 <h:outputScript library="jquery-cdn" name="ui/1.10.3/jquery-ui.js" />
 

Will be rendered as:

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 

EL expressions

The CDN resource handler supports evaluating EL expessions in the CDN URL. Here's an example:

 <context-param>
   <param-name>org.omnifaces.CDN_RESOURCE_HANDLER_URLS</param-name>
   <param-value>jquery-cdn:*=http://#{settings.jqueryCDN}/*</param-value>
 </context-param>
 

The EL expression is resolved on a per-request basis.

Always enable CDN resource handler

By default, the CDN resource handler runs only when the current JSF project stage is not set to Development. When you need to run it during Development stage as well, then set the context parameter "org.omnifaces.CDN_RESOURCE_HANDLER_ALWAYS_ENABLED" to true.

 <context-param>
   <param-name>org.omnifaces.CDN_RESOURCE_HANDLER_ALWAYS_ENABLED</param-name>
   <param-value>true</param-value>
 </context-param>
 

CombinedResourceHandler

If you're also using the CombinedResourceHandler, then you need to understand that CDN resources can simply not be combined, as that would defeat the CDN purpose. The CombinedResourceHandler will therefore automatically exclude all CDN resources from combining.