spring-boot 404 error in serving .js, .css files to html templates

Question

I am using spring boot and was trying to host HTML pages that use angular js. My folder structure is :

I referred to a lot of other question on SO and even spring.io guide on spring boot and what I understood was that we are supposed to keep our html templates in templates folder and all the .css, images, .js files in static folder. I have done the same, but whenever the page loads , only the html is rendered and browser get 404 for all .css and .js files.

I have include .css and .js in my HTML in the following manner :

<script src="/js/socket.io/socket.io.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/demoApp.js"></script>

I tried all the combinations like : src="../static/js/socket.io/socket.io.js" or src="js/socket.io/socket.io.js" but always I am getting 404 for these files, in the browser.

I checked the spring boot logs and this is what it says :

2016-07-24 21:08:05 WARN  PageNotFound:1139 - No mapping found for HTTP request with URI [/js/demoApp.js] in DispatcherServlet with name 'dispatcherServlet'
2016-07-24 21:08:05 DEBUG DispatcherServlet:997 - Successfully completed request

I am unable to understand how to solve the issue, please help !!!

Note : I have not written view resolver code because according to my understanding spring boot automatically picks up static content from static folder. Please correct me if I am wrong.

Edit : Adding my pom file :

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.5.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j</artifactId>
        </dependency>
        <!--Alexa Dependencies -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.3.2</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.directory.studio</groupId>
            <artifactId>org.apache.commons.io</artifactId>
            <version>2.4</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.amazon.alexa</groupId>
            <artifactId>alexa-skills-kit</artifactId>
            <version>1.1</version>
        </dependency>
        <dependency>
            <groupId>com.amazonaws</groupId>
            <artifactId>aws-lambda-java-core</artifactId>
            <version>1.0.0</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.amazonaws</groupId>
            <artifactId>aws-java-sdk-dynamodb</artifactId>
            <version>1.9.40</version>
        </dependency>

    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <verbose>true</verbose>
                    <source>1.8</source>
                    <target>1.8</target>
                    <showWarnings>true</showWarnings>
                </configuration>
            </plugin>
        </plugins>
    </build>

That looks like it should be correct as mine is set up this way and I do not need to refer to static. I am using Freemarker templates of which some have Angular and it works. Can you share the POM file for your project? — Rob Baily, Jul 24 '16 at 18:31
yea sure , edit done to show the pom file, @RobBaily please check !! — sensitive_piece_of_horseflesh, Jul 25 '16 at 02:53
This topic might be interesting for you : http://stackoverflow.com/questions/29953245/configure-viewresolver-with-spring-boot-and-annotations-gives-no-mapping-found-f — AchillesVan, Jul 25 '16 at 10:16
@Georgesvanhoutte thanks a lot, it was helpful, but as I answered , just extending the WebMvcAutoConfiguration class helped and I did not have to give any view resolver or create any new controller. — sensitive_piece_of_horseflesh, Jul 26 '16 at 05:45

score 0 · Answer 1 · answered Jul 25 '16 at 07:18

0

I see you are using thymeleaf so try to access your resources like this :

<script th:src="@{/js/socket.io/socket.io.js}"></script>
<script th:src="@{/js/moment.min.js}"></script>
<script th:src="@{/js/demoApp.js}"></script>

Also and if this does not work can you add your index.html.

answered Jul 25 '16 at 07:18

Lazar Lazarov

2,412
4
26
35

1

sorry I had to udpate this, I have removed thymleaf because I am using angularjs for UI. – sensitive_piece_of_horseflesh Jul 25 '16 at 09:54

score 0 · Answer 2 · answered Jul 25 '16 at 09:59

I have found the problem , everything was correct but : 1) I was not extending my Application class from WebMvcAutoConfiguration.

@SpringBootApplication
@EnableWebMvc
public class HLACUIApplication extends WebMvcAutoConfiguration {

    public static void main(String[] args) {
        SpringApplication.run(HLACUIApplication.class, args);
    }

}

This is how the application class should be.

2) I don't need to use templates folder because I am using angularjs and not thymeleaf. I have put everything in static folder.

score 0 · Answer 3 · edited May 15 '19 at 16:56

I was facing the same issue. I think you are having html code like below:

<html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Insert title here</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="/css/bar.css" />
    <script src="/js/foo.js"></script>

    </head>
    <body>
        <div>Welcome to Foo!</div>
    </body>
    </html>

I solved the problem by adding type="text/javascript" to the <script> element. In Spring Boot applications it's required to define type="text/javascript", otherwise it's not going to load.

The solution for your example would look like this:

    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Insert title here</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="/css/bar.css" />
    <script type="text/javascript" src="/js/foo.js"></script>

    </head>
    <body>
        <div>Welcome to Foo!</div>
    </body>
    </html>

score 0 · Answer 4 · answered Sep 14 '18 at 12:46

0

In my case with thymeleaf, helped when I skipped '/' before 'js'.

Example, instead of

<script src="/js/demoApp.js"></script>

I've put

<script src="js/demoApp.js"></script>

answered Sep 14 '18 at 12:46

Janusz S

1
1

score -1 · Answer 5 · edited May 27 '21 at 06:37

-1

If you are using Eclipse IDE right click on Project Properties/Project Facets

edited May 27 '21 at 06:37

Lova Chittumuri

2,994
1
30
33

answered May 26 '21 at 18:53

sit918

1

spring-boot 404 error in serving .js, .css files to html templates

5 Answers5