Style Paths In Java EE Applications

Question

I have a Java EE application and in the application I have the following structure.

WEB-INF
    layout
        header.jsp
    styles
        main.css

I want to include the main.css in the header.jsp. Which I am attempting to do with the following (where ... is the path):

<link rel="stylesheet" href="...">

However, I can't seem to get the right path. I have tried each of the following with no luck:

../styles/main.css
/styles/main.css
styles/main.css
/WEB-INF/styles/main.css
WEB-INF/styles/main.css

What is the correct path?

Is the header.jsp being included in another jsp located elsewhere? If so, the path may need to be as if it is coming from that file. It would also help to show the structure from the WebContent directory. — Lipongo, Sep 10 '12 at 01:35

score 14 · Accepted Answer · edited Jun 20 '20 at 09:12

14

First of all, resources in /WEB-INF folder are not directly publicly accessible without a intermediating (front controller) servlet (this also covers JSP files themselves! the <jsp:include> runs at webserver, not at webbrowser). So you've to put CSS (and JS and image) files outside the /WEB-INF folder.

WebContent
 |-- WEB-INF
 |    `-- layout
 |         `-- header.jsp
 |-- styles
 |    `-- main.css
 :

Assuming that it's now in /styles/main.css, then you can reference it as follows:

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

Using ${pageContext.request.contextPath} (which prints the current context path with a leading slash and thus makes the CSS URL guaranteed relative to the domain root) is not necessary per se, but it is your safest bet as the current request URL is unknown. All relative paths in HTML <link>, <script>, <img>, <a>, etc elements are namely namely by the webbrowser resolved relative to the current request URL (as you see in browser's address bar). As long as it's unclear what your request URL is, I can't answer the right CSS path without using ${pageContext.request.contextPath}.

Moved the styles folder out of WEB-INF and changed the path. Still not showing up – Snowy Coder Girl Sep 10 '12 at 02:21
Open page in browser, rightclick and *View Source*. What do you now see as ``? – BalusC Sep 10 '12 at 02:23
It has ` ` – Snowy Coder Girl Sep 10 '12 at 02:23
Open `http://localhost:8080/MyApplication/styles/main.css` in your webbrowser. What do you now see? (by the way, the webbrowser itself would also get exactly this result while processing the retrieved HTML code from your JSP) – BalusC Sep 10 '12 at 02:26
That explains it. Most likely it's still at the wrong place, or you didn't properly rebuild/redeploy/restart the webapp/server. – BalusC Sep 10 '12 at 02:33
Full path (directly copied from Windows explorer of my Eclipse workspace) is `workspace\MyApplication\src\main\webapp\styles\main.css`. Did a mvn clean package and uploaded the new WAR to Tomcat. – Snowy Coder Girl Sep 10 '12 at 02:35
Apparently Maven did something wrong. Sorry, that part is beyond me, I have never used it, it's actually candidate for a new question. I can at least tell that, when you extract that WAR file with a ZIP tool, that you should then see the `/styles` folder in the root with therein the `main.css` file. – BalusC Sep 10 '12 at 02:39
The WAR file does indeed have that structure. – Snowy Coder Girl Sep 10 '12 at 02:42
+1 Thanks for the help. I'll post another about the Maven issue. – Snowy Coder Girl Sep 10 '12 at 02:53
Yes? That would not explain the 404. Is Tomcat certainly restarted? Are you accessing the right Tomcat instance? (for the case that you have multiple Tomcat instances). Don't you have any filters/servlets mapped on `/*` or `/` which are doing some things completely wrong and thus (in)directly cause the 404? – BalusC Sep 10 '12 at 02:57
I would guess the 404 is an access issue, no? I am only running 1 Tomcat. It has restarted (the JSP appears fine). The backend is being controlled by Spring. There is 1 DispatcherServlet configured which handles a `/` url pattern. – Snowy Coder Girl Sep 10 '12 at 03:04
404 is not an access issue. It's simply "page not found". Well, having a servlet on `/` explains it all. It is handling **all** HTTP requests, including those for the CSS file. But Spring only understands how to deal with JSPs. I don't do Spring, but based on questions previously asked, I believe it's not possible to tell it to skip certain resources. You'd need to change the Spring Servlet URL pattern to something more specific, e.g. `/pages/*`, or to bring a [filter](http://stackoverflow.com/a/3593513) in front. This is after all definitely not a Maven problem. – BalusC Sep 10 '12 at 03:10
I found the answer. It has to deal with Spring. – Snowy Coder Girl Sep 10 '12 at 03:10
Yes, I already commented that. See also http://stackoverflow.com/questions/4140448/servlet-mapping-vs – BalusC Sep 10 '12 at 03:12
1

For future people that read this, see http://stackoverflow.com/questions/12344905/css-file-in-a-spring-war-returns-a-404 – Snowy Coder Girl Sep 10 '12 at 03:20
@BalusC Hello. This solved my issue to locate the file. But now they seems to not be readable. I get two others issues ; one saying that `The stylesheet was not loaded because its MIME type, "text/html" is not "text/css".` for bootstrap.min.css and the other saying `SyntaxError: expected expression, got '<'` for jquery.min.js.. Is there some sort of permission denial again ? – Jason Krs Aug 16 '17 at 15:08
@Jason: This is not the default behavior. Something is explicitly overriding content types of CSS/JS files as if they are `text/html` causing the webbrowser to try to parse them as `text/html` instead of `text/css` and `text/javascript`. – BalusC Aug 16 '17 at 15:10
@BalusC Is there a way I can debug this ? They are in `WebContent/resources` and I'm using Pivotal server – Jason Krs Aug 16 '17 at 15:20
@BalusC And something wrong happens. When I click `http://localhost:8080/MyWebApp/resources/js/jquery.min.js` it redirects me to the `index.jsp` page. It does not pring the `jequery` script on screen – Jason Krs Aug 16 '17 at 15:29
@Jason: Apparently you've some sort of authentication or URL rewrite filter in place which does that. – BalusC Aug 16 '17 at 15:39
@BalusC Weird. It's a classic dynmamic web project ; The only things I did is using `<%@ include file="myJS_and_CSS.jsp"%>` to include a file containing declaration of JS and CSS and I used a basic servlet with `doGet` doing `this.getServletContext().getRequestDispatcher("/WEB-INF/views/index.jsp").forward(request, response);` – Jason Krs Aug 16 '17 at 16:09

Style Paths In Java EE Applications

1 Answers1

See also:

Linked