404 error occurs when Spring-Boot fails to include CSS file through ResourceLocations

My spring-boot application is currently running smoothly on a local computer, but I have encountered an issue. When I run mvn package, none of my CSS or JavaScript files located in

/src/main/wepapp/css

are included in the jar file created in the target directory. According to the Spring Boot reference guide,

65.3 Convert an existing application to Spring Boot "Static resources can be moved to /public (or /static or /resources or /META-INF/resources) in the classpath root."

24.1.4 Static Content "Do not use the src/main/webapp folder if your application will be packaged as a jar. Although this folder is a common standard, it will only work with war packaging and it will be silently ignored by most build tools if you generate a jar."

This indicates that I should move all my JS and CSS folders into

/src/main/resources/static

Now my structure looks like this:

/src/main/resources/static/css/
/src/main/resources/static/js/

All of my Thymeleaf templates are still located in

/src/main/resources/templates/

I updated my ResourceHandlers accordingly after moving the CSS files:

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/pdfs/**").addResourceLocations("/pdfs/").setCachePeriod(0);
    registry.addResourceHandler("/img/**").addResourceLocations("/img/").setCachePeriod(0);
    registry.addResourceHandler("/js/**").addResourceLocations("/js/").setCachePeriod(0);
    registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
}
However, despite trying various configurations, I am still facing a 404 error when attempting to access the CSS and JS files from the browser. I have temporarily disabled Spring Security in my test project to simplify debugging. Additionally, I am uncertain about the deployment assembly. Even though I included the necessary folders in the assembly, running "mvn package" does not copy all the contents of my /src/main/static folder into the generated JAR file, while the "templates" folder is copied successfully. In my Thymeleaf layout declaration (/src/main/resources/templates/layout.html), I reference the CSS file like this:

<!DOCTYPE html>
<html>
  <head>
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
    <link rel="stylesheet" type="text/css" media="all"  th:href="@{/css/syncServer.css}"  href="../css/syncServer.css" />
    ...
  </head>
  <body>
      ...
  </body>
</html>

My question is: Is my current configuration correct for finding the CSS files in /src/main/static/css? If so, what other settings do I need to consider?

Additional note:

Test project repository link: [email protected]: TheDictator/sArchitecture.git

Answer №1

By transferring the entire static directory to the resources folder and eliminating the addResourceHandlers setup, the functionality works smoothly.

This adjustment results in a resources layout resembling the image below:

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

Hero Sticky Transition with 100vhDivElement

My code is giving me some trouble. I want the div with text to stay at the bottom of the hero section with a transparent background. When that div reaches the top, it should stick with a black background. The issue is that I have set it in the javascript v ...

Attempting to increase the size of the menu text upon hover action

It seems like a basic mistake on my part, but I just can't seem to make it work. What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only en ...

The MIME type text/html was ignored along with the AddType directive

Encountering an issue where attempting to load a CSS file from a folder results in the console error: "Resource interpreted as Stylesheet but transferred with MIME type text/html". Attempts to resolve this by adding an .htaccess file (in the root/same fold ...

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

What is the best way to target only the immediate children of a div when using tailwindcss?

Here is the HTML code snippet I am working with: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1</div> <di ...

versatile grid tiles with CSS flexibility

Trying to remove the svg elements while keeping the grid layout intact. The svgs are used to maintain a 1:1 aspect ratio for all tiles. UPDATE: Discovered a CSS Solution for this. Simply set aspect-ratio: 1 for the tiles. Is there an alternative soluti ...

Users who are utilizing Internet Explorer are unable to complete the search input field on my website

Hello, I am in the process of creating a website that frequently uses lengthy search terms. To optimize user experience, I have implemented a dropdown search bar inspired by the bootsnipp example below. While I have applied some custom styling to the desig ...

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

I need help with a jQuery sortable feature where I have two lists and can move items between them: $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); My issue arises when I try to implement ...

What could be causing my table to malfunction in IE8?

Is it just me, or do my CSS tables not work on IE8? <div class="main-table"> <div class="row"> <a class="secondary-table" href="#"> <div class="secondary-row"> <div class="secondary-cell"> ...

Sometimes, CSS unicode characters may not render correctly and appear as jumbled symbols like "â–¾"

https://i.sstatic.net/eGvzJ.jpg Every now and then, about 1 in every 100 page refreshes, the unicode characters on my page turn into jumbled nonsense (you might need to zoom in to see it clearly). Specifically, the unicode characters are displayed as â ...

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

Tips for accessing CSS properties on the img tag

I could use some assistance with CSS. I am in the process of creating a tree structure using many <ul> and <li> tags. The issue arises when I have multiple <li> elements with a specific class, each containing an <img> tag. How can ...

Creating a Stylish Navigation Bar with Bootstrap4 - Organizing Elements for Just the Right Look

I am trying to organize my content within a navbar into 3 different 'columns'. I want a logo on the left, some navigation items in the center, and the last element ("Get The App") on the right, but I am facing some challenges. Below is my code s ...

Designing a website using HTML and CSS with the goal of optimizing it to fill

My website includes all the recommended elements in the head area: <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, ...

Replace the typical bootstrap text class with stylish and modern google material icons

As a newcomer to the world of javascript, I acknowledge that my approach may not be ideal... I'm attempting to modify the color of a material icon upon clicking it. Essentially, I want to toggle it on and off. The challenge lies in the code's in ...

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

Achieving equal height divs using Bootstrap

I have a row of 8 divs arranged horizontally, and I am looking to make them all the same height. Right now, their heights vary based on the content inside each one. Can someone offer some assistance? I've attempted multiple solutions without success s ...

Achieve video lazy loading in JavaScript or jQuery without relying on any external plugins

I've been experimenting with lazy loading videos using jQuery. While I've had success with lazy loading images and background-images using the same technique, I ran into issues when trying to apply it to videos. Here's what I've tried s ...

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...