Spring MVC project missing images & styles when deploying in Eclipse to Tomcat

Question

I have a Spring MVC project in Eclipse. Maven packages it as a WAR and then I have it deployed to Tomcat through Eclipse. The issue I am running into is that the /images, /styles and the /js folders in the /webapp folder are not coming through. The page will generate and the Spring MVC functionality works (calls the Controller, etc). However, none of the styling will appear. I would greatly appreciate any help getting this to work.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
    <display-name>Some Project</display-name>
    <context-param>
        <param-name>webAppRootKey</param-name>
        <param-value>some-project.root</param-value>
    </context-param>

    <listener>
        <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
    </listener>

    <servlet>
        <servlet-name>some-project</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>some-project</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <session-config>
        <session-timeout>60</session-timeout>
    </session-config>
</web-app>

some-project-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans     
                           http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
                           http://www.springframework.org/schema/context 
                           http://www.springframework.org/schema/context/spring-context-4.0.xsd">

    <context:component-scan base-package="my.com.project.controllers" />

    <bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
        <property name="basename" value="classpath:messages" />
        <property name="cacheSeconds" value="60" />
    </bean>

   <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- Need this to handle multipart files -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

    <bean class="my.com.project.validators.SomeValidator" />
    <bean class="my.com.project.validators.OtherValidator" />
</beans>

pom.xml (parts of it

...
<packaging>war</packaging>
...
<!-- The Build -->
<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.5.1</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.6</version>
            <configuration>
                <warName>some-project</warName>
                <archive>
                    <manifest>
                        <addClasspath>true</addClasspath>
                    </manifest>
                </archive>
            </configuration>
        </plugin>
    </plugins>
</build>
...
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>4.2.5.RELEASE</version>
</dependency>
<!-- using Hibernate 4.3.11.Final -->

JSP

<link rel="stylesheet" type="text/css" media="all" href="/styles/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css" />
<link rel="stylesheet" type="text/css" href="/styles/jquery/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/styles/roper-center.css">
<link rel="stylesheet" type="text/css" href="/styles/font-awesome-4.5.0/css/font-awesome.css">

<script src="js/modernizr.js"></script>
<script src="js/framework/iws.js"></script>
<script src="js/sorttable.js"></script>
<script src="js/jquery/jquery-1.12.2.min.js"></script>
<script src="js/jquery/external/jquery/jquery.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<script src="js/jquery/jquery.autotab.js"></script>

As you can see above, I tried putting a / before the styles and did not put them in the "js" part. I viewed the page source of the page and clicked on the link for both and Tomcat comes back saying it can't find either.

If I look into the deployment folder (/opt/apache-tomcat-8.0.32/webapps/some-project), I see the following folders:

META-INF
WEB-INF
images
js
styles

And here is my webapp folder in Eclipse:

And in case, here is my Deployment Assembly

Answer 1

Have a folder called resources under WebContent and inside that have different folders as script (for js files), images, and css.

Add the following in your some-project-servlet.xml for spring to identify your resources.

<mvc:resources location="/resources/" mapping="/resources/**" />

Also don't forget to get the mvc namespace if you already don't have it.

Then include the resources in jsp as below.

<link href="${pageContext.request.contextPath}/resources/css/screen.css" rel="stylesheet" type="text/css" />

<link href="${pageContext.request.contextPath}/resources/script/jquery.js" rel="script" type="text/javascript" />

Answer 2

I don't have much experience when it comes to xml spring configurations. But when I look at one project I have I find the following configurations for my resources. Note my file structure is like yours as well.

<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/images/**" location="/images/" />
<mvc:resources location="/js/" mapping="/js/**" />
<mvc:annotation-driven />

I have that in the same file where I declare my InternalResourceViewResolver. Hope it helps.

---

The complete file:

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans     
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context.xsd">

    <context:component-scan base-package="my.app.package" />

    <!-- Internal (final) resolver -->
    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/WEB-INF/jsp/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
        <property name="order">
            <value>4</value>
        </property>
    </bean>

    <mvc:resources mapping="/css/**" location="/css/" />
    <mvc:resources mapping="/images/**" location="/images/" />
    <mvc:resources location="/js/" mapping="/js/**" />
    <mvc:annotation-driven />

</beans>

Answer 3

I think your web.xml configuration has problems.

<servlet-mapping>
   <servlet-name>some-project</servlet-name>
   <url-pattern>/</url-pattern>
</servlet-mapping>

that means you can not visit the static resources. two solutions:

1. <url-pattern>/*</url-pattern>

2. <servlet-mapping>  
       <servlet-name>default</servlet-name>  
       <url-pattern>*.css</url-pattern>  
   </servlet-mapping>  
   
   <servlet-mapping>  
       <servlet-name>default</servlet-name>  
       <url-pattern>*.gif</url-pattern>  
   
   </servlet-mapping>  
   
   <servlet-mapping>  
       <servlet-name>default</servlet-name>  
       <url-pattern>*.jpg</url-pattern>  
   </servlet-mapping>  
   
   <servlet-mapping>  
       <servlet-name>default</servlet-name>  
       <url-pattern>*.js</url-pattern>  
   </servlet-mapping>