Where to put static files such as CSS in a spring-boot project?
SpringSpring BootSpring Problem Overview
In my current spring-boot project, my views have this line:
<link href="signin.css" rel="stylesheet"/>
to reference a static css file. When I run the project, and access one of the views which reference this file, I get a 404 not found error or a 403 unauthorized error, depending where I put the file inside the project.
I try this so far:
src/main/resources/static/css (with this, I use css/signin.css instead of signin.css)
src/main/resources/templates/static/css (with this, I use css/signin.css instead of signin.css)
src/src/main/resources/templates/acesso (same folder of the html file)
what the right place to store this type of files?
Spring Solutions
Solution 1 - Spring
Anywhere beneath src/main/resources/static is an appropriate place for static content such as CSS, JavaScript, and images. The static directory is served from /. For example, src/main/resources/static/signin.css will be served from /signin.css whereas src/main/resources/static/css/signin.css will be served from /css/signin.css.
The src/main/resources/templates folder is intended for view templates that will be turned into HTML by a templating engine such as Thymeleaf, Freemarker, or Velocity, etc. You shouldn't place static content in this directory.
Also make sure you haven't used @EnableWebMvc in your application as that will disable Spring Boot's auto-configuration of Spring MVC.
Solution 2 - Spring
Apart from placing it anywhere beneath src/main/resources/static and not using @EnableWebMvc, you'll need to authorize access to your js or css folder especially if you have spring-boot-security in you classpath. You'll add something like this:
@Configuration
@EnableWebSecurity
public class MainSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/home", "/js/**", "/css/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.permitAll();
}
}
Then in your HTML:
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>
Solution 3 - Spring
You can use Thymeleaf http://www.thymeleaf.org/
Example
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="@{/css/signin.css}"/>
</head>
<body>
</body>
</html>
Remember to add xmlns and xmlns:th in your html tag.
Check your application.properties:
spring.resources.add-mappings=true
If that key is set to false, spring boot app will not load any resources.
Solution 4 - Spring
Disabling @EnableWebMvc helped me to resolve issue.
Solution 5 - Spring
I use Spring-Boot 2.0.2
I still keep @EnableWebMvc annotation in my webConfig.java and override addResourceHandlers() method to help browser reaches css and javascript files through http request.
This is the webapp directory's structure
.
webConfig.java
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "example.com")
public class WebConfig implements WebMvcConfigurer {
// =======================================
// = Bean Config =
// =======================================
@Bean
public InternalResourceViewResolver getInternalResourceViewResolver(){
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/WEB-INF/jsp/");
resolver.setSuffix(".jsp");
return resolver;
}
// =======================================
// = Override Methods =
// =======================================
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfs/**")
.addResourceLocations("/WEB-INF/pdfs/");
registry.addResourceHandler("/css/**")
.addResourceLocations("/WEB-INF/css/");
registry.addResourceHandler("/js/**")
.addResourceLocations("/WEB-INF/js/");
}
}
index.jsp head tag:
<head>
<title>Title</title>
<!-- Custom styles for this template -->
<link href="css/cover.css" rel="stylesheet">
</head>
hope it helps you.
Solution 6 - Spring
I use Spring-Boot with Thymeleaf http://www.thymeleaf.org/
This is the directory's structure like @Andy Wilkinson Response
Example
<link rel="stylesheet" href="../static/css/w3.css" th:href="@{/css/w3.css}">
Solution 7 - Spring
I found that if I put my signin.css under src/main/resources/META-INF/resources/static/css/signin.css, then I could access it using /css/signin.css
Not sure why though.
Solution 8 - Spring
In my case to reference files inside css and js folders like this:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">
I had to place the folders in webapp folder. I have the following folder structure:
Myapp
-src
-main
-java
-resources
-static
-templates
-webapp
-resources
-WEB-INF
I mean if i had placed the css and js folders in resources folder (under main) it would have been:
<link href="../resources/css/carousel.css" rel="stylesheet">
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<script src="../resources/js/bootstrap.min.js"></script>
If i place them in static folder (under resources) it doesn't work.
Solution 9 - Spring
When i used:
src/main/resources/static/css.
my views have this line:
<link rel="stylesheet" href="/css/signin.css" />
Solution 10 - Spring
- src/resource/static/css
- src/resource/static/js
- src/resource/static/images
Not use @EnableWebMvc if you are using spring boot and check spring sercurity.
Solution 11 - Spring
Put the required files inside static folder in spring boot. And then you can access the required files inside the jsp directly.
Hope it helps as it worked for me.