Build a Simple HTMX Project | HTMX Explained with Examples

[Music] hello and welcome I'm Dave today we're going to look at how HTM X makes it easy to build a simple crud application and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there hey guys I want to give a quick introduction to HTM X today now let me start off by saying HTM X is not HTML so if you found this tutorial because Google thought you meant to say HTML that's not right so if you're also just starting out with HTML this tutorial isn't for you this tutorial is for people that already know HTML because HTM X is built on that foundation and also it's a JavaScript library so it's going to help if you know a little bit of JavaScript although h HTM X approaches things entirely differently so let's take a look at HTM X so before I pull up vs code notice I'm on HTM x.org let's go to the docs and here we can click installing and I just want to point out that I'm going to use a CDN and pull in the HTM X Library into our HTML page however if you're going to deploy an app in production they recommend you actually download a copy like you see here on the page so there's instructions here in the docs now let's go to vs code okay I'm in VSS code now and I've got my index.html open and this is a simple to-do crud application crud meaning create read update and delete and anytime I'm learning something new that's the type of application I like to create because it walks me through all of those HTTP actions that I would normally take and that is reading all of the to-dos creating a new to-do updating existing to-dos and possibly deleting to-dos so now you can see here in the head section I am pulling in that HTM X Library as the docs indicated so now let's just look at the rest of the page and it's like the simplest to do uh application that I've ever created and that's because this is all there is to it and this is the strength of HTM X and why people like it now HTM X does require a server so it's offloading a little bit of that complexity to the back end and you may or may not be familiar with backend development and if you're not I suggest you check out my node.js course that I have on my YouTube channel and from there you'll learn how to create a backend that would interact with HTM X or any other type of JavaScript library or framework you might be creating an application with I'm going to show you a little bit of what I'm using today it is no JS but it's something different as well but first let's look here at the front end and you can see I've got a form and this form has an HX post attribute now that is unique to HTM X and it is saying post this form data to this address and after that it also has HX Target that's something else that is unique to HTM X and that says Target what you receive after submitting this form whatever you receive Target this element here and notice this has the ID of to-do list and that is what the target is set to so when we get something back after submitting this form we want to put it inside of this element notice it's an ordered list but also notice that there's no list items here right now that's because you need your server to send HTML not Json data but HTM X expects to receive HTML so whatever it receives whatever type of HTML it's going to go inside of this order list so as you might expect I'm going to have my backend server send list items those list item elements the LI as a response after I submit a new to-do also notice here the ordered list itself has an HX git so it sends a git request to this same URL but this is a git request not a post request and from here it's also triggered by the load event so notice this HX trigger attribute and it says when the page loads trigger this git request it's going to get that same HTML payload here and put it inside of this ordered list and that's all we have in our page so we've got a get method and a post method and we have the target where the HTML will show up we also have a trigger for when the page loads but what about the put method that we would use to update our to-dos with and the delete method well that needs to be in the list item elements themselves and we can only see that by looking at the back end because the back end is what sends this HTML so let's take a look at that hey guys I hope you're enjoying the video you may be surprised to learn that three out of every four viewers nearly 75% of all people who watch my channel aren't subscribed so I just wanted to take a quick second and remind you to hit that subscribe button it really helps me out and if you really like my videos you can get exclusive content and support my channel even more by joining my patreon at patreon.com davay thanks for your consideration and now back to the video so I have a simple nodejs server set up and I'm using hono for this now I'll quickly show you that web page as well hono quickly allows you to set up a backend server and I might do a separate video on that as well so let me know in the comments if you want to see that but now I'm just going to quickly go over what HTML is created on the back end and how it is sent to our HTM X so notice here I've got a helper function called get list items now this helper function creates HTML and notice here I've got an input and then I've also got a label and a button so this is for our update and delete actions it also lists out the list item so this input is a checkbox that's what we're going to do if we check off a to-do item and it's going to update that item but notice here is the HX put inside of the list item so that is the put request it has a trigger so it's listening for the click event and after that it's also got the same Target back to the to-do list so as one of the to-dos are checked whether it's completed or not then it will once again put in that request and update the to-do item and then send back that HTML that we have with the git list items function now here is our label as well and then here is a button for deleting the to-do item notice it is HX delete so that goes along with that method so we've covered all the methods now we've got our read method which would be the hxg we've got our create method which is the HX post update which is HX put and delete which is HX delete this is also triggered by a click and the target once again is still the to-do list where we want to see all of the to-dos listed out after they are updated deleted whatever happens to them so this is the helper function and I'm just using it inside of each of the methods to get the list items to send back as HTML we see here so let's quickly look at just one of the endpoints here in the back end here is the delete endpoint it receives the to-do ID it takes care of all of those things with the data then we get the list items and you can see I am just returning HTML now if this looks a little bit different than you're used to seeing in a node.js server once again it's because I'm using hono let me quickly show you that web page so you can look it up and remember to let me know in the comments if you want to see a video about using hono as well so you can find hono at hono dodev and it lets you set up a backend server very quickly now you don't have to use hono though and this video isn't about that I'm just saying HTM X needs some type of backend server you could easily use node.js and express if that's what you're familiar with and that's what you want to use going forward and there's other backends you could also use so I'm just saying that's what I'm using in this tutorial check it out if you'd like and maybe I'll make a video about that but here back to HTM X itself it's just the easiest way to create a simple application I have found nothing else that lets me put so so little I should say in the one file and let me pull that back up my one file for my to-do list here is the index.html now the downside is it's fairly well tied to your back end noticed I was creating some of that front end HTML because HTM X expects to receive HTML so I was creating some of that in the back end and you may not like that you may not like those being so tightly coupled and that's the one downside I see but overall very easy to make simple apps with HTM X okay all of that said let's go ahead and start up the application now I'm going to provide this code in the description and note it's a mono repost so you want to run your back end in one instance of vs code and your front end in another so here we'll open up the back end first and then notice I am also inside of the Mya directory here at least the way I have this what whatever directory I end up putting in the repository you'll want to open that up and then type npm runev this will start your backend and notice it's on Port 3000 so the front end code that I had here with HTM X notice it's targeting Local Host 3000 and going to this to-do in point as expected so you shouldn't have to change that you can start the HTM X Project just like you would in HTML project just click go live if you have live server installed and I do recommend that live server extension for VSS code if you don't have it just going to click go live and it will launch it as if it's on a ser server and notice I didn't add any CSS to this at all I was just interested in the functionality of it and this starts out with three basic to-do items so we can add a new to-do and I'll say hey press submit or press enter for submit and it quickly adds the new to-do we can update it and just like that we see the updated to-do list with the check mark Or we can delete this to-do as well so it works just like you would expect something that you've created with vanilla JavaScript or react but it's just so simple on the front end HTM X is very nice for these things and of course you do need that separate backend to interact with but it needs to send HTML not Json that's the key hey guys I just started a patreon and I'm already giving a shout out to Lad he's my first Patron at the senior tier and that means he gets shown in the credits at the end of each video remember you can get my exclusive content and early release content at patreon.com / davay remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 9,753

Keywords: simple htmx project, htmx, htmx project, htmx app, htmx for beginners, htmx explained, htmx examples, htmx explained for beginners, htmx project for beginners, htmx beginners, htmx crud app, htmx code, beginners htmx, htmx lesson, htmx tutorial, easy htmx project, easy htmx, simple htmx, source code, htmx vs javascript, what is htmx, htmx vs html, htmx for students, htmx vs react, learn htmx, htmx example

Id: te_lYPEDycc

Length: 11min 49sec (709 seconds)

Published: Tue Feb 20 2024