How to Add CSS and JS to Thymeleaf

Author:
In this tutorial, we will learn:
  1. How to add CSS and JS files to Thymeleaf templates.
  2. How to use CSS and JavaScript in our Thymeleaf templates.
First, We'll start by adding CSS styling to our page and then move on to adding some JavaScript functionality.
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html

Add Maven Dependency

In order to use Thymeleaf in our spring application, let's add the Spring Boot Starter for Thymeleaf to our Maven configuration:
<dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Thymeleaf Example with Spring Boot

1. Folder Structure

As we know that Thymeleaf is a templating library that can be easily integrated with Spring Boot applications.
  • By default, Thymeleaf expects us to place those templates in the src/main/resources/templates folder.
  • For CSS and JavaScript files, the default directory is src/main/resources/static.
Let's create static/css and static/js folders for our CSS and JS files, respectively.

2. Adding CSS

Let's create a simple CSS file named main.css in our static/css folder and define some basic styling:
h2 {
    font-family: sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}
 
strong {
    font-weight: 700;
    background-color: yellow;
}
 
p {
    font-family: sans-serif;
}

Create Thymeleaf Template

Next, let's create a Thymeleaf template named add-css-js-demo.html in our resources/templates folder to use these styles:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Add CSS and JS to Thymeleaf</title>
    <link th:href="@{/css/main.css}" rel="stylesheet" />
    <script type="text/javascript" th:src="@{/js/actions.js}"></script>
    
</head>
<body>
    <h2>Style Heading H2</h2>
    <p>
        This is text on which we want to apply <strong>very special</strong> styling.
    </p>
    
    <button type="button" th:onclick="showAlert()">Show Alert</button>
    
</body>
</html>
We load the stylesheet using the link tag with Thymeleaf's special th:href attribute.

3. Using JavaScript

Next, we're going to learn how to add a JavaScript file to our Thymeleaf page.
Let's begin by adding simple JavaScript function to a file in src/main/resources/static/js/demo.js:
function showAlert() {
    alert("The button was clicked!");
}
Let's go back to Thymeleaf template and add a <script> tag that points to our JavaScript file:
<script type="text/javascript" th:src="@{/js/demo.js}"></script>
Now, we call our method from our template:
<button type="button" th:onclick="demo()">Show Alert</button>
When we run our application and click the Show Alert button, we'll see the alert window.

Comments

Post a Comment

Leave Comment