Building a WebJar

As part of the rollout to the new University Website, a Global Experience Language was developed for Edinburgh University, which was named Edinburgh GEL. The implementation of the GEL is based on Bootstrap.

In order to easily fold this into our Java Web Applications, I wanted to create a WebJar which would allow developers to quickly pull in the Edinburgh GEL and immediately begin to use the resources.

The GEL file structure

The GEL is relatively simple in final structure, in that after being built a dist folder is created containing the following sub-folders:

• css
• fonts
• images
• js

The pom file

First step in building a WebJar is adding a pom file to the GEL project in it’s folder root. It needs an appropriate artifact, group, name , version and packaging:

<groupId>uk.ac.ed.uwp</groupId>
<artifactId>edgel-webjar</artifactId>
<name>EdGEL</name>
<version>2.0.1</version>
<packaging>jar</packaging>

Also, a property should be set which specifies the correct web jar destination directory:

<destDir>${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}</destDir>

Then we need to add a plugin which will copy the correct resources from the dist folder.

<plugin>
   <artifactId>maven-antrun-plugin</artifactId>
   <version>1.7</version>
   <executions>
     <execution>
     <phase>process-resources</phase>
     <goals>
       <goal>run</goal>
     </goals>
       <configuration>
       <target>
         <echo message="moving EdGel resources"/>
         <copy todir="${destDir}/gel">
         <fileset dir="${project.basedir}/dist" includes="js/*.min.js,css/*.min.css,fonts/,images/"/>
         </copy>
          <echo message="moving gel resources"/>
       </target>
       </configuration>
     </execution>
    </executions>
</plugin>

And also a plugin which will compress the resources:

<plugin>
 <groupId>com.googlecode.todomap</groupId>
 <artifactId>maven-jettygzip-plugin</artifactId>
 <version>0.0.5</version>
 <configuration>
   <webappDirectory>target/classes</webappDirectory>
   <outputDirectory>target/classes</outputDirectory>
   <extensions>
      <extension>js</extension>
      <extension>css</extension>
      <extension>less</extension>
   </extensions>
 </configuration>
 <executions>
   <execution>
     <phase>prepare-package</phase>
     <goals>
       <goal>process</goal>
     </goals>
   </execution>
 </executions>
</plugin>

Finally, add the standard release support into the pom file so that the Maven artifact can be published to your repository of choice. We use Bamboo to control the publishing of the WebJar into our Maven repository.

Once that’s all done developers can add it as a dependency to their project:

<dependency>
   <groupId>uk.ac.ed.uwp</groupId>
   <artifactId>edgel-webjar</artifactId>
   <version>2.0.1</version>
</dependency>

And,  then add links to resources in the Web UI:

<link href="/webjars/edgel-webjar/2.0.1/gel/css/edgel-green-dark.min.css" rel="stylesheet">