What are WAR overlays ?

If you build your projects using maven then you might have heard of the word WAR overlays. So, what exactly are WAR overlays and why are they used ?

When creating a web application using maven or in general we would most probably need third party JS/CSS files like jquery, angular or bootstrap etc. If you are building the web application using maven you would know that third party jar files like Struts or Spring can easily be included adding them as dependencies in your Pom.xml but that’s not true with web-resources, they have to be manually placed in the appropriate folder inside the WEB-INF folder. What if you are building several web applications with similar web contents like similar JS libraries ? Its laborious to copy these files into all your applications and then package it as a WAR.

In situations like stated above WAR overlays come to our rescue. So, what are WAR overlays ? It is what it exactly sounds like, taking a WAR file and including its contents into your projects contents. Including the files present inside its folders and putting them inside your project folders.

Lets consider the following example, I have a web application built using maven and I want to use angular JS. The image below shows the contents of my current JS folder

As you can see, I do not have any Angular.js files inside my JS folder. I will now go ahead add the following to my pom.xml

After including the above dependency (I have packaged all the the required angular.js files as a WAR), I run a simple “mvn clean package”. Now lets go and take a look at the WAR file and let’s see if my angular.js files have been included in it or not.

Looks like all my Angular.js files have been included in my WAR. Now I do no need to worry about manually copying these files into my JS folder and then building and deploying my webapp, I just have to include the WAR as a dependency and package it to include my resources.

Hope this helps, please leave a comment or suggestion. Thank you.