One of the advantages of using Maven is the ability to share common resources across projects. But, how do you do that with web resources, such as CSS, Javascript, and images? Here’s how…
First of all, doing this is actually a feature brought with Servlet 3.0. In this example, I’m going to be using Servlet 3.0 with Tomcat 7.
The Web Resource Module
To share web resources, the resources must be placed within the src/main/java/resources/META-INF/resources directory.
In my example, I have the following layout:
- src/main/java/resources/META-INF/resources
- css
- global.css
- images
- page_bg.png
- css
The pom can be very straight forward, such as the following:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>demo</groupId>
<artifactId>shared-resources</artifactId>
<version>1.0.0-SNAPSHOT</version>
<name>CSS Resources</name>
</project>
The Web-app Module
The web-app module simply has a dependency to the shared-resources module above and uses Servlet 3.0.
The pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>demo</groupId>
<artifactId>server</artifactId>
<version>1.0.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>demo</groupId>
<artifactId>shared-resources</artifactId>
<version>1.0.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<scope>provided</scope>
<version>3.0.1</version>
</dependency>
</dependencies>
</project>
A simple HelloServlet
I created a simple Servlet that returns a "Hello World" page with a link to the stylesheet located in the shared module.
package server.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 168347322578347L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String data ="<!DOCTYPE html>" +
"<html>" +
"<head>" +
" <link rel='stylesheet' href='css/global.css' />" +
"</head>" +
"<body>" +
"<h1> Hello world! </h1>" +
"</body>" +
"</html>";
resp.getOutputStream().write(data.getBytes());
}
}
The web.xml
All that’s left is to put together the web.xml
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>HelloWorld Application</display-name>
<description>
This is a simple web application with a source code organization
based on the recommendations of the Application Developer's Guide.
</description>
<servlet>
<servlet-name>HelloServlet</servlet-name>
<servlet-class>server.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
Build it and deploy
To run, simply mvn install each module and deploy the war into your Tomcat instance (drop the war file it in the webapps folder), point your browser to it, and there you go!
Example Source Code
If you want to run the example, you check out the code on GitHub.