Spring MVC doesn't load css, js files to static html pages

Question

I disabled the role of the InternalViewResolver in order to access some static pages, html not jsp pages, i made the required changed, indeed i made and i can access my html page, but when i see the browser's console it looks like it didn't bring my local css and js files.

This is my project structure.

This is my header page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>ECommerce view example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script
        src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBR8P_sULnn-egsyhOb6qLYG2oqFshTiwY"></script>
</head>

mvc-config.xml

<?xml version="1.0" encoding="UTF-8"?>
    <beans:beans xmlns="http://www.springframework.org/schema/mvc"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:beans="http://www.springframework.org/schema/beans"
        xmlns:context="http://www.springframework.org/schema/context"
        xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
            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">

        <annotation-driven></annotation-driven>
        <context:annotation-config></context:annotation-config>
        <context:component-scan base-package="ma.s2m.net"></context:component-scan>         
        <resources mapping="/static/**" location="/WEB-INF/static/"></resources>
    </beans:beans>

Mihir Gohel · Answer 1 · 2017-02-08T08:35:32.753

1

From the browser console, it seems your path is invalid.

<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>

resolved to URL: http://localhost:8080/static/css/style.css.

Context root in URL is missing here. Ideally URL should have been something like this. http://localhost:8080/<CONTEXT_ROOT>/static/css/style.css

In your case, as this is static html page, only one correction is required to match the URI with webapp directory.

Make following changes in entry.html and it would work.

<link rel="stylesheet" type="text/css" href="../static/css/style.css"/> <link rel="stylesheet" type="text/css" href="../static/css/login.css"/>

Hope it solves your error.

edited Feb 08 '17 at 08:35

answered Feb 08 '17 at 05:51

Mihir Gohel

316
2
6

it didn't work, i don't know it is so ambiguous like this, i tried all the possible combinations between `mvc-config .xml` and `entry.html` css locations. – Soufiane Rabii Feb 08 '17 at 08:24
can you paste the browser console snapshot here again please. – Mihir Gohel Feb 08 '17 at 08:25
This is the update ``, this is console snapshot `http://localhost:8080/ssytem-ecommerce-prototype-view/css/style.css` **404 not found** – Soufiane Rabii Feb 08 '17 at 08:27
Can you please try with this line. I will modify the answer if it works. `` – Mihir Gohel Feb 08 '17 at 08:29
`http://localhost:8080/ssytem-ecommerce-prototype-view/css/login.css` **404 not found**, it's like it doesn't recognize the root path – Soufiane Rabii Feb 08 '17 at 08:33
one more change. `` – Mihir Gohel Feb 08 '17 at 08:34
No i picked one of the 3 **404 not found** messages, that was only the a snapshot of the full missing resources error logged by the navigator. – Soufiane Rabii Feb 08 '17 at 08:36
I'm afraid that with no `InternalViewResolver` and with no `jsp` pages, it's not possible to load the resources. – Soufiane Rabii Feb 08 '17 at 08:38
Its not the case. If you can upload the code base to some git repo. I can have a look and help to solve – Mihir Gohel Feb 08 '17 at 08:39

score 1 · Answer 2 · answered Feb 08 '17 at 06:04

1

We generally keep the css,js inside resource folder and the hierarchy is as follows:

webapp
  resource
    static
      css
        style.css
      js
        ...
  WEB-INF
    ...

Try with above hierarchy. Change resource-mapping to

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

answered Feb 08 '17 at 06:04

SachinSarawgi

2,632
20
28

It returns `404 not found` on the entire page, not just the resources. – Soufiane Rabii Feb 08 '17 at 08:25

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

0

You have to use the tag to resolve your static css & js. You can refer How to handle static content in Spring MVC?

edited May 23 '17 at 12:24

Community

1
1

answered Feb 07 '17 at 11:35

Mrinal N

93
1
5

it doesn't change anything. i wanna have an access with no helpers, nothing, no jstl, nothing. exactly like what we do in a spring boot application. – Soufiane Rabii Feb 07 '17 at 13:19
your stylesheet links will resolve to webapp/static/css/ directory. As the files are not present in that directory you are getting a 404 error. If you are using a resources tag then you will need to take help of JSTL or spring tag. Another option is to ignore the resource tag and give paths as we give in a static html page. For that all your files should be below the webapp directory as files under WEB-INF folder are secure and can't be directly accessed by a browser client. – Mrinal N Feb 07 '17 at 13:46
it didn't work, i adopted the second option, i replaced my resources under webapp folder, this is the link **** – Soufiane Rabii Feb 07 '17 at 13:57
Try moving the entire contents of static folder along with the entry.html file under webapp directory & use **** – Mrinal N Feb 07 '17 at 14:19
Still nothing, i did what you told me – Soufiane Rabii Feb 07 '17 at 14:42

score 0 · Answer 4 · answered May 08 '18 at 09:27

just noticed remove the / from href attribute the will solve this issue.

please try change

<link rel="stylesheet" type="text/css" href="/static/css/login.css"/>

to

<link rel="stylesheet" type="text/css" href="static/css/login.css"/>

hope can help you.

Spring MVC doesn't load css, js files to static html pages

4 Answers4

Linked