Unable to locate JavaScript or CSS with Thymeleaf and HTML5

I've been working on a new project that involves Thymeleaf and it's an extension of another application. However, instead of progressing smoothly with the development, I've encountered an issue that has kept me up for most of the night.

The problem is that Eclipse indicates (on its console) that Thymleaf has been loaded when accessing the application. So far, so good! But here's the catch - all my CSS and JS files are missing. The landing page has a link to a simple login.html file:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
</head>
<body>

<div class="login-container animated fadeInDown">
    <div class="loginbox bg-white">
        <form th:action="@{/login}" method="post">

            <div class="loginbox-title"><span style="text-transform: uppercase;" th:text="#{gen.signin}"></span></div>

            <div class="loginbox-textbox">
                <input type="text" id="ssoId" name="ssoId" class="form-control" th:placeholder="#{gen.username}" />
            </div>
            <div class="loginbox-textbox">
                <input type="password" id="password" name="password" class="form-control" th:placeholder="#{gen.passwd}" />
            </div>
<!--            <div class="loginbox-forgot"> -->
<!--                <a href="#" th:href="@{/forgotPassword}" th:text="#{gen.lostPasswd}">Forgot Password?</a> -->
<!--            </div> -->
            <div class="loginbox-submit">
                <input type="submit" class="btn btn-primary btn-block" th:value="#{gen.signin}"/>
            </div>

            <div style="text-align: center;" ><span th:text="#{gen.appVersion}"></span></div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#ssoId').focus();
    });
</script>

</body>
</html>

This references a loginFragment that is defined as follows:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="loginFragment" th:fragment="loginFragment">
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="assets/img/favicon.png" type="image/x-icon" />

    <link th:href="@{/assets/css/bootstrap.min.css}" />
    <link th:href="@{/assets/css/font-awesome.min.css}"/>
    <link th:href="@{/assets/css/beyond-login.css}"/>
    <link th:href="@{/assets/css/demo.min.css}" />
    <link th:href="@{/assets/css/animate.min.css}" />
    <link th:href="@{/assets/css/jquery-ui.css}" />

    <link th:href="@{/assets/css/login.css}"/>

    <link th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}"/>

    <script th:src="@{/assets/js/skins.min.js}" ></script>
    <script th:src="@{/assets/js/jquery-2.2.3.min.js}" ></script>
    <script th:src="@{/assets/js/bootstrap.min.js}" ></script>
    <script th:src="@{/assets/js/slimscroll/jquery.slimscroll.min.js}" ></script>
    <script th:src="@{/assets/js/beyond.js}" ></script>
    <script th:src="@{/assets/js/bootstrap.min.js}" ></script>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

The structure of the webapp folder looks like this:

webapp
    assets
        css
        img
        js
    WEB-INF
        html
            admin
            fragments
            home
            login.html

The landing page utilizes a different fragment to load CSS and JS, but neither fragment can access the CSS and JS files. I've compared it with another project and there doesn't seem to be any noticeable differences. Even the file permissions are identical.

When inspecting the landing page with Firebug, I see the following message:

<script src="/cms-stock/assets/js/jquery-ui.js" type="text/javascript"> 
    Reload the page to get source for: http://localhost:8080/cms-stock/assets/js/jquery-ui.js
</script>

Each time I attempt to call a CSS or JS file in the browser, I end up being redirected back to the landing page.

What am I overlooking here?

Answer №1

Typically, Thymeleaf anticipates that templates will be located in the src/main/resources/templates directory.

As for CSS and JavaScript files, they are usually stored in the default folder src/main/resources/static.

To update your resources folder structure, consider organizing it as follows:

src
   main
      resources
         static
            css
            img
            js
         templates
            admin
            fragments
            home
            login.html

Example of CSS implementation:

<link th:href="@{/css/beyond-login.css}" rel="stylesheet" />

Example of JS implementation:

<script type="text/javascript" th:src="@{/js/beyond.js}"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS encounters a missing Grpc-Web module

I have just finished setting up a VueJS application that includes TypeScript functionality. After running the command: protoc -I=. service.proto --js_out=import_style=typescript:. --grpc web_out=import_style=typescript,mode=grpcwebtext:. I now have the ...

Dynamic binding issue causing audio event to not fire

Currently, I have an <audio> element that is playing audio. When I manually add the event listener onplay in the HTML code, it functions as expected. <audio onplay="alert('t')" .... It's working... However, when I attempt ...

Protractor - Error: prop is undefined

Need assistance in identifying an error. Currently, I am learning Protractor and attempting to create a basic test using Page Object. //login_pageObject.js let loginContainer = function() { this.usernameInput = $("input.login-form-01"); this.passwordInp ...

The function in the method (in quasar) is not activated by the @change event

When I select an option, I am trying to retrieve the selected value in a function called within my methods. However, the function does not seem to be triggering. This is my code: From the template : <q-select filled v-model="invoice_product.tarri ...

Is it possible for me to search within a retrieved document using Mongoose?

My schema is structured as follows... var TerritorySchema = new Schema({ user: Schema.Types.ObjectId, streets: [streets_schema] )}; var StreetsSchema = new Schema({ name: String, odd: [block_schema], even: [block_schema], tags: [S ...

Using cannonjs and Three.js to connect a physics body with a visual mesh

I have written the code below to create two spheres using cannonjs with Three.js for rendering. var world, mass, body, shape, timeStep=1/60, camera, scene, renderer, geometry, material, mesh; initThree(); initCannon(); animate(); func ...

Is there a method to keep the color of navigation links active even when the cursor is not directly over the element?

In my navbar, I'm facing an issue where the color of the nav links returns to white when the hover cursor leaves the element. Is there a way to keep the color of the nav links even when the cursor is not on the hover elements? To illustrate, I've ...

Slider Footer Player for Rdio

I am currently working on replicating the interactive player footer design used by rdio (). When you click on the footer, a panel elegantly slides up to reveal additional content. Another example of this functionality can be seen on the website teehan lax; ...

What is the mechanism that guides a reverse while loop to determine its endpoint in JavaScript?

Lately in my exploration of JavaScript, I've discovered that reverse while loops are more efficient. They are often written in this manner: var i = someArray.length; while (i--) { console.log(someArray[i]); } I decided to test it out and noticed ...

What is the best way to loop through JSON properties and then assign their values to elements within an array?

After searching for solutions similar to my goal, I have yet to find one that fits exactly what I need. JSON is still new to me, so any guidance is welcome. In my ASP.NET MVC 5 application, the Web API controller returns the following JSON: { "id": ...

Trying to extract data from the ASX website's table using web scraping techniques

My goal is to extract the current stock value from the ASX.com.au website. Specifically, I am interested in retrieving the current ASX value, which can be located here. The value I am looking for is in the second td from the left, currently standing at 30 ...

Issue when sending PHP Papa Parse object through AJAX

I am currently working on extracting a CSV local file in PHP using AJAX and have found success with Papa Parse. However, I am facing difficulties passing the results with AJAX. Despite trying various methods such as JSON.stringify, passing only the first f ...

Exporting a class from an index.ts file may result in a problem where the injected constructor is

Utilizing an index.ts file to manage exports, following the guidelines outlined in the Angular 2 style guide (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure), has been successful throughout my application deve ...

Vue Custom Element encountering issues when generating independent JavaScript files in the Dist directory

I recently followed the instructions for registering and utilizing custom elements as outlined here: https://alligator.io/vuejs/custom-elements/ For my project, I am using the standard Webpack template for Vue. After executing the command npm run buil ...

Create an array that can contain a mix of nested arrays and objects

Working on my project using Angular and TypeScript includes defining an array that can contain arrays or objects. public arrangedFooterMenu: IMenuItemType[][] | IMenuItemType[] = []; typesOfData.forEach(type => { let filteredData: IMenuItemType | ...

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

Show pictures directly from multipart/form-data parsers without the need to save them

Within this inquiry, the process involves saving images uploaded via multipart/form-data parsers in a temporary folder using const tempPath = req.file.path. Subsequently, these images are then transferred to a designated directory using const targetPath = ...

Solving the puzzle of complex polymorphic object model deserialization in Java Jackson: Facing the JsonMappingException error – Unexpected token (START_OBJECT) instead

I am working with a hierarchy of objects described as follows: A B extends A C extends B D extends B E extends C F extends A and contains a reference to A The annotation for class A is defined as: @JsonTypeInfo(use=JsonTypeInfo.Id.CLASS,include=Jso ...

Tips for incorporating a User ID object into an Ajax request

Currently, I am delving into the world of web development and tackling a client-server project that involves allowing users to authenticate themselves and store their blood pressure readings. While the authentication part is functioning properly, I am enco ...

Using Angular to create dynamic CSS animations

Hey there! I'm currently working on developing a sleek horizontal menu that may have elements extending beyond the window's x-axis. The navigation through the menu is managed by utilizing arrow keys within an Angular controller. My goal is to in ...