1

I'm using Spring boot 2.0.2 and Freemarker for my web application. The static content of my webapp fails to load for nested / prefixed controllers.

All of the static content (images, CSS, js) is under

/src/main/resources/static/js
/src/main/resources/static/images
/src/main/resources/static/css

Everything works great if I use this controller:

@RequestMapping(value = "/userProfile", method = RequestMethod.GET)
public ModelAndView getUser(@ModelAttribute("model") ModelAndView model,@RequestParam("userId") String userId) {

    UserProfile userProfile = userService.findById(userId);
    model.addObject("userProfile", userProfile);
    model.setViewName("userDetails");
    return model;
}

  userDetails.ftl is located at /src/main/resources/templates/userDetails.ftl

However, I'm seeing 404 on the static content (js/css/images) for this controller while making a GET request from the browser.

https://localhost:8443/users/js/saveUser.js -- 404
(Please note "users" in the URL while trying to load static content)

@RequestMapping(value = "/user/profile", method = RequestMethod.GET)
public ModelAndView getUser(@ModelAttribute("model") ModelAndView model,@RequestParam("userId") String userId) {

    UserProfile userProfile = userService.findById(userId);
    model.addObject("userProfile", userProfile);
    model.setViewName("userDetails");
    return model;
}

Code of the view

<link rel="stylesheet" type="text/css" href="css/homepage.css">
<link rel="stylesheet" type="text/css" href="css/user-profile-display.css">
<script type="text/javascript" src="js/saveUser.js}"></script>
<script type="text/javascript" src="js/authenticate.js}"></script>

I've looked at the following issues but can't find a solution that would work:

How to specify prefix for all controllers in Spring Boot?

spring boot: separate REST from static content

Any help would be appreciated.

tim_la_amzn
  • 35
  • 1
  • 7
  • That's probably because you're using an incorrect relative path to the static resources in your view. Post the relevant code. – JB Nizet Oct 19 '18 at 21:57
  • @JBNizet - I've added the entire code for the controller. Please let me know if you need additional info – tim_la_amzn Oct 19 '18 at 22:09
  • The problem, as I said, is most probably that you're using an incorrect relative path to the static resources **in your view**. So, post the relevant code: the code **of the view**, where you're linking to static resources – JB Nizet Oct 19 '18 at 22:11
  • Sorry, I misunderstood. Updated @JBNizet – tim_la_amzn Oct 19 '18 at 22:29

1 Answers1

1

You're using relative paths.

So, if the current URL, dsplayed in the address bar of your browser, is http://somehost/userProfile, the relative path css/homepage.css is resolved relative to http://somehost/, and the request is thus sent to http://somehost/css/homepage.css, which works fine

If the current URL, dsplayed in the address bar of your browser, is http://somehost/user/profile, the relative path css/homepage.css is resolved relative to http://somehost/user/, and the request is thus sent to http://somehost/user/css/homepage.css which doesn't work, since that's not the URL of the CSS resource.

Use absolute paths:

href="/css/homepage.css"

This basically works like paths on your hard drive. If you're in the director /home/tim and execute less foo.txt, it will display the file /home/tim/foo.txt. If you execute less /foo.txt, it will display the file /foo.txt.

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255