3

I've been trying to get this working but no luck after several hours.

My structure is like this:

 src
└───  main
    ├───  java
    └───  resources
        ├───  META-INF
        │   └───  resources
        │       └───  bootstrap
        │           ├───  css
        │           └───  js
        ├───  templates
        │   └─── index.html
        └─── application.properties

Here is the WebConfig class:

@Configuration
@EnableWebMvc
public class WebAppConfig extends WebMvcConfigurerAdapter {

    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**")
            .addResourceLocations("/resources/");
    }

}

If I use link to a web resource, it works:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>

If I'm trying to include a static resource, it doesn't work:

<link type="text/css" rel="stylesheet" href="../../../resources/bootstrap/css/bootstrap.min.css" 
    data-th-href="@{/resources/bootstrap/css/bootstrap.min.css}" />

Any help is highly appreciated.

Thank you

Mahozad
  • 18,032
  • 13
  • 118
  • 133
Raducu
  • 81
  • 1
  • 8

3 Answers3

6

Avoid webapp folder with spring boot

Do not use the src/main/webapp directory if your application will be packaged as a jar. Although this directory 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.

Where to place static files then?

  • Spring Boot serves static files in these folders (relative to /src/main/resources/):

By default Spring Boot will serve static content from a directory called /static (or /public or /resources or /META-INF/resources).

I suggest you reorganize your webapp files into /src/main/resources/static

Other answers

EDIT AFTER COMMENTS - Path to the static files

When accessing static files, the static folders (listed above) are the path's root.

Thus, to access your css file:

  • file in project: META-INF/resources/bootstrap/css/bootstrap.min.css
  • url: http://localhost:8080/bootstrap/css/bootstrap.min.css
  • link tag: <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
  • link tag: <link type="text/css" rel="stylesheet" data-th-href="@{bootstrap/css/bootstrap.min.css}" />
Community
  • 1
  • 1
alexbt
  • 16,415
  • 6
  • 78
  • 87
  • Hi @Alex, thank you so much for your reply, really much appreciated. Sorry for late reply BTW but have been to work all day. I've changed the structure with META-INF/resources and there is where I've put all my assets, then from the index.html I wrote . Apparently still doesn't work for some reason. I'm not sure what else to do though. – Raducu Oct 17 '16 at 20:27
  • can you update your question and include your new struture ? – alexbt Oct 17 '16 at 20:42
  • @Alex, the question has been updated :) Thank you so much – Raducu Oct 17 '16 at 20:48
  • Did you also update your configuration, sush as "setPrefix"... ? Also, your link tag uses both href and data-th-href, isn't suppose to be either href or th-href ? Also, your href is not relative, try : – alexbt Oct 18 '16 at 09:38
  • Hi @Alex, thank you for your reply. Sorry forgot to amend that on here, please see my latest update, I've removed the thymeleaf config class as it's no more necessary. I've seen online you can keep both: href and data th-href and should work. However, with both or only one still doesn't work. I'm not entirely sure where the problem lies. I've changed the href as you suggested but made no difference. – Raducu Oct 18 '16 at 16:41
  • Your index page does load ? and fail on the -css tag ? You may try to access the css file directly from the browser, that way you can try many uris and see which one works. Also, are you sure bootstrap.min.css is in the folder ? Is your project on accessible on github? – alexbt Oct 19 '16 at 02:05
  • Hi @Alex, My page does load successfully, however there is no styling as the css and js couldn't be loaded. I've tried already to access them directly but it doesn't allow me because of the login (spring-boot security).After I've added the "permitAll()" in spring-boot security config, it didn't go straight to login page (as it used to without adding the permission) but I couldn't see any resource either. – Raducu Oct 19 '16 at 11:55
  • The link looked like a resource should be displayed (haven't been redirected to login by the URL) but still only the login page I've seen (even though the URL sayd I should see the bootstrap css). Yes, all the resources are there, I've checked all of them thoroughly last night. Unfortunately, it hasn't been pushed to github. Thank you so much – Raducu Oct 19 '16 at 11:55
  • I've re-created the same structure as yours. I edited the answer to provide example on how to access your css file – alexbt Oct 19 '16 at 23:51
  • Finally I've sorted it. It was from the login controller. Now, the only issue I have whenever a user logs in, it's being redirected to my resource folder, and not index page, hence I've removed it from the controller. Anyway, thank you so much for your help. I really appreciate your help :) – Raducu Oct 20 '16 at 23:28
2

The issue has been solved. Unfortunately the problem wasn't from any of the above, it was from a controller mapped to "/". If you have the same problem I had, please make sure you don't have anything mapped to "/". Now all resources are accessible through the URL.

My new structure is as follow:

src
   main
       java
       resources
           static
               bootstrap
                  css
                  js
       templates
           index.html
       application.properties

Here is the WebConfig class:

@Configuration
@EnableWebMvc
public class WebAppConfig extends WebMvcConfigurerAdapter {

    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**")
            .addResourceLocations("/resources/");
    }

}

The link is being included in the HTML as:

<link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" 
    data-th-href="@{/bootstrap/css/bootstrap.min.css}" />
Raducu
  • 81
  • 1
  • 8
0

if you are facing such error after Spring Web MVC 5+

"The type WebMvcConfigurerAdapter is deprecated"

@Configuration
public WebConfig implements WebMvcConfigurer {
    // 
}

https://www.baeldung.com/web-mvc-configurer-adapter-deprecated

Mevlüt Beder
  • 99
  • 4