![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8stqk7vbzxnu4rcf0ci.jpg) So, you want to create a front-end for your app, and you're gearing up for the next step. These days, it most likely means considering one of the three horsemen of JavaScript frameworks: React, Vue, and Angular... and perhaps Svelte (which I've heard is pretty alright). If just the thought of this phase of development exhausts you, you're likely suffering from JavaScript fatigue. This is when everywhere you turn, it's JS! and you're just bored or tired of it. What makes it even more exhausting is when you have to use a JS framework to create a simple admin page that could have just been an SQL query, to be honest. If you're anything like me, you'd probably try to sidestep this situation by using server-rendered pages and just hurling HTML at the browser on every request. Even though this might seem a bit crude, I'm okay with it, but management might not appreciate the lack of some interactivity. So... is there a way to do most of the rendering on the server and add that little bit of reactivity to the page without succumbing to the Deception of React, the Temptation of Vue, and the Biblical Leviathan that is Angular?" _"Come to me, all you who labor under the weight of JavaScript, and I will give you rest. For my use case is easy, and my burden is light." - HTMX_ In this blog we will be making a full-stack app (without DB) using HTMX, server side templating engine in Thymeleaf and Spring Framework for the backend. I hope you enjoy it. Full code can be found [here](https://github.com/JosephVoid/htmx-with-spring-boot-and-thymleaf) ## What is HTMX From the official [site](https://htmx.org/docs/#introduction), "Htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript" So basically HTMX is JS library (How ironic), that enhances your page to access things HTTP requests and events directly from HTML tags. You can use these handles to initiate actions and react to events without a single code of JavaScript. Pretty cool. You can read more about this on their documentation page [here](https://htmx.org/docs/#introduction). ## What are Spring Boot & Thymeleaf Spring Boot is a Java-based framework that provides a streamlined approach to setting up and configuring Spring-based applications, reducing the burden of manual setup and allowing developers to focus on writing business logic rather than dealing with infrastructure concerns. Thymeleaf, on the other hand, is a modern server-side Java template engine that enables developers to create dynamic and interactive web pages. It seamlessly integrates with Spring Boot, allowing developers to easily generate HTML content using natural and readable syntax, while also providing powerful features for templating and data binding. ## Why do this? (For the haters) In an era where Java seems to fall out of favor with many developers and JavaScript frameworks overwhelm us daily, undertaking this endeavor is akin to a rebellion against the dominance of frameworks and a light jab at those who dismiss Java ## How to do this Now that we got all the concepts and biases out of the way, lets get to implementing. You can follow along with the below steps or just go straight to the repo here. The first step is: #### Setup As with every spring boot app it's easier to go to the spring initializer site (https://start.spring.io/) as select the starter dependencies and other configs. For this project select the following dependencies - Thymleaf (this is our templating engine, renders our HTML) - Spring Web (this is essential to build web applications) - Spring Boot Dev tools (For live reloads, this is optional) Since I want this blog to be focued on the front-end part of the application you can implement/see the controllers and configurations your self by going to this repository #### Create HTML Pages In the previous step we have laid out the functions/endpoints that our web app serves. Now lets see what it serves. Spring boot, with default configuration, responds with `application/json` response type. But what we want is for it respond to our request with HTML, so to help us with this, we have added Thymeleaf in our dependencies list. When adding Thymeleaf it auto-configures Spring Boot to respond with HTML files and fragments inside our `resources/templates`. Lets create the HTML files ``` resource/templates -- dashboard.html -- login.html -- fragments/ ---- core.html ---- dialog.html ---- head.html ``` N.B: Fragments are html snippets that can be returned by the server. Think an isolated `

` this is a fragments named `frag` Now lets build our HTML pages and fragments with HTMX included ``` //head.html HTMX Admin Panel ``` Our first fragment is the `head` fragment found in the head.html It loads up our bootstrap CSS and JS files, and most importantly the HTMX library which will allow to do some cool stuff. This fragment will be included in our main `dashboard.html` and `login.html` files. ``` // login.html

Login

``` This a regular HTML being rendered by Thymeleaf, we used the attribute `th:replace` to import a fragment and apply it in this html. This page is the login page, it send login details to the `/login` endpoint. ``` //dashboard.html

Dashboard

People

Id	Name	Description	Action

``` This is our dashboard page, it is first rendered by Thymeleaf. The `th:each="row : ${rows}"` attribute helps iteratively render HTML elements, in this case it loops over the rows variable passed from Spring boot and replacing the contents of children with `th:text` property. N.B: If an attribute has a `th:` attached in front of any html attribute, it will process the `${}` inside the attribute. For example `` when return from the server `row.desc` will be replaced/processed by thymeleaf into an actual value. With this in mind lets talk about the htmx attributes. In this page we use: `hx-get` `hx-delete` and `hx-target` we used `hx-get` in the line ``` ``` After render, you can ignore the `th:` attribute and replace the ${} with actual values. What this htmx attribute will do is send a GET request to `/edit-form` endpoint and replace an HTML element that has an id of `edit-dialog-body`(found in another fragment) with the returned html value. And this all is triggered by an click on the button. ``` ``` When this button is clicked, it will send a DELETE request to the `/delete` endpoint and it will remove an html element that has an id specified in the hx-target attribute ``` ``` In the `createmodal` fragment we have a form that is used to create an entry. It sends a POST request to /add endpoint when the form is submitted. When it receives a response to will grab the table (#main_table) and it appends the responded HTML (which is a row fragment); this is why we used `beforeEnd` on hx-swap attribute These are the main things about htmx mostly. You can take a look at the repository for the full code and more explanations #### Testing it out This is what it is supposed to look like after its done ![Finished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxb0e7ymb3qar3q8udrp.gif) #### My Two Cents Alright, now let's get down to the facts and caveats. While I appreciate HTMX and the simplicity it brings, there are certain tasks that are considerably more challenging to accomplish with it. In those cases, you're better off sticking with an established framework. Every website is not a simple informational screen - most of the time it requires heavy interactivity. However, if you find that a full-fledged JS framework is overkill for your basic internal site, for instance, I strongly encourage you to give HTMX a try. Stay safe guys Yoseph Tenaw

yosephtenaw

Use HTMX with Spring Boot and Thymeleaf

Join Our Newsletter. No Spam, Only the good stuff.