Spring MVC – How to include JS or CSS files in a JSP page

In this tutorial, we will show you how to include static resources like JavaScript or CSS in a JSP page.

Summary steps :

  1. Put static resources like cs, js or images into this folder webapp\resources
  2. Create a Spring mvc:resources mapping
  3. Include in JSP page via JSTL tag c:url or Spring tag spring:url

P.S This project is tested with Spring 4.1.6.RELEASE.

1. Project Directory

A standard Maven folder structure, puts the static resources like js and css files into the webapp\resources folder.

spring-mvc-include-css-

2. Spring Resource Mapping

Declares mvc:resources, to map “url path” to a physical file path location.

spring-web-config.xml

<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="com.mkyong.web" />

    <bean
	class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	<property name="prefix">
		<value>/WEB-INF/pages/</value>
	</property>
	<property name="suffix">
		<value>.jsp</value>
	</property>
    </bean>

    <mvc:resources mapping="/resources/**" location="/resources/theme1/"  
	cache-period="31556926"/>

    <mvc:annotation-driven />
	
</beans>

In the above example, any requests from this url pattern /resources/**, Spring will look for the resources from the /resources/mytheme1/ instead.

In future, you can easily change to a new theme by updating the mvc:resources


	<mvc:resources mapping="/resources/**" location="/resources/theme-new/" />

3. Include in JSP Page

To include CSS or JS in a JSP page, you can use JSTL tag c:url or Spring tag spring:url.

3.1 JSTL tag c:url example.

hello.jsp

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
    <script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>
    <script src="<c:url value="/resources/js/main.js" />"></script>
</head>
<body>
<h1>1. Test CSS</h1>

<h2>2. Test JS</h2>
<div id="msg"></div>

</body>
</html>

3.2 Spring tag spring:url example.

hello.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<spring:url value="/resources/css/main.css" var="mainCss" />
	<spring:url value="/resources/js/jquery.1.10.2.min.js" var="jqueryJs" />
	<spring:url value="/resources/js/main.js" var="mainJs" />
	
	<link href="${mainCss}" rel="stylesheet" />
    <script src="${jqueryJs}"></script>
    <script src="${mainJs}"></script>
</head>
<body>
<h1>1. Test CSS</h1>

<h2>2. Test JS</h2>
<div id="msg"></div>

</body>
</html>

3.3 Javascript file.

/webapp/resources/mytheme/js/main.js

jQuery(document).ready(function($) {

	$('#msg').html("This is updated by jQuery")

});

3.4 CSS file.

/webapp/resources/mytheme/css/main.css

h1{
	color:red;
}
Alternatively
For those who hates JSTL, you can use the “page context” variable to get the resources like this :


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

4. Demo

Run the project with Maven command : $ mvn jetty:run

URL : http://localhost:8080/spring-css/

spring-mvc-include-css-demo

5. Static resources in WEB-INF?

Q : Can I put the static resources in the WEB-INF folder?
A : Yes, you can, the Spring mapping will still work, For example,


	<mvc:resources mapping="/resources/**" location="/WEB-INF/resources/theme1/" />

But, this is not a good practice. You can ignore the rule, but many developers and plugins will look for the static resources in the same level of WEB-INF, not inside the WEB-INF.

Download Source Code

Download it – spring-mvc-css-example.zip (57 KB)

Reference

  1. Spring MVC serving static resources

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
59 Comment threads
12 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
64 Comment authors
Norbu SherpaShameerMd. Mahbub AlamEduardoHimansu Recent comment authors
newest oldest most voted
raj mohan
Guest
raj mohan

js is not applying in html only css is working

Naveen
Guest
Naveen

org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 31 in XML document from ServletContext resource [/WEB-INF/minku-servlet.xml] is invalid; nested exception is org.xml.sax.SAXParseException; lineNumber: 31; columnNumber: 77; cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element ‘mvc:resources’.

Chaitanya Dalvi
Guest
Chaitanya Dalvi

what is we store JS/CSS in main/resources folder? how to access them?

Aastha Bhatt
Guest
Aastha Bhatt

hey i want to add background image but its not loading the url of the image. my css is as follows:
.body{
background-image: url(“resources/img/bg-login.jpg”);
}

Marek Cie?lar
Guest
Marek Cie?lar

if you have css file in /resources/css/css.css
than try
background-image: url(“../img/bg-login.jpg”);

Pooja Jain
Guest
Pooja Jain

I also had same problem while adding background – image and tried your solution but it still didn’t work

Ravi Kumar
Guest
Ravi Kumar

how spring controller send data to html using js and knouckout js and ajax ?

Vladimir Komlev
Guest
Vladimir Komlev

Hello!
I made like your example but it isn’t worked.
I have a question.
Why is the path different to the css resource?
The path to the folder – /resources/theme1/css/main.css
On the jsp page you pointed –

Norbu Sherpa
Guest
Norbu Sherpa

i guess it is because he had already mapped– /resources/theme1 to — /resources
in this way, we call indicate the path by using — /resources only whenever we need it.

pranish
Guest
pranish

Do we need to add any maven dependency to use jstl tags? I have spring mvc and spring core dependency but also the jstl tags are not working

Chinthaka DinadaSa
Guest
Chinthaka DinadaSa

Cool..

Can’t we use following steps to complete this task.

You need to set “ as following…

${req.requestURL}

Then You can Import any JS or CSS like below..

eugen
Guest
eugen

HUGE

ezd
Guest
ezd

your segesting is not working on my case. I am using spring mvc, spring security and apache tiles. The project structure in my case a bit different from yours. What is your advice. Please look at the picture of my project structure http://postimg.org/image/6dqu4wb8v/ regards,

????? ?????????
Guest
????? ?????????

If you would give me an insight please. My project is majorly similar, the appplication clearly sees files like /resources/images/Pic.jpg . To depict such files is not a big problem, but I cannot understand by myself or find out in the web how to depict the file like /resources/images/level1DIR/Pic.jpg and even if it is possible at all via static access?

????? ?????????
Guest
????? ?????????

I found the answer by myself. It takes to write tag one more time and to point mapping for one directory level deeper. IIMPORTANT: it must distinct from main mapping to RESOURCES directory and locate before main tag mapped to RESOURCES directory

Nicola De Filippo
Guest
Nicola De Filippo

Thanks for your tutorial. Is possible to have also the configuration files (web.xml) in the zip? I have a 404 error and don’t understand. Thanks

hemalait
Guest
hemalait

Hi All, I am pretty new to JSP. The JSP that we are using (at work) does not have header or any html tags. JS are defined in script tags and css is picked up when packaged with the EAR. if (localStorage != ‘undefined’ && localStorage.dev == “true”) { document.write(”); document.write(”); document.write(”); }else{ document.write(”); document.write(”); document.write(”); Other Application is picking the css using the same framework. I was asked to work the same way since the css is not getting picked I tried to add this way document.write(”); after the . It does style my page (not completely but better… Read more »

Ajay Kumar Yadav
Guest
Ajay Kumar Yadav

is there any tutorial for annotations based for same functionality. i need that urgently

Arm
Guest
Arm

Hi Mkyong It’s Urgent Need Help

I run this example but i have problem on some Javascript & Css i have

Page is working find i view source and it can link to all js and css file no problem.
But! some UI component is not working, I used IOS Rang silder but it show as text input why ?

Thanks you for your answer

Ashish Aggarwal
Guest
Ashish Aggarwal

hello, after following every step, i am still getting “No mapping found for HTTP request with URI [/AttendanceApp/resources/main.css] in DispatcherServlet with name ‘dispatcher'” error
please help

Back Ache
Guest
Back Ache

Thanks , it works ,in my project ,I got “No mapping found for HTTP request” ,compare to your example,I found I missing in spring-mvc.xml,but I don’t know why,what does do?

dude
Guest
dude

Thank you thank you thank you so much! Great tutorial!

Shahriar Husainy
Guest
Shahriar Husainy

Great post! Thank you so much!

Vaibhav Srivastav
Guest
Vaibhav Srivastav

Finally It’s Working.It was good for me.

Thanks

ramesh
Guest
ramesh

Happy hours…

Mansoor
Guest
Mansoor

Thankyou sir , it is working,
but my doubt is, can i map resource from url(http:// or ftp://) instead from file://

Umesh
Guest
Umesh

Thanks Lot sir

Hateless
Guest
Hateless

OOO I love you!!! 12 hours in a trash and finally solution.

ashwini
Guest
ashwini

Thanks a lot
was struggling from an hour as my js and css files where not getting loaded

Tahseen Haque
Guest
Tahseen Haque

Thank you so much for taking the time to write these instructions up

vid
Guest
vid

When i do the resource mapping ( ), i am getting No mapping found for HTTP request with URI [/SpringMvc/home] in DispatcherServlet with name ‘mvc-dispatcher’. This is how my login controller looks.

@Controller
@RequestMapping(“/”)
public class LoginController {

@RequestMapping(method = RequestMethod.GET, value = “/home”)
public String showLogin(ModelMap model) {
return “logIn”;
}

@RequestMapping(method = RequestMethod.POST, value = “/resource”)
public String showResource(ModelMap model) {
return “resourceTracker”;
}

}

When i don’t do the resource mapping, its not able to find my css file with the below error

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.css, line 0) http://localhost:8080/SpringMvc/resources/mytheme/css/main.css

mkyong
Guest
mkyong

Nothing to do with the @Controller class, the resources mapping is control by the spring config file.

Article and source code is updated, please download the new source code and try it again.

jb
Guest
jb

how add .ejs file?

rkstha
Guest
rkstha

Thanks for this article.

Andry Rakotozafinirina
Guest
Andry Rakotozafinirina

this work fine on tomcat but when i use Glassfish it doesn’t work , any help?

stevematdavies
Guest
stevematdavies

Why should the front end resources be mapped to back end functionality??? Why not just put them in WEB-INF, keep the web and back end separated. Adding them as a servlet dependdency seems to coupled and akward.

mkyong
Guest
mkyong

Stuff in WEB-INF is unable to access by client directly, and you need to do internal resource mapping as well.