Reputation: 9055

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

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?

Upvotes: 92

Answers (13)

user7023213

Reputation: 3670

In my case with the default spring boot initializer project structure the following works in intellij.

For clarity my html files reside here:

<src/main/resources/templates/html_files_here>

option 1 (when server is running)

<link rel="stylesheet" href="/css/bootstrap.min.css">

option 2 (when viewing html files without server running)

<link rel="stylesheet" href="/static/css/bootstrap.min.css">

Upvotes: 0

Arsalan malik

Reputation: 1

In a Spring Boot project, you can organize your static files, such as CSS files, in the src/main/resources/static directory. This directory is automatically included in the classpath, and Spring Boot will serve the contents of this directory as static resources.

Here's an example directory structure:

src
|-- main
|   |-- java
|   |-- resources
|       |-- static
|           |-- css
|               |-- style.css
|-- ...

In this example, you can place your CSS file (style.css) inside the src/main/resources/static/css directory. When your Spring Boot application runs, the CSS file will be accessible at the path /css/style.css relative to your application's context root.

For example, if your application is running on http://localhost:8080, you can access the CSS file at http://localhost:8080/css/style.css.

Remember that this is the default behavior, and you can customize it by modifying the application's configuration if needed. However, the standard approach is to use the static directory within the resources folder.

Upvotes: -1

Võ Văn Tâm

Reputation: 1

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.

Upvotes: 0

Yoshita Mahajan

Reputation: 453

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.

Upvotes: 0

Joao Ferreira

Reputation: 405

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

Upvotes: 5

Maksim Khitrov

Reputation: 9

When i used:

src/main/resources/static/css.

my views have this line:

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

Upvotes: 1

ldt

Reputation: 71

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.

Upvotes: 7

user2069692

Reputation: 79

Disabling @EnableWebMvc helped me to resolve issue.

Upvotes: 6

jpllosa

Reputation: 2202

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>

Upvotes: 14

scorpion

Reputation: 719

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.

Upvotes: 14

Kike Lebowski

Reputation: 571

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.

Upvotes: 2

rrudland

Reputation: 420

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.

Upvotes: 2

Andy Wilkinson

Reputation: 116041

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.

Upvotes: 134

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

Answers (13)

Related Questions