title: Why can't I load js and css files on my pages?
body: <p>I'm running a SpringMVC + Thymeleaf application and would like to load javascript and CSS on my HTML5 pages.</p>
  
  <p>My <code>login.html</code> is:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;&lt;/meta&gt;
  &lt;title&gt;Login Page&lt;/title&gt;
  
  &lt;meta name="description" content="login page"&gt;&lt;/meta&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;/meta&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;&lt;/meta&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;/meta&gt;
  &lt;link rel="shortcut icon" href="../assets/img/favicon.png"
  type="image/x-icon"&gt;&lt;/link&gt;
  
  &lt;link href="../assets/css/bootstrap.min.css" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;link id="bootstrap-rtl-link" href="" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;link href="../assets/css/font-awesome.min.css" rel="stylesheet"&gt;&lt;/link&gt;
  
  &lt;link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300"
  rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
  
  &lt;link id="beyond-link" href="../assets/css/beyond.min.css" rel="stylesheet" &gt;&lt;/link&gt;
  &lt;link href="../assets/css/demo.min.css" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;link href="../assets/css/animate.min.css" rel="stylesheet"&gt;&lt;/link&gt;
  &lt;link id="skin-link" href="" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
  
  &lt;script src="../assets/js/skins.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="../assets/js/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="../assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="../assets/js/slimscroll/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="../assets/js/beyond.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="login-container animated fadeInDown"&gt;
          &lt;div class="loginbox bg-white"&gt;
              &lt;div class="loginbox-title"&gt;SIGN IN&lt;/div&gt;
  
              &lt;div class="loginbox-textbox"&gt;
                  &lt;input type="text" class="form-control" placeholder="Email"&gt;&lt;/input&gt;
              &lt;/div&gt;
              &lt;div class="loginbox-textbox"&gt;
                  &lt;input type="text" class="form-control" placeholder="Password"&gt;&lt;/input&gt;
              &lt;/div&gt;
              &lt;div class="loginbox-forgot"&gt;
                  &lt;a href=""&gt;Forgot Password?&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="loginbox-submit"&gt;
                  &lt;input type="button" class="btn btn-primary btn-block" value="Login"&gt;&lt;/input&gt;
              &lt;/div&gt;
              &lt;div class="loginbox-signup"&gt;
                  &lt;a href="register.html"&gt;Sign Up With Email&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="logobox"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The structure of the webapp folder is:
  <a href="https://i.stack.imgur.com/uvdAf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvdAf.png" alt="enter image description here"></a></p>
  
  <p>But, though no mapping errors show on the console, I still can't get the nice effects and styles I'm hoping for.</p>
  
  <p>I have a piece of code on my application configuration class that reads:</p>
  
  <pre><code>@Bean
  public ViewResolver viewResolver() {
      ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
      templateResolver.setTemplateMode("HTML5");
      templateResolver.setCharacterEncoding("UTF-8");
      templateResolver.setPrefix("/WEB-INF/html/");
      templateResolver.setSuffix(".html");
  
      SpringTemplateEngine engine = new SpringTemplateEngine();
      engine.setTemplateResolver(templateResolver);
  
      ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
      viewResolver.setTemplateEngine(engine);
  
      return viewResolver;
  }
  
  /*
   *  Configure ResourceHandlers to serve static resources like CSS/ Javascript etc...
   */
  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
  // registry.addResourceHandler("/static/**").addResourceLocations("/static/");
  registry.addResourceHandler("/WEB-INF/assets/**").addResourceLocations("/WEB-INF/assets/");
  }
  </code></pre>
  
  <p>The commented out registry line for the <code>/static/</code> folder works nicely on JSP. I've tried, for HTML, both <code>/assets/</code> and <code>/WEB-INF/assets/</code>. How come it's not working?</p>