I've been working on a new project that involves Thymeleaf and it's an extension of another application. However, instead of progressing smoothly with the development, I've encountered an issue that has kept me up for most of the night.
The problem is that Eclipse indicates (on its console) that Thymleaf has been loaded when accessing the application. So far, so good! But here's the catch - all my CSS and JS files are missing. The landing page has a link to a simple login.html file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="@{/login}" method="post">
<div class="loginbox-title"><span style="text-transform: uppercase;" th:text="#{gen.signin}"></span></div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" th:placeholder="#{gen.username}" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" th:placeholder="#{gen.passwd}" />
</div>
<!-- <div class="loginbox-forgot"> -->
<!-- <a href="#" th:href="@{/forgotPassword}" th:text="#{gen.lostPasswd}">Forgot Password?</a> -->
<!-- </div> -->
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" th:value="#{gen.signin}"/>
</div>
<div style="text-align: center;" ><span th:text="#{gen.appVersion}"></span></div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#ssoId').focus();
});
</script>
</body>
</html>
This references a loginFragment that is defined as follows:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="loginFragment" th:fragment="loginFragment">
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="assets/img/favicon.png" type="image/x-icon" />
<link th:href="@{/assets/css/bootstrap.min.css}" />
<link th:href="@{/assets/css/font-awesome.min.css}"/>
<link th:href="@{/assets/css/beyond-login.css}"/>
<link th:href="@{/assets/css/demo.min.css}" />
<link th:href="@{/assets/css/animate.min.css}" />
<link th:href="@{/assets/css/jquery-ui.css}" />
<link th:href="@{/assets/css/login.css}"/>
<link th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}"/>
<script th:src="@{/assets/js/skins.min.js}" ></script>
<script th:src="@{/assets/js/jquery-2.2.3.min.js}" ></script>
<script th:src="@{/assets/js/bootstrap.min.js}" ></script>
<script th:src="@{/assets/js/slimscroll/jquery.slimscroll.min.js}" ></script>
<script th:src="@{/assets/js/beyond.js}" ></script>
<script th:src="@{/assets/js/bootstrap.min.js}" ></script>
</head>
<body>
<div class="container">
</div>
</body>
</html>
The structure of the webapp folder looks like this:
webapp
assets
css
img
js
WEB-INF
html
admin
fragments
home
login.html
The landing page utilizes a different fragment to load CSS and JS, but neither fragment can access the CSS and JS files. I've compared it with another project and there doesn't seem to be any noticeable differences. Even the file permissions are identical.
When inspecting the landing page with Firebug, I see the following message:
<script src="/cms-stock/assets/js/jquery-ui.js" type="text/javascript">
Reload the page to get source for: http://localhost:8080/cms-stock/assets/js/jquery-ui.js
</script>
Each time I attempt to call a CSS or JS file in the browser, I end up being redirected back to the landing page.
What am I overlooking here?