How to include js and CSS in JSP with spring MVC

Question

I want to include js and css files in my jsp  but I m not able to do so  I m new to the concept of spring MVC  For a long time  I ve been working on this same topic  My index Page is like this   lt  DOCTYPE html gt   lt html gt   lt head gt   lt link rel  stylesheet  type  text css  href    pageContext request contextPath  style css   gt   lt script type  text javascript  src    pageContext request contextPath  LoginPageScrip js  gt    lt  script gt    lt style type  text css  gt  body       background-image  url  LoginPageBackgroundImage jpg       lt  style gt   lt  head gt   lt body  gt       lt h6 gt Please login in google Chrome lt  h6 gt       lt h1 align  center  gt Welcome to my Twitter Clone lt  h1 gt       lt div class  m  style  margin-left  401px    margin-top  70px   gt           lt form method  post  action  LoginForExistingUser  onsubmit  return Validate this    gt           lt fieldset gt                   lt legend align  center  gt Login lt  legend gt                       lt div class  a  gt                           lt div class  l  gt User Name lt  div gt                           lt div class  r  gt                               lt INPUT type  text  name  userName  gt                           lt  div gt                       lt  div gt                        lt div class  a  gt                           lt div class  l  gt Password lt  div gt                           lt div class  r  gt                               lt INPUT type  password  name  password  gt                           lt  div gt                       lt  div gt                       lt div class  a  gt                           lt div class  r  gt                               lt INPUT class  button  type  submit  name  submit                                  value  Login  gt                           lt  div gt                       lt  div gt                       lt i align  center  style  margin-left  183px   gt New User    lt a href  signup html  gt  lt u gt Signup lt  u gt  lt  a gt  lt  i gt               lt  fieldset gt       lt  form gt       lt  div gt   lt  body gt    lt  html gt    And my spring-dispatcher-servlet xml is like this    lt 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      xmlns mvc  http   www springframework org schema mvc      xsi schemaLocation           http   www springframework org schema beans         http   www springframework org schema beans spring-beans xsd         http   www springframework org schema context         http   www springframework org schema context spring-context xsd         http   www springframework org schema mvc         http   www springframework org schema mvc spring-mvc xsd  gt            lt context component-scan base-package  com csc student    gt           lt mvc annotation-driven  gt           lt  -- lt bean id  HandlerMapping  class  org springframework web servlet handler BeanNameUrlHandlerMapping    gt -- gt              lt  --  lt bean name   welcome html  class   csc csc helloController HelloController    gt  -- gt       lt bean id  viewResolver  class    org springframework web servlet view InternalResourceViewResolver   gt           lt property name  prefix  gt               lt value gt  WEB-INF  lt  value gt           lt  property gt           lt property name   suffix  gt               lt value gt  jsp lt  value gt           lt  property gt       lt  bean gt   lt  beans gt    My controller is like this   package com csc student       import org springframework stereotype Controller      import org springframework web bind annotation RequestMapping      import org springframework web bind annotation RequestMethod      import org springframework web servlet ModelAndView        Controller     public class StudentInfoController             RequestMapping value     indexPage html   method   RequestMethod GET          public ModelAndView getAdmissionFrom                 ModelAndView model   new ModelAndView  indexPage                return model                    Can some one help me in this  I m struggling very hard but I m not getting any solution  I have kept my js and css file in WEB-INF folder

User · Answer

Put your css js files in folder src main webapp resources  Don t put them in WEB-INF or src main resources   Then add this line to spring-dispatcher-servlet xml   lt mvc resources mapping   resources     location   resources     gt    Include css js files in jsp pages   lt link href   lt c url value   resources style css    gt   rel  stylesheet  gt    Don t forget to declare taglib in your jsp   lt    taglib uri  http   java sun com jsp jstl core  prefix  c    gt

User · Answer

In a situation where you are using just spring and not spring mvc  take the following approach   Place the following in servlet dispatcher   lt mvc annotation-driven   gt                  lt mvc resources mapping   css     location   WEB-INF assets css    gt   lt mvc resources mapping   js     location   WEB-INF assets js    gt    As you will notice  css for stylesheet location  doesn t have to be in  resources folder if you don t have the folder structure required for spring mvc as is the case with a spring application Same applies to javascript files  fonts if you need them etc   You can then access the resources as you need them like so   lt link rel  stylesheet  href  css vendor swiper min css  type  text css    gt   lt link rel  stylesheet  href  css styles css  type  text css    gt    I am sure someone will find this useful as most examples are with spring mvc

User · Answer

If you using java-based annotation you can do this     Override     public void addResourceHandlers ResourceHandlerRegistry registry            registry addResourceHandler   static      addResourceLocations   static             Where static folder   src       ---main      ---java      ---resources      ---webapp          ---static              ---css              ---

User · Answer

You cant directly access anything under the WEB-INF foldere  When browsers request your CSS file  they can not see inside the WEB-INF folder   Try putting your files css css folder under WebContent    And add the following in dispatcher servlet to grant access     lt mvc resources mapping   css     location   css     gt    similarly for your js files   A Nice example here on this

User · Answer

Put your style css directly into the webapp css folder  not into the WEB-INF folder   Then add the following code into your spring-dispatcher-servlet xml    lt mvc resources mapping   css     location   css     gt    and then add following code into your jsp page   lt link rel  stylesheet  type  text css  href  css style css   gt    I hope it will work

User · Answer

you need declare resources in dispatcher servelet file below is two declarations   lt mvc annotation-driven   gt   lt mvc resources location   resources   mapping   resources       gt

User · Answer

You should put the folder containing css and js files into  webapp resources   If you ve put them in  src main java   you must change it  It worked for me

User · Answer

First you need to declare your resources in dispatcher-servlet file like this     lt mvc resources mapping   resources     location   resources folder     gt    Any request with url mapping  resources    will directly look for   resources folder    Now in jsp file you need to include your css file like this     lt link href   lt c url value   resources css main css    gt   rel  stylesheet  gt    Similarly you can include js files   Hope this solves your problem

[java] How to include js and CSS in JSP with spring MVC

Examples related to java

Examples related to spring

Examples related to jsp

Examples related to spring-mvc