Returning an HTML Page From a RESTful Controller in Spring Boot
In Spring Boot applications, RESTful controllers are commonly used to handle HTTP requests and return appropriate responses. These responses are typically in JSON or XML format. However, sometimes there is a need to return HTML pages, which the server can dynamically generate.
In Spring Boot, we can configure a controller that handles requests and renders HTML pages using the Thymeleaf template. Thymeleaf enables us to create dynamic HTML pages by directly embedding server-side variables and expressions into HTML code. The controller method will process the incoming HTTP request, process any necessary data, and pass it to the Thymeleaf template. The Thymeleaf template will render the HTML page with dynamic text before returning it to the client.
Key Terminologies:
- RESTful Controller: These are Java classes annotated with
@RestControlleror@Controller. They handle HTTP requests and return responses, typically in JSON or XML, to build RESTful web applications. - Thymeleaf: This is a Java template engine for web and standalone environments. It allows us to create dynamic HTML pages by directly embedding server-side variables and expressions into HTML code.
- Template Engine: A software module that processes template files to generate output documents based on data and template logic. Thymeleaf is an example used in Spring Boot applications.
- Model: Represents data transferred between the controller and the view. In Spring controllers, it’s often represented as a
Modelobject, allowing attributes to be passed to the view for rendering. - View: Responsible for presenting data to the user. In Spring Boot applications with Thymeleaf, views are typically HTML templates with dynamic text and Thymeleaf annotations.
- Controller: Processes user requests, handles input data, and returns responses. Spring Boot controllers are Java classes annotated with
@Controlleror@RestController.
Step-by-step Implementation to Return an HTML Page From a RESTful Controller in Spring Boot
Below are the implementation steps to return an HTML page from a RESTful controller in Spring Boot application.
Step 1: Create the Spring Boot Project
We create a new Spring Boot project using Spring Initializr, including the dependencies listed below into the project.
Dependencies:
- Spring Web
- Thymeleaf
- Lombok
- Spring Dev tools
Once complete the creation of the project then the file structure looks like the below image.
Step 2: Create the Controller class
Go to src > org.example.springhtmldemo > Greeting Controller and put the code below:
package org.example.springhtmldemo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greeting(Model model) {
model.addAttribute("message", "Welcome to our website!");
return "index"; // Thymeleaf template name (greeting.html)
}
}
Step 3: Default main class
Go to src > org.example.springhtmldemo > SpringHtmlDemoApplication and put the code below:
package org.example.springhtmldemo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringHtmlDemoApplication {
public static void main(String[] args) {
SpringApplication.run(SpringHtmlDemoApplication.class, args);
}
}
Step 4: Create the HTML page
Go to src > java > resources > templates > index.html and put the HTML code below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Greeting Page</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
margin-top: 100px;
}
.greeting {
font-size: 24px;
margin-bottom: 20px;
}
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1 class="greeting" th:text="${message}"></h1>
<button class="button" onclick="sayHello()">Say Hello</button>
</div>
<script>
function sayHello() {
alert('Hello, there!');
}
</script>
</body>
</html>
Step 5: Run the Application
Once we complete the project, we can run the application. After successfully running the application, it will look like the image below.
Output HTML page:
If we follow the above steps, we can successfully create a new HTML page with a better UI and configure the controller to return it in the Spring Boot application.