Spring-Boot ResourceLocations not adding the css file resulting in 404
If you move you the whole static
directory into the resources
and totally remove the addResourceHandlers
configuration, then everything works fine.
That means that resources structure would look like the following image:
CSS not loading in Spring Boot
You need to put your css in /resources/static/css
. This change fixed the problem for me. Here is my current directory structure.
src
main
java
controller
WebAppMain.java
resources
views
index.html
static
css
index.css
bootstrap.min.css
Here is my template resolver:
public class WebAppMain {
public static void main(String[] args) {
SpringApplication app = new SpringApplication(WebAppMain.class);
System.out.print("Starting app with System Args: [" );
for (String s : args) {
System.out.print(s + " ");
}
System.out.println("]");
app.run(args);
}
@Bean
public ViewResolver viewResolver() {
ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
templateResolver.setTemplateMode("XHTML");
templateResolver.setPrefix("views/");
templateResolver.setSuffix(".html");
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver);
ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(engine);
return viewResolver;
}
}
And just in case, here is my index.html:
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Subscribe</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap -->
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="css/index.css" rel="stylesheet" />
</head>
<body>
<h1> Hello</h1>
<p> Hello World!</p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Spring Boot project with static content generates 404 when running jar
It turns out that whilst Spring Boot is being clever at adding the various resource directories to the classpath, Maven is not and it's up to you to deal with that part. By default, only src/main/resources
will be included in your JAR. If you create a folder called /static
in the root of your project (as implied by the blog post) then it will work fine whilst using the spring-boot:run Maven goal but not once you create a JAR.
The easiest solution is to create your /static
folder inside /src/main/resources
and then Maven will include it in the JAR. Alternative you can add additional resource locations to your Maven project:
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
<resource>
<directory>static</directory>
<targetPath>static</targetPath>
</resource>
</resources>
I hope this is useful to someone, it's kind of obvious when you step back and look at how Maven works but it might stump a few people using Spring Boot as it's designed to be pretty much configuration free.
Spring Boot CSS stripped
If you check your browser console (e.g. in Chrome), my guess you will see HTTP 404 Not found for your CSS files. The problem is with your URL path to CSS.
The main point is that there is a difference how files (.html, .css) are stored in your JAR file (or in your source code) and how they are served by HTTP server. As far as I see you are using thymeleafs and therefore (my guess again), your HTML template files can be served for different kind of URLs (like /
, /book/23
etc.) and therefore I don't recommend to address CSS files with relative URLs (as you did).
As CSS files are stored in static
directory, they should be automatically served by spring boot for /**
pattern, ie. if you don't use any context path, your CSS should have following URL: /css/main.css
.
If you want to be very correct and be prepared that your web application can be in different "context", you should use something like <link rel="stylesheet" th:href="@{/css/main.css}">
Serving static content from Spring boot results in 404 whitelabel error page
Ok, I made a beginners mistake. As @chrylis mentioned in the comments, I removed the ///
in front of file:
. I did some test runs, and as it appeared, I had the following entry in my application.properties
: myapplication.picture.basefolder=/myapplication/storage
. It missed a trailing slash. So I updated it to myapplication.picture.basefolder=/myapplication/storage/
, and my problem was fixed.
Related Topics
How to Change the CSS of Color of Select2 Tags
Nested Column Flexbox Inside Row Flexbox with Wrapping
Getting the Right Font-Size on Every Mobile Device
How to Make Elements Flow from Bottom to Top
How to Make a Hard-Edged Gradient on a Large Element
How to Load One Style Sheet for Mobile Devices and One for Desktops
Draw a Line That Doesn't Get Thicker When Image Stretches
Css3 Animation Keep Reverting to Original State
Css: Set Font Weight Depending on Fallback Font
Content of Div Affects Horizontal Alignment, Inline-Block Issue
Macos Chrome Horizontal Scrollbar Not Disappearing
CSS Equivalent to Photoshop's Justify-All
Last-Child and Last-Of-Type Not Working in SASS
What Is Element.Style and Why Is It Overriding My CSS Settings
Bootstrap 4 Multiple Fixed Navbars with Animated Shrink
Select Element Based on Child Class
What Browsers Support CSS #Parent > .Direct-Child Notation? (No Jquery)