Spring boot with Thymeleaf example

This blog shows how to use Thymeleaf as a template engine with Spring boot.

Technologies Used

• Java 8
• Spring framework 1.5.9
• Spring boot 1.5.9
• Thymeleaf 2.1.6
• Tomcat embed 8.5.23
• Logback 1.1.1.1
• Junit 4.12
• Bootstrap 4
• Maven 3.5.0

Implementation

This project uses Maven to build the project.  It shows a very simple example of a login page with corresponding Spring boot controller.
The goal of this project is to have a login page rendered using Thymeleaf template.
The template it self uses the bootstrap css for styling.

High level steps as described bellow with sample code

Define the pom.xml file

Write Spring boot app class

Write Spring boot controller class

Write  Thymeleaf Template for the controller class

Write the CSS referred by Template file

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <artifactId>Javaexp.blogspot.com-thymeleaf</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>Javaexp.blogspot.com Thymeleaf</name>
  <description>Javaexp Thymeleaf Example</description>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.9.RELEASE</version>
    <relativePath />
  </parent>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
  
    <!-- Springboot -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>1.5.9.RELEASE</version>
    </dependency>

    <!-- test -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>

    <!-- for Thymeleaf -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <!-- hot swapping, disable cache for template, enable live reload -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
      <scope>runtime</scope>
    </dependency>

  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
        <configuration>
          <addResources>true</addResources>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>repackage</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
          <webResources>
            <resource>
              <directory>dist/</directory>
            </resource>
          </webResources>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

StartWebApplication.java

package com.blogspot.blogger;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class StartWebApplication {

  public static void main(String[] args) {
    SpringApplication.run(StartWebApplication.class, args);
  }

}

WebLoginController.java

package com.blogspot.blogger;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebLoginController {

  @GetMapping("/login")
  public String login(Model model) {
    return "login";
  }

}

For the Thymeleaf template file put it under src/main/resources/templates/login.html

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<link rel="stylesheet" type="text/css" th:href="@{~/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{~/css/style.default.css}" />
<title>Javaexp.blogspot.com Thymeleaf Example</title>
</head>
<body>
  <div class="container">
    <div class="modal-dialog">
      <div class="loginmodal-container">
        <h1>Login to Your Account</h1>
        <form>
          <input type="text" name="user" placeholder="Username"></input> <input
            type="password" name="pass" placeholder="Password"></input> <input
            type="submit" name="login" class="login loginmodal-submit"
            value="Login"></input>
        </form>
        <div class="login-help">
          <a href="#">Register</a> - <a href="#">Forgot Password</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

application.properties

#SPRING BOOT MVC
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html

Run the Spring boot Application

$ mvn spring-boot:run

INFO restartedMain o.a.c.h.Http11NioProtocol:179 - Starting 
ProtocolHandler ["http-nio-8080"]
INFO restartedMain o.a.t.u.n.NioSelectorPool:179 - Using a shared selector for servlet write/read
INFO restartedMain o.s.b.c.e.t.TomcatEmbeddedServletContainer:201 - Tomcat started on port(s): 8080 (http)
INFO restartedMain c.b.b.StartWebApplication:57 - Started StartWebApplication in 2.337 seconds (JVM running for 2.735)

Demo

Goto : http://localhost:8080/login

Download and Run

git clone https://github.com/siddharthagit/spring-boot-references.git
cd spingboot-web-thymeleaf
mvn spring-boot:run