1

I am really new to Spring Boot, and I am currently going through the book. Spring Boot in action.

I created and complied my first web simple web app fine, expect the css file shows up blank in the console. I have already looked up the following post:

Spring Boot - CSS not loading
Spring Boot CSS Stripped

I am using Thymleaves and my css file is placed within the static folder as the post and book states, but nothing shows up. my current external link, seems to be the correct way too.

 <link rel="stylesheet" th:href="@{/main.css}" />

Although, the css appear to show in the resources in console, the css file remains blank. Below are my files and code.

File Structure:
enter image description here

Template:

body {
    background-color: #cccccc;
    font-family: arial,helvetica,sans-serif;
}
.bookHeadline {
    font-size: 12pt;
    font-weight: bold;

}
.bookDescription {
    font-size: 10pt;
}
label {
    font-weight: bold;
}
         <html xmlns:th="http://www.springframework.org/schema/data/jaxb">
    <head>
    <title>Reading List</title>
    <link rel="stylesheet" th:href="@{/main.css}" />
    </head>
    <body>
    <h2>Your Reading List</h2>
    <div th:unless="${#lists.isEmpty(books)}">
    <dl th:each="book : ${books}">
        <dt class="bookHeadline">
            <span th:text="${book.title}">Title</span> by
            <span th:text="${book.author}">Author</span>
            (ISBN: <span th:text="${book.isbn}">ISBN</span>)
        </dt>
        <dd class="bookDescription">
    <span th:if="${book.description}"
      th:text="${book.description}">Description</span>
            <span th:if="${book.description eq null}">
    No description available</span>
        </dd>
    </dl>
    </div>
    <div th:if="${#lists.isEmpty(books)}">
    <p>You have no books in your book list</p>
    </div>
    <hr/>
   <h3>Add a book</h3>
    <form method="POST">
    <label for="title">Title:</label>
    <input type="text" name="title" size="50"></input><br/>
    <label for="author">Author:</label>
    <input type="text" name="author" size="50"></input><br/>
    <label for="isbn">ISBN:</label>
    <input type="text" name="isbn" size="15"></input><br/>
    <label for="description">Description:</label><br/>
    <textarea name="description" cols="80" rows="5">
    </textarea><br/>
    <input type="submit"></input>
    </form>
    </body>
    </html>

Controller:

package codenotes;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import java.util.List;

@Controller
@RequestMapping("/")
public class BookController {


private BookRepository bookRepository;

@Autowired
public BookController(BookRepository bookRepository) {
    this.bookRepository = bookRepository;
}

@RequestMapping(value = "/{reader}", method = RequestMethod.GET)
public String readerBooks(
        @PathVariable("reader") String reader,
        Model model) {

    List<Book> readingList =
            bookRepository.findByReader(reader);
    if (readingList != null) {

        model.addAttribute("books", readingList);
    }
    return "readingList";
}

@RequestMapping(value = "/{reader}", method = RequestMethod.POST)
public String addToReadingList(
        @PathVariable("reader") String reader, Book book) {
    book.setReader(reader);
    bookRepository.save(book);
    return "redirect:/{reader}";
}
}

Repository:

package codenotes;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
public interface BookRepository extends JpaRepository<Book, Long> {
List<Book> findByReader(String reader);
}
Community
  • 1
  • 1
Sourumeiji
  • 101
  • 4
  • 13

3 Answers3

2

I believe you should read this, how to serve static content:

http://docs.spring.io/spring-boot/docs/1.4.2.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content

To sum it up, your browser is caching your static resources, such as CSS files.

In order to break this behavior, try first clean your browser cache, in google chrome you go to settings then clear browsing data.

Secondly, add these lines to your application.properties file in order to bust the cache:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

or add this instead:

spring.resources.chain.strategy.fixed.enabled=true
spring.resources.chain.strategy.fixed.paths=/**
spring.resources.chain.strategy.fixed.version=v12
Moshe Arad
  • 3,587
  • 4
  • 18
  • 33
  • This seemed to work perfectly. How did you know it was cached? I couldn't tell. The properties, after reading the documentation made lots of sense too. Your a life saver. – Sourumeiji Dec 09 '16 at 12:21
  • I just encountered this problem myself in the past. cheers ;-) – Moshe Arad Dec 09 '16 at 13:05
  • Hi @Moshe Arad, for me css/js applied for the urls `localhost:8080/jobs` or `localhost:8080/customers` etc but not applied for urls like `localhost:8080/jobs/edit?id=123` or `localhost:8080/customer/view?id=123` or `localhost:8080/user/profile/edit` and so on. Any idea? – Udhaya Apr 18 '20 at 17:50
1

Please make the following changes 1. Move main.css into /static/css folder 2. Change

Let me know if does not work.

nomadus
  • 859
  • 1
  • 12
  • 28
  • This Answer helped worked with organization of file structure as well. It worked along with the accepted answer. – Sourumeiji Dec 09 '16 at 12:29
1

If you are using Spring Auth and you're not logged in, you'll also have to make sure that the user has access to see the styling.

In the WebSecurityConfig you just have to add "*/.css" to your list of allowed routes.

@Override
protected void configure(final HttpSecurity http) throws Exception {
    ...
            .authorizeRequests()
            //allow requests to all urls that match the pattern
            .antMatchers("/", "/signup", "/login", "/*.css", "/*.jpg").permitAll()
            //anything else you must be logged in
            ...
}
Paula T
  • 1,212
  • 11
  • 13