For POC purposes we work with Thymeleaf in a Spring Boot configuration.
Can you help me solving this error:
Error resolving template [chatloginpage], template might not exist or might not be accessible by any of the configured Template Resolvers.
This happens when navigating to localhost:8080/chatstart. Of course I looked to different stackoverflow answers.
Working with Spring Boot requires no additional confiruation. The html pages can be put in the templates folder and no WEB-INF is needed. This error may be due to working with Rest services as well?
The pom.xml contains:
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.6</version>
<relativePath/>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web-services</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
The main controller is for this non-REST part is:
@Controller
@EnableWebMvc
public class StartChatController {
@RequestMapping( path = "/chatstart", method = RequestMethod.GET)
public String index(HttpServletRequest request, Model model) {
String username = (String) request.getSession().getAttribute("username");
if (username == null || username.isEmpty()) {
return "redirect:/chatlogin";
}
model.addAttribute("username", username);
return "chatting";
}
@RequestMapping(path = "/chatlogin", method = RequestMethod.GET)
public String showLoginPage() {
return "chatloginpage";
}
@RequestMapping(path = "/chatlogin", method = RequestMethod.POST)
public String doLogin(HttpServletRequest request, @RequestParam(defaultValue = "") String username) {
username = username.trim();
if (username.isEmpty()) {
return "chatloginpage";
}
request.getSession().setAttribute("username", username);
return "redirect:/chatstart";
}
@RequestMapping(path = "/chatlogout", method = RequestMethod.POST)
public String logout(HttpServletRequest request) {
request.getSession(true).invalidate();
return "redirect:/chatlogin";
}
}
All web page resources are under resources:
main.css ... for brevity not shown
main.js ... for brevity not shown
The resources/templates/chatloginpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="../main.css"/>
</head>
<body>
<div id="login-container">
<h1 class="title">Enter your username</h1>
<form id="loginForm" name="loginForm" method="POST">
<input type="text" name="username"/>
<button action="chatlogin" type="submit">Login</button>
</form>
</div>
</body>
</html>
The resources/templates/chatting.html page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring Boot WebSocket</title>
<link rel="stylesheet" href="../main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<div id="chat-container">
<div class="chat-header">
<div class="user-container">
<span id="username" th:utext="${username}"></span>
<a th:href="@{/chatlogout}">Logout</a>
</div>
<h3>Spring WebSocket Chat Demo</h3>
</div>
<hr/>
<div id="connecting">Connecting...</div>
<ul id="messageArea">
</ul>
<form id="messageForm" name="messageForm">
<div class="input-message">
<input type="text" id="message" autocomplete="off"
placeholder="Type a message..."/>
<button type="submit">Send</button>
</div>
</form>
</div>
<script href="../main.js"></script>
</body>
</html>
