Where to put static files such as CSS in a spring-boot project?

Question

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?

Andy Wilkinson · Accepted Answer · 2017-08-03T09:25:53.710

128

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.

edited Aug 03 '17 at 09:25

answered Nov 27 '14 at 14:36

Andy Wilkinson

108,729
24
257
242

5

bad luck for me, none of the posted solutions here on SO worked for me :/ – mfaisalhyder May 20 '16 at 21:43
2

Is there any configuration which needs to be done to make spring boot use src/main/resources/static as the default location? It's not picking up my css unless I load it from a CDN with a full url. – mojave May 07 '17 at 21:35
7

No, that's the default location. Just make sure you haven't used `@EnableWebMvc` in your application as that will disable Spring Boot's auto-configuration of Spring MVC. – Andy Wilkinson May 08 '17 at 13:24
Hi @AndyWilkinson, May I know how to handle the case when I have to use EnableWebMvc in my Spring Boot App. – Akash Goswami Sep 12 '17 at 18:47
Why would you have to use `@EnableWebMvc` rather than a `WebMvcConfigurerAdapter`? – Andy Wilkinson Sep 13 '17 at 09:28
Thank you. This answer worked perfectly for me. I had been looking for nearly an hour to figure this out! It would be really helpful to have a link or something showing where you found this information. – Kylon Tyner Mar 23 '18 at 21:48
Thanks for this, Andy. I spent over an hour trying out various suggestions as to where to put Javascript files - static, WEB-INF, etc.. My Spring Boot application wouldn't load them. But deleting @EnableWebMVC from a Controller ENABLED loading from these folders as a side effect. Who'd have thought? – rodmclaughlin Feb 17 '19 at 17:13
Removing @EnableWebMvc did the trick for me. I have been working on this one for hours! Wish I had seen this post earlier!! – Hua Feb 20 '19 at 00:25
It doesnt work for me... I have empty project with 1 controller with GetMapping("/") and 1 template in template dir and static/css/style.css. If i try to open it as with default browser - works. If i start Spring Boot and go to localhost:8080/ - html without styles. – andrew17 Dec 25 '19 at 23:36
Removing `@EnableWebMvc` helped me too, thanks! – 0xDEADBEEF Dec 08 '20 at 18:58

score 14 · Answer 2 · answered Mar 31 '18 at 18:26

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>

This worked for me. But isn't this unsafe from a security POV? — Swapnil Ingle, May 17 '20 at 07:33
@SwapnilIngle modify your antMatchers if you want certain resources to be secure. — jpllosa, May 18 '20 at 08:12
Ok, thanks! But is it common/good practice to expose your js and/or CSS resources? — Swapnil Ingle, May 18 '20 at 11:44

score 12 · Answer 3 · answered Feb 02 '18 at 08:51

12

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.

answered Feb 02 '18 at 08:51

scorpion

671
1
9
16

This doesn't work as is. you got to put it in this folder. /src/main/resources/static/css/signing.css – Philip Rego May 11 '19 at 20:10
1

The best answer – Denees Oct 21 '19 at 18:07

ldt · Answer 4 · 2018-06-15T16:44:08.040

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

directory 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.

It might not help now. Question was asked in 2014. Try to answer recent question. Will help you and me both.... — MyTwoCents, Jun 15 '18 at 13:50
@Ashish451 sorry if it is not the case, but if the answer is good and contributes, it isn't wrong answering old questions :). https://meta.stackexchange.com/questions/23996/does-it-make-sense-to-answer-old-questions — tk3, Jun 15 '18 at 16:17
Not working. try using this `registry.addResourceHandler("/WEB-INF/**").addResourceLocations("classpath:/WEB-INF/");` — hamza saber, Dec 27 '19 at 12:07

score 6 · Answer 5 · edited May 21 '18 at 06:28

6

Disabling @EnableWebMvc helped me to resolve issue.

edited May 21 '18 at 06:28

Andrew Tobilko

48,120
14
91
142

answered Oct 26 '17 at 08:38

user2069692

79
1
2

score 4 · Answer 6 · answered Jun 05 '20 at 07:18

4

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}">

answered Jun 05 '20 at 07:18

Joao Ferreira

395
4
9

1

Simply as this sample, remove static keyword in the thymleaf declaration if you forgot. This sample run perfectly. – Vifier Lockla Dec 03 '20 at 18:23

score 2 · Answer 7 · answered Aug 08 '17 at 17:32

2

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.

answered Aug 08 '17 at 17:32

rrudland

410
3
8

Kike Lebowski · Answer 8 · 2017-10-04T14:52:02.673

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.

I that really working? I can't let it work with names like bootstrap.min.css or bootstrap.min.js, while is working perfectly with names with no dots in basename, like somestyle.css or somescript.js. See https://stackoverflow.com/questions/47722325/spring-serving-static-contents-with-dots-in-filename — Marcoc1712, Dec 09 '17 at 18:43

score 1 · Answer 9 · answered May 05 '20 at 12:09

1

When i used:

src/main/resources/static/css.

my views have this line:

<link rel="stylesheet" href="/css/signin.css" />

answered May 05 '20 at 12:09

Maksim Khitrov

11
2

score 0 · Answer 10 · edited Jul 01 '22 at 14:53

0

src/resource/static/css
src/resource/static/js
src/resource/static/images

Don't use @EnableWebMvc if you are using spring boot and check spring security.

edited Jul 01 '22 at 14:53

Apostolos

10,033
5
24
39

answered Jul 30 '20 at 11:30

Võ Văn Tâm

1

score 0 · Answer 11 · answered Feb 27 '21 at 17:35

0

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.

answered Feb 27 '21 at 17:35

Yoshita Mahajan

443
4
6

Where to put static files such as CSS in a spring-boot project?

11 Answers11

Linked

Related