Returning an HTML Page From a RESTful Controller in Spring Boot

Last Updated : 20 May, 2024

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 @RestController or @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 Model object, 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 @Controller or @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.

Project Structure

Step 2: Create the Controller class

Go to src > org.example.springhtmldemo > Greeting Controller and put the code below:

Java

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:

Java

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:

HTML

<!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.

Application Runs

Output HTML page:

Browser Output

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.

Spring Boot: Cannot access REST Controller on localhost (404)

seepanarajvskq

Improve

Article Tags :