[JAVA] Apply Twitter Bootstrap 4 to Spring Boot 2 using Webjars

Trigger

When creating an application with Thymeleaf, I wanted to define the version for each application, so it is a work memo at that time.

Introducing WebJars

This time I will use maven. BootStrap4 has a function that uses jQuery in addition to its own style sheet, so specify the corresponding version. For pom.xml, refer to Appendix below.

HTML template

The specification of CSS / JavaScript for Bootstrap using WebJars is as follows.

index.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}" />
</head>
<body>
<div th:text="${hello}"></div>
<script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>
</body>
</html>

The specification method in Thymeleaf is @ {/ webjars / installation package / version / path to resource}.

Pull version specification from Spring Boot settings

Instead of setting the Bootstrap or jQuery version in the template, you can also read it from the Spring settings. The following example puts the Spring settings in application.yml and reads this content.

Setting

application.yml


webjars:
  bootstrap: "4.2.1"
  jquery: "3.3.1-1"

Read the set webjars

There are several methods, but this time we will treat one configuration class as @Component in the Spring management bean.

WebjarsConfig.java


import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import lombok.Data;

@Component
@ConfigurationProperties(prefix = "webjars")
@Data
public class WebjarsConfig {
	private String bootstrap;
	private String jquery;
}

HTML template (Thymeleaf)

Note how to set the anchor URL and how to refer to the value from the Spring management bean.

index.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/{version}/css/bootstrap.min.css(version=${@webjarsConfig.bootstrap})}" />
</head>
<body>
<div th:text="${hello}"></div>
<script th:src="@{/webjars/jquery/{version}/jquery.min.js(version=${@webjarsConfig.jquery})}"></script>
<script th:src="@{/webjars/bootstrap/{version}/js/bootstrap.min.js(version=${@webjarsConfig.bootstrap})}"></script>
</body>
</html>

To set a variable in th: src, enclose the variable in {} and specify it at the end of the URL (variable = $ {value bound from Spring}).

Since we set the WebjarsConfig earlier without the @Component name, the referenced name will be webjarsConfig.

Appendix

Verification environment

Windows10 / SpringBoot 2.1.2

pom.xml

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>

	<groupId>com.github.a-pz</groupId>
	<artifactId>spring-thymeleaf-bootstrap4</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>spring-thymeleaf-bootstrap4</name>
	<description>spring-thymeleaf-bootstrap4</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.2.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</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>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>4.2.1</version>
		</dependency>
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>jquery</artifactId>
			<version>3.3.1-1</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-configuration-processor</artifactId>
			<optional>true</optional>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>

Reference material

Recommended Posts

Apply Twitter Bootstrap 4 to Spring Boot 2 using Webjars
Try Spring Boot from 0 to 100.
Introduction to Spring Boot ① ~ DI ~
Introduction to Spring Boot ② ~ AOP ~
Introduction to Spring Boot Part 1
Try using Spring Boot Security
Deploy Spring Boot applications to Heroku without using the Heroku CLI
I tried to get started with Swagger using Spring Boot
8 things to insert into DB using Spring Boot and JPA
How to control transactions in Spring Boot without using @Transactional
Spring Boot Tutorial Using Spring Security Authentication
How to set Spring Boot + PostgreSQL
How to use ModelMapper (Spring boot)
Upgrade spring boot from 1.5 series to 2.0 series
How to make a hinadan for a Spring Boot project using SPRING INITIALIZR
[Introduction to Spring Boot] Form validation check
Java beginner tried to make a simple web application using Spring Boot
Try using Spring Boot with VS Code
Story when moving from Spring Boot 1.5 to 2.1
Changes when migrating from Spring Boot 1.5 to Spring Boot 2.0
Changes when migrating from Spring Boot 2.0 to Spring Boot 2.2
Spring Boot + Thymeleaf BootStrap installation method memo
Steps to create a simple camel app using Apache Camel Spring Boot starters
How to split Spring Boot message file
Add spring boot and gradle to eclipse
[FCM] Implementation of message transmission using FCM + Spring boot
How to use MyBatis2 (iBatis) with Spring Boot 1.4 (Spring 4)
How to use built-in h2db with spring boot
How to make Spring Boot Docker Image smaller
How to use Spring Boot session attributes (@SessionAttributes)
Create a Spring Boot application using IntelliJ IDEA
The story of raising Spring Boot 1.5 series to 2.1 series
Try to implement login function with Spring Boot
How to add a classpath in Spring Boot
[Rails] Bootstrap form-control does not apply to date_select
An introduction to Spring Boot + in-memory data grid
How to bind to property file in Spring Boot
Try to automate migration with Spring Boot Flyway
[Java] Article to add validation with Spring Boot 2.3.1.
I wanted to gradle spring boot with multi-project
[Spring Boot] How to refer to the property file
Automatically apply bootstrap style to devise view files
[Introduction to Spring Boot] Authentication function with Spring Security
Spring Boot --How to set session timeout time
Challenge Spring Boot
Spring Boot Form
Spring Boot Memorandum
gae + spring boot
Create a portfolio app using Java and Spring Boot
Plans to support JDK 11 for Eclipse and Spring Boot
Settings for connecting to MySQL with Spring Boot + Spring JDBC
Testing JPA entities and repositories using Spring Boot @DataJpaTest
Try using DI container with Laravel and Spring Boot
How to set Dependency Injection (DI) for Spring Boot
How to apply HandlerInterceptor to http inbound-gateway of Spring Integration
How to write a unit test for Spring Boot 2
If you want to separate Spring Boot + Thymeleaf processing
A memorandum of addiction to Spring Boot2 x Doma2
Try using OpenID Connect with Keycloak (Spring Boot application)
05. I tried to stub the source of Spring Boot
[JUnit 5 compatible] Write a test using JUnit 5 with Spring boot 2.2, 2.3