Where Do CSS and JavaScript Files Go in a Maven Web App Project

Where do CSS and JavaScript files go in a Maven web app project?

So if you have your DispatcherServlet configured in a REST like URL pattern such as / then css files would go under src/main/webapp/resources

Just to clarify this is what I had to do:

1. Make sure that in your servlet-context.xml you have as follows:

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

2. Create a folder if does not already exist under webapps called resources

3. Place your css folder along with css files there

4. Reference my css file as follows:

   <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/960.css"/>
   

How to make HTML read CSS in a Maven project

From the information you provided, I can guess you created a new maven project as [x]Create a simple project (skip archetype selection). If you did create the project this way it will not create a WEB-INF folder by default.

If you do New->Maven Project->Next-> and select a maven-archetype-webapp by default you will end up with a WEB-INF folder. NOTICE: the "webapp" archetype.

And regarding where to put the .css files. Maven's Standard Directory Layout suggest src/main/webapp for Web application resources.
This other Q&A has a good answer for where to .css files for web projects.

CSS and JS file loactions in a maven project

point 1: Move your web content files (html/jsp/js/css) out of web-inf, create respective folders directly under webapp.

point 2: pls share the code snippet of how you are referring to the image or js or css from your HTML/JSP page.

E.g. In the below folder structure the image/css/js resources are referred in html/jsp as

 webapp
   |
   |__ pages
   |    |___ index.jsp
   |    |___ index.html
   |
   |__ css
   |    |___ style.css
   |    
   |__ js
   |    |___ myjs.js

Best location to put your CSS and JS files in a Mavenized Java Web app?

If you don't need to filter CSS and JS files, I would simply put them in src/main/webapp (if you put them in src/main/resources, they will end up in target/classes and in WEB-INF/classes in the WAR which is very unlikely what you want). If you need to filter them, additional resources can be included in the WAR using the webResources parameter. Have a look at Adding and Filtering External Web Resources for more details.

How to externally add a javascript file to a JSP in a maven project?

Static Resources like JS, CSS, Images,etc visible from webapp folder in a web application.

So, you can create js folder under webapp folder and place your list.js file inside it.

Also, you need to tell Spring to not process these static resources path.

Looks like you had defined your Spring Configuration in Java Classes i.e. WebConfig. You need to add below code

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
  registry.addResourceHandler("/js/**").addResourceLocations("/js/");
}

Lastly, change your path in jsp file like this

<script
    src="${pageContext.request.contextPath}/js/list.js"></script>

Hope it helps to solve your problem.

mvn tomcat:run does not pick up css files

tomcat:run use the src folder, not the target. Your css files are in a good place in src/main/webapp/css. They should be available from a browser.

mvn -X tomcat:run prints the configuration. Some interesting parts:

[INFO] Preparing tomcat:run
[DEBUG] (s) resources = [Resource {targetPath: null, filtering: false, 
    FileSet {directory: /workspace/webtest1/src/main/resources, 
    PatternSet [includes: {}, excludes: {}]}}]
...
[DEBUG] (f) warSourceDirectory = /workspace/webtest1/src/main/webapp

You can find some more details in this answer: mvn tomcat7:run - How does it work?

For the second question/update: I think you mapped a Spring servlet to /* and it does not handle static content. Post your web.xml and Spring configuration. Maybe you just need a mvc:resources into your Spring configuration. This also could be useful: How to handle static content in Spring MVC?

I can't configure the resources path in Maven

This is a duplicated question: I found the solution here.

Where do CSS and JavaScript files go in a Maven web app project?

but instead doing it on xml as @Viriato said,

Just to clarify this is what I had to do:
Make sure that in your servlet-context.xml you have as follows:
<resources mapping="/resources/**" location="/resources/" />,
create a folder if does not already exist under webapps called resources,
place your css folder along with css files there,
reference my css file as follows:
<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/960.css"/>

I decided to do a java based configuration because I already had my Config.java class.
So, I extended my Config.java class to the abstract class WebMvcConfigurerAdapter in order to use the method addResourceHandlers (which you have to Override if you want to use it)

This is what I had to do:

public class Config extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(final ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    }
...
}

Then I had to add the contextpath to my routes:

<script type="text/javascript" src="http://localhost:8585/electronicaDonPepe/resources/js/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="http://localhost:8585/electronicaDonPepe/resources/js/bootstrap.min.js"></script> 

<script type="text/javascript" src="http://localhost:8585/electronicaDonPepe/resources/js/angular.min.js"></script> 

<link href="http://localhost:8585/electronicaDonPepe/resources/css/bootstrap.min.css" rel="stylesheet" />

If you don't know your context path you can use Scriptlets like this:

<%= request.getContextPath() %>

As an example, the code for bootstrap.min.css will be:

   <link href="<%= request.getContextPath() %>/resources/css/bootstrap.min.css" rel="stylesheet" />

If you want to know more about scriptlets you can read this: http://docs.oracle.com/javaee/5/tutorial/doc/bnaou.html

I'm planning to work with Angular so hardcoded routes works for me by now, I don't encourage to do this because this is a bad practice. The user shouldn't be able to see your resources routes and mess around with them.

Thanks for your time.

---

Related Topics