I can't configure the resources path in Maven

Question

I'm not able to get the correct css path

I have this code on my index.jsp head

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="javascript/jquery-3.1.1.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
<script src="javascript/angular.min.js"></script>

Note that if I use this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

css shows correctly.

Here it's my project buildpath

Here it's a similar question not answered

Yes, I left my project buildpath in a picture over the main question. Here it is again: https://i.stack.imgur.com/xcUto.png — Germán Acosta, Dec 29 '16 at 08:40
Exactly what errors are showing up in your browser's development tools and server logs? You need to be looking through both. — nitind, Dec 29 '16 at 09:05
thanks to your comment @nitind I was able to find the solution. I'm not used to look at my browser's development tools so I found there that my js and css files didn't work. I am migrating a spring-mvc project from jsp to angularjs so working code stop working and I don't even realize. Thanks again. — Germán Acosta, Dec 29 '16 at 12:57

score 0 · Answer 1 · answered Dec 29 '16 at 08:27

you can use this cdn for bootstrap

<!-- You can use this link for bootstrap cdn  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

Yes, I know. I'm trying to use the downloaded bootstrap.min.css file. Imagine that I have to show this project without an internet connection. — Germán Acosta, Dec 29 '16 at 08:30

ADH - THE TECHIE GUY · Answer 2 · 2016-12-29T08:42:14.080

use

`<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">`

it works fine

test and verified

here is a check on below,here I added the container class (which is a bootstrap class) => padding of 15px is added on both left and right.

#test{
  background:red;
  height:200px;
  }

<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
<body>
<ul class="list-group">this is  ul tag
  <li class="list-group-item">i didn't applied list-style:none</li>
  <li class="list-group-item">i didn't applied any style to ul,li tags</li>
  <li class="list-group-item">but it's working</li>
  <li class="list-group-item">which meants <strong>bootstrap</strong> is working</li>
</ul>
<div class="container">
  <div id="test"></div>
</div>
  </body>

Hi, linking to a server works fine but that's not what i'm looking for. I'm trying to link the css file from my computer. — Germán Acosta, Dec 29 '16 at 08:37

score 0 · Answer 3 · answered Dec 29 '16 at 08:33

0

Use type attribute in your link tag :

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

answered Dec 29 '16 at 08:33

Taniya

550
2
7

I already tried this but it's the same response. It doesn't work. – Germán Acosta Dec 29 '16 at 08:38

score 0 · Accepted Answer · edited May 23 '17 at 12:24

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.

I can't configure the resources path in Maven

4 Answers4