{"id":16749,"date":"2021-06-20T18:47:45","date_gmt":"2021-06-20T11:47:45","guid":{"rendered":"https:\/\/huongdanjava.com\/?p=16749"},"modified":"2021-06-20T18:47:45","modified_gmt":"2021-06-20T11:47:45","slug":"introduction-about-webjars","status":"publish","type":"post","link":"https:\/\/huongdanjava.com\/introduction-about-webjars.html","title":{"rendered":"Introduction about WebJars"},"content":{"rendered":"<p>I don&#8217;t know how you guys work with Java web applications using front-end frameworks such as JQuery, Bootstrap, &#8230; but for me, the management and configuration to use these frameworks is sometimes a big problem. For example, using the Backbone.JS library, this library has a dependency, the Underscore.JS library, if you want to use Backbone.JS, we must include the Underscore.JS library. Where should I put the .js files of the frameworks, sometimes I have to think, &#8230;<\/p>\n<p>The problems I mentioned above, we can easily solve with WebJars. <a href=\"https:\/\/www.webjars.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebJars<\/a> is a set of client-side web libraries packaged in JAR files, making us easy to manage and use popular front-end libraries and frameworks like JQuery, Bootstrap, &#8230; in Java web applications. You can use Maven or Gradle to manage these dependencies. WebJars works well with most Java web frameworks such as the Spring framework, &#8230; In this tutorial, I will show you how to use WebJars!<\/p>\n<p>First, I will create a Spring Boot with Web dependency as an example. As I said, WebJars works well with most Java web frameworks, so you can use it in any Java web project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16751 size-full\" src=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/introduction-about-webjars-1.png\" alt=\"Introduction about WebJars\" width=\"700\" height=\"624\" \/><\/p>\n<p>As an example, I will add the WebJars dependency for JQuery, Bootstrap, and Backbone.JS as follows:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;dependency&gt;\r\n    &lt;groupId&gt;org.webjars.npm&lt;\/groupId&gt;\r\n    &lt;artifactId&gt;jquery&lt;\/artifactId&gt;\r\n    &lt;version&gt;3.6.0&lt;\/version&gt;\r\n&lt;\/dependency&gt;\r\n&lt;dependency&gt;\r\n    &lt;groupId&gt;org.webjars.npm&lt;\/groupId&gt;\r\n    &lt;artifactId&gt;bootstrap&lt;\/artifactId&gt;\r\n    &lt;version&gt;5.0.1&lt;\/version&gt;\r\n&lt;\/dependency&gt;\r\n&lt;dependency&gt;\r\n    &lt;groupId&gt;org.webjars.npm&lt;\/groupId&gt;\r\n    &lt;artifactId&gt;backbone&lt;\/artifactId&gt;\r\n    &lt;version&gt;1.4.0&lt;\/version&gt;\r\n&lt;\/dependency&gt;<\/pre>\n<p>Because Backbone.JS has a dependency of Underscore.JS, you will see that Underscore.JS is also included in the project without us having to do anything:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16752 size-full\" src=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/introduction-about-webjars-2.png\" alt=\"Introduction about WebJars\" width=\"700\" height=\"408\" \/><\/p>\n<p>Very convenient, isn&#8217;t it?<\/p>\n<p>To declare using the front-ends and frameworks that I have added, I will create a new file app.js and index.html in the src\/main\/resources\/static directory with the following content:<\/p>\n<p>index.html:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Hello WebJars&lt;\/title&gt;\r\n&lt;script src=\"\/webjars\/jquery\/3.6.0\/dist\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/webjars\/bootstrap\/5.0.1\/dist\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/webjars\/underscore\/1.13.1\/underscore-min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/webjars\/backbone\/1.4.0\/backbone-min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/app.js\"&gt;&lt;\/script&gt;\r\n&lt;link rel=\"stylesheet\" href=\"\/webjars\/bootstrap\/5.0.1\/dist\/css\/bootstrap.min.css\" \/&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div class=\"form-floating mb-3\"&gt;\r\n\t\t&lt;input type=\"email\" class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\"&gt; \r\n\t\t&lt;label for=\"floatingInput\"&gt;Email address&lt;\/label&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"form-floating\"&gt;\r\n\t\t&lt;input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\"&gt; \r\n\t\t&lt;label for=\"floatingPassword\"&gt;Password&lt;\/label&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>The path to the .js files declared in the &lt;script&gt; or .css in the &lt;link&gt; tag will depend on how these files are contained in the WebJars .jar file. I take an example of the JQuery library, you will see the jquery.min.js file is contained in the jquery-3.6.0.jar file as follows:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16753 size-full\" src=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/introduction-about-webjars-3.png\" alt=\"Introduction about WebJars\" width=\"700\" height=\"919\" \/><\/p>\n<p>Comparing the way I declared above, you will see that the value of the src attribute in the &lt;script&gt; tag will start with the webjars directory located in the .jar file. Similarly, the href attribute of the &lt;link&gt; tag is the same.<\/p>\n<p>app.js<\/p>\n<pre class=\"lang:js decode:true \">$(document).ready(function() {\r\n\talert(\"Hello WebJars!\");\r\n});\r\n\r\nvar View = Backbone.View.extend({\r\n\tinitialize: function() {\r\n\t\talert(\"Hello In Backbone View\");\r\n\t}\r\n})\r\nvar view = new View({});<\/pre>\n<p>Now if you run the application, you will see 2 alert messages displayed.<\/p>\n<p>One is in the Backbone.JS code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16754 size-full\" src=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/introduction-about-webjars-4.png\" alt=\"Introduction about WebJars\" width=\"700\" height=\"524\" \/><\/p>\n<p>One is the JQuery code:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16755 size-full\" src=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/introduction-about-webjars-5.png\" alt=\"Introduction about WebJars\" width=\"700\" height=\"525\" \/><\/p>\n<p>And display Bootstrap&#8217;s HTML and CSS:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16756 size-full\" src=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/introduction-about-webjars-6.png\" alt=\"Introduction about WebJars\" width=\"700\" height=\"522\" \/><\/p>\n<p>Very good, isn&#8217;t it?<\/p>\n<p>If you notice, with the way of declaring the path to the .js or .css files above, it will be very inconvenient if we upgrade the version of these libraries. We will have to change the code to update the path according to the new version because, as you can see, in the path to the .js or .css files, the version is included. To solve this problem, you can add a dependency of WebJars:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;dependency&gt;\r\n    &lt;groupId&gt;org.webjars&lt;\/groupId&gt;\r\n    &lt;artifactId&gt;webjars-locator-core&lt;\/artifactId&gt;\r\n&lt;\/dependency&gt;<\/pre>\n<p>Now, we can declare paths to .js or .css files without version as follows:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Hello WebJars&lt;\/title&gt;\r\n&lt;script src=\"\/webjars\/jquery\/dist\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/webjars\/bootstrap\/dist\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/webjars\/underscore\/underscore-min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/webjars\/backbone\/backbone-min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/app.js\"&gt;&lt;\/script&gt;\r\n&lt;link rel=\"stylesheet\" href=\"\/webjars\/bootstrap\/dist\/css\/bootstrap.min.css\" \/&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div class=\"form-floating mb-3\"&gt;\r\n\t\t&lt;input type=\"email\" class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\"&gt; \r\n\t\t&lt;label for=\"floatingInput\"&gt;Email address&lt;\/label&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"form-floating\"&gt;\r\n\t\t&lt;input type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\"&gt; \r\n\t\t&lt;label for=\"floatingPassword\"&gt;Password&lt;\/label&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>The result is still the same if you run the application again.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;16749&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;4&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;0\\\/5 - (0 votes)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Introduction about WebJars&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 19.2px;\">\n            <span class=\"kksr-muted\"><\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>I don&#8217;t know how you guys work with Java web applications using front-end frameworks such as JQuery, Bootstrap, &#8230; but for me, the management and configuration to use these frameworks is sometimes a big problem. For example, using the Backbone.JS library, this library has a&hellip; <a href=\"https:\/\/huongdanjava.com\/introduction-about-webjars.html\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":16733,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1991],"tags":[],"class_list":["post-16749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webjars-en","clearfix"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introduction about WebJars - Huong Dan Java<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will introduce you all about WebJars.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/huongdanjava.com\/introduction-about-webjars.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction about WebJars - Huong Dan Java\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will introduce you all about WebJars.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/huongdanjava.com\/introduction-about-webjars.html\" \/>\n<meta property=\"og:site_name\" content=\"Huong Dan Java\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nhkhanh2406\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/nhkhanh2406\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T11:47:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/webjars.png\" \/>\n\t<meta property=\"og:image:width\" content=\"280\" \/>\n\t<meta property=\"og:image:height\" content=\"280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Khanh Nguyen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/KhanhNguyenJ\" \/>\n<meta name=\"twitter:site\" content=\"@KhanhNguyenJ\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Khanh Nguyen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html\"},\"author\":{\"name\":\"Khanh Nguyen\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/#\\\/schema\\\/person\\\/dc859d7f8cbea3b593e6738de9cbb82d\"},\"headline\":\"Introduction about WebJars\",\"datePublished\":\"2021-06-20T11:47:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html\"},\"wordCount\":516,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/#\\\/schema\\\/person\\\/dc859d7f8cbea3b593e6738de9cbb82d\"},\"image\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/webjars.png\",\"articleSection\":[\"WebJars\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html\",\"url\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html\",\"name\":\"Introduction about WebJars - Huong Dan Java\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/webjars.png\",\"datePublished\":\"2021-06-20T11:47:45+00:00\",\"description\":\"In this tutorial, I will introduce you all about WebJars.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#primaryimage\",\"url\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/webjars.png\",\"contentUrl\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/webjars.png\",\"width\":280,\"height\":280},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/introduction-about-webjars.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/huongdanjava.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction about WebJars\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/#website\",\"url\":\"https:\\\/\\\/huongdanjava.com\\\/\",\"name\":\"Huong Dan Java\",\"description\":\"Java development tutorials\",\"publisher\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/#\\\/schema\\\/person\\\/dc859d7f8cbea3b593e6738de9cbb82d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/huongdanjava.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/#\\\/schema\\\/person\\\/dc859d7f8cbea3b593e6738de9cbb82d\",\"name\":\"Khanh Nguyen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg\",\"url\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg\",\"contentUrl\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg\",\"width\":1267,\"height\":1517,\"caption\":\"Khanh Nguyen\"},\"logo\":{\"@id\":\"https:\\\/\\\/huongdanjava.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg\"},\"description\":\"I love Java and everything related to Java.\",\"sameAs\":[\"https:\\\/\\\/huongdanjava.com\",\"https:\\\/\\\/www.facebook.com\\\/nhkhanh2406\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/KhanhNguyenJ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction about WebJars - Huong Dan Java","description":"In this tutorial, I will introduce you all about WebJars.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/huongdanjava.com\/introduction-about-webjars.html","og_locale":"en_US","og_type":"article","og_title":"Introduction about WebJars - Huong Dan Java","og_description":"In this tutorial, I will introduce you all about WebJars.","og_url":"https:\/\/huongdanjava.com\/introduction-about-webjars.html","og_site_name":"Huong Dan Java","article_publisher":"https:\/\/www.facebook.com\/nhkhanh2406","article_author":"https:\/\/www.facebook.com\/nhkhanh2406","article_published_time":"2021-06-20T11:47:45+00:00","og_image":[{"width":280,"height":280,"url":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/webjars.png","type":"image\/png"}],"author":"Khanh Nguyen","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/KhanhNguyenJ","twitter_site":"@KhanhNguyenJ","twitter_misc":{"Written by":"Khanh Nguyen","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#article","isPartOf":{"@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html"},"author":{"name":"Khanh Nguyen","@id":"https:\/\/huongdanjava.com\/#\/schema\/person\/dc859d7f8cbea3b593e6738de9cbb82d"},"headline":"Introduction about WebJars","datePublished":"2021-06-20T11:47:45+00:00","mainEntityOfPage":{"@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html"},"wordCount":516,"commentCount":0,"publisher":{"@id":"https:\/\/huongdanjava.com\/#\/schema\/person\/dc859d7f8cbea3b593e6738de9cbb82d"},"image":{"@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#primaryimage"},"thumbnailUrl":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/webjars.png","articleSection":["WebJars"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/huongdanjava.com\/introduction-about-webjars.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html","url":"https:\/\/huongdanjava.com\/introduction-about-webjars.html","name":"Introduction about WebJars - Huong Dan Java","isPartOf":{"@id":"https:\/\/huongdanjava.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#primaryimage"},"image":{"@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#primaryimage"},"thumbnailUrl":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/webjars.png","datePublished":"2021-06-20T11:47:45+00:00","description":"In this tutorial, I will introduce you all about WebJars.","breadcrumb":{"@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/huongdanjava.com\/introduction-about-webjars.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#primaryimage","url":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/webjars.png","contentUrl":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/06\/webjars.png","width":280,"height":280},{"@type":"BreadcrumbList","@id":"https:\/\/huongdanjava.com\/introduction-about-webjars.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/huongdanjava.com\/"},{"@type":"ListItem","position":2,"name":"Introduction about WebJars"}]},{"@type":"WebSite","@id":"https:\/\/huongdanjava.com\/#website","url":"https:\/\/huongdanjava.com\/","name":"Huong Dan Java","description":"Java development tutorials","publisher":{"@id":"https:\/\/huongdanjava.com\/#\/schema\/person\/dc859d7f8cbea3b593e6738de9cbb82d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/huongdanjava.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/huongdanjava.com\/#\/schema\/person\/dc859d7f8cbea3b593e6738de9cbb82d","name":"Khanh Nguyen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/07\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg","url":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/07\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg","contentUrl":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/07\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg","width":1267,"height":1517,"caption":"Khanh Nguyen"},"logo":{"@id":"https:\/\/huongdanjava.com\/wp-content\/uploads\/2021\/07\/CC6FAC58-D227-4DD8-93D1-6D6A795577E3_1_201_a.jpeg"},"description":"I love Java and everything related to Java.","sameAs":["https:\/\/huongdanjava.com","https:\/\/www.facebook.com\/nhkhanh2406","https:\/\/x.com\/https:\/\/twitter.com\/KhanhNguyenJ"]}]}},"_links":{"self":[{"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/posts\/16749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/comments?post=16749"}],"version-history":[{"count":3,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/posts\/16749\/revisions"}],"predecessor-version":[{"id":16758,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/posts\/16749\/revisions\/16758"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/media\/16733"}],"wp:attachment":[{"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/media?parent=16749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/categories?post=16749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/huongdanjava.com\/wp-json\/wp\/v2\/tags?post=16749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}