Web applications need more than just html. You also need CSS, JavaScript, Images maybe even Fonts. All of these can be added to the resources/static folder in your SpringBoot application. Here I have added a phonebook.css file that will hold the custom css needed for my application.
And then you can reference them in your html file.
If you look carefully you will notice that there are TWO references to my phonebook.css file. The first is a normal href and it points to a path relative to where my html file is. The second is the th:href which references the css file in a @{}. This is one of the powerful constructs provided by Thymeleaf. As a natural templating engine I could open the home.html file in my browser from the filesystem and it will resolve the correct path to the css file, however when it is rendered by the Thymeleaf processor the original href tag is overwritten by the th:href tag and the @{} rewrites the url to an absolute base path for the application.
I also want to add Bootstrap to my application. I COULD just drop the entire bootstrap archive in to the correct css/js/images/fonts folders and then reference them using links just as I did above for the phonebook.css file. There would be nothing wrong with doing this and it would work perfectly but there is a better way.
Spring Boot applications are setup to support WebJars. A WebJar is a Java ARchive that contains all the css/js/images/font resources that you need for a particular application. You can add it to your project by adding a dependency to the WebJar that you require directly to the projects pom.xml
I have added a dependency to bootstrap v3.3.7 and a dependency to JQuery 3.1.1. I’ve also told the bootstrap dependency to exclude its own dependency on JQuery as it is an older 1.11.x version and adding the exclusion will help reduce the final size of the application.
Now I can add references to these webjars to my html file
Again I’m using the double href method. One pointing to an online version of the webjar and the other pointing to the internal version of the webjar. However this still isn’t great. I have to reference the version numbers in both the pom.xml file and the html files. If I wanted to upgrade to a newer version of Bootstrap or JQuery I would have a lot of files to edit.
There is an easy solution to this. Just add the following dependency to your pom.xml file.
And then remove the version number from the Thymeleaf version of the links in your html file and when it is rendered the locator will automatically dd in the correct version number from the pom.xml file.
While this still don’t update the standard url’s you only really need to use those standard urls if you are developing the html files offline so if you just need to update to a newer version of Bootstrap or JQuery due to a security fix and your testing scrips are done using the running application there would be no need to touch the html files anyway.