Spring Boot WebJars

Spring Boot WebJars

             WebJars adalah web penyedia liblary/framework client-side  yang berguna untuk kita menambahkan liblary dan framework tanpa perlu mendownload dan menempatkannya. Kita hanya menabahkan dependency webjarsnya saja pada pom.xml dan secara otomatis kita akan memiliki liblary/framwework yang kita mau dan memakainya tanpa perlu disimpan pada folder static pada spring boot.

Anda bisa liat beberapa liblary atau framework yang ada pada WebJars ini disini : https://www.webjars.org/all

Bahan :
- IntelliJ IDEA
- Maven
- Java 8

Oke jika bahan nya bahan sudah tersedia pertama buat terlebih dahulu projectnya di https://start.spring.io/

Sesudah diexract tambahkan dependency webjars pada pom.xml . Disini saya akan mencoba memakai bootstrap dan jquery pada project saya

                <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
  <dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>4.2.1</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
  <dependency>
   <groupId>org.webjars.bower</groupId>
   <artifactId>jquery</artifactId>
   <version>3.3.1</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator -->
  <dependency>
   <groupId>org.webjars</groupId>
   <artifactId>webjars-locator</artifactId>
   <version>0.34</version>
  </dependency>

dan hasilnya seperti ini

<?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>
 <parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>2.1.2.RELEASE</version>
  <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <groupId>com.fluex404</groupId>
 <artifactId>springbootlearn</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>springbootlearn</name>
 <description>Demo project for Spring Boot</description>

 <properties>
  <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-starter-web</artifactId>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
  <dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>4.2.1</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
  <dependency>
   <groupId>org.webjars.bower</groupId>
   <artifactId>jquery</artifactId>
   <version>3.3.1</version>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator -->
  <dependency>
   <groupId>org.webjars</groupId>
   <artifactId>webjars-locator</artifactId>
   <version>0.34</version>
  </dependency>


  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-devtools</artifactId>
   <scope>runtime</scope>
  </dependency>
  <dependency>
   <groupId>org.projectlombok</groupId>
   <artifactId>lombok</artifactId>
   <optional>true</optional>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
  </dependency>
 </dependencies>

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

</project>

Buat package controller dan buat class yaitu HttpMappingController.java

package com.fluex404.springbootlearn.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HttpMappingController {

    @GetMapping("/")
    public String createHome() {

        return "index";
    }
}

Buat file index.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Bootstrap CSS-->
    <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
</head>
<body>

<div class="container">
    <h2>Modal Example</h2>
    <!-- Button to Open the Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Open modal
    </button>

    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Modal Heading</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    Modal body..
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>

</div>

<!--JAVASCRIPT-->
<script th:src="@{/webjars/jquery/dist/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/main.js}"></script>

</body>
</html>

selesai lalu run, dan Bootstrap pun sudah bisa dipakai secara offline 

Catatan :
        umunya untuk kita mengakses bootstrap itu harus menambahkan versi pada url. Seperti /webjars/bootstrap/4.2.1/js/bootstrap.min.js nah dengan ada nya webjars-locator (bisa dilihat di dependency) itu kita tidak perlu lagi menambahkan versi berapa bootstrap itu langsung aja tulis /webjars/bootstrap/js/bootstrap.min.js dan dia sudah tau :D

Untuk file projectnya bisa di download di github saya di https://github.com/fluex404/Springboot_WebJars

Sumber : 
- http://mariacarolina11.blogspot.com/2016/02/client-side-server-side-dan.html
- https://www.webjars.org/