How to add CSS and JS in Thymeleaf in a Spring Boot Project. In this article, we will learn how to add CSS and JS in Thymeleaf in a Spring Boot Project?
Thymeleaf is a server-side Java template engine. It is an open-source Library of Java that is used to create and process HTML, XML, CSS, JS, and text information. Check this article Create a Login Form using Thymeleaf in Spring Boot to implement a login page in thymeleaf.
In a web application, at the view layer, we used JSP (Java Server Pages). Now, Instead of JSP, we can use a thymeleaf template which is way better than JSPs due to its natural template concept. In case you want to know What is JSP check this article https://codedec.com/course/jsp-tutorial-for-beginners-with-examples/
Example to add CSS and JS in Thymeleaf in a Spring Boot Project
Step 1: Open IDE STS- Spring Tool Suite
Step 2: Go to File > Spring Starter Project.
Step 3: Now, fill all the fields as shown below and click Next.
Step 4: Now, Add the dependencies of Thymeleaf and spring web and click Next > Finish.
Now, wait for some time and your project structure will be ready. Go to the pom.xml file and you will see the following dependency being added automatically.
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
Project Structure
Configure application. properties file
#change the port number server.port=8888
Create a Controller
Create a TestController to handle requests. The request for the web page will be handle by the handler methods in the controller.
TestController
package com.example.thymeleaf.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class TestController {
@GetMapping(value = "/")
public String home() {
return "index";
}
}
- @Controller annotation marks the TestController class a Request Handler.
- Every request coming for the ‘/’ URL will be handled by the home() method. It would redirect you to the index page.
Create CSS file
In the spring boot application, adding static resources is quite simple. Go to src/main/resources/static folder and add a CSS folder and add style.css file. Following is the code to add in style.css:
@charset "ISO-8859-1";
body{
background: #f0f4c3;
}
h1{
font-family: inherit;
font-weight: bold;
align-content: center;
}
p{
font-family: inherit;
font-weight: bold;
font-size: 20px;
align-self: center;
}
Create JS file
Go to src/main/resources/static folder and add a js folder and add the script.js file. Following is the code to add in script.js:
function myFunction(){
alert("Welcome ! the button is clicked");
}
Create a Template
In the spring boot application, adding a thymeleaf template is quite simple. Go to src/main/resources/template folder and create an index.html file. Now inside the index.html file make sure to add the following code:
<html xmlns:th="http://www.thymeleaf.org">
Now, we will see how to add the link of style.css inside index.html. Type the following code inside your index.html.
<link th:href="@{/css/style.css}" rel="stylesheet">
Now, we will see how to add the link of script.js inside index.html. Type the following code inside your index.html.
<script type="text/javascript" th:src="@{/js/script.js}"></script>
Note: ‘@’ sign is used for the page context.
Now, let us see the index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<link th:href="@{/css/style.css}" rel="stylesheet"/>
<script type="text/javascript" th:src="@{/js/script.js}"></script>
<title>Thymeleaf tutorial</title>
</head>
<body>
<h1 align="center">Welcome to Thymeleaf</h1>
<p align="center">Learn How to add CSS/JS in thymeleaf</p>
<center><button type="button" onclick="myFunction()" >Click Here</button></center>
</body>
</html>
Now, Run the ThymeleafLesson1Application class and Go to localhost:8888 and see the following output. 
In this way, we have learned how to add CSS and JS in thymleaf in the spring boot application.
