Get Started With HTMX Using Bun, Hono & more!

okay I've seen too many memes at this point and people saying how great it is so it's time to check out HDMX this is what we'll build by the end of the video a good old classic responsive to-do app and yeah I know very original but what blows my mind is that we're somehow able to achieve this responsiveness by just writing HTML first thing I had to figure out was what HTM X is and I won't bore you with the details like what it stands for so what is the purpose behind this project their goal seems to just be keeping it simple simple to where you can build Dynamic single page applications without the need of any complex JavaScript Frameworks it's actually doing this by integrating Ajax and a few other things like websockets within HDML yeah remember Ajax it's actually making a comeback they're doing all of this through HTML attributes which is crazy and why I wanted to check this out the package is also extremely small so it's definitely got a lot going for it but how does it actually work in code the setup I have going here is pretty straightforward I'm using drizzle orm with a local SQL light database if you want to learn more about drizzle and how to set it up check out the video in the description but for for the schema I just set up a to-dos table this table just has three Fields an ID content and a Tim stamp the content is the actual text that the Todo will have but next I also have a seed script and this script just takes three todos and adds them to the database one for subscribing to code Brew one for liking the video and another one for checking out the other videos for the API itself I'm just using Hano with bun which just has one get request that return some text to start off we can simply just try out returning some HTML from the route instead of just some text which luckily Hano supports out of the box since we're going to be writing jsx and not actual HTML make sure you also change the file extension to TSX I want to create one more route just to emphasize this so we'll just do a slash different and again return some simple HTML this now allows us to go to two different pages which is great but we haven't touched on the HTM x yet to do that I want to create a layout component first and this layout is not only just to be reused across all pages but it also allows us to import a few things like HDMX and Tailwind we're also going to need all the base basic tags like HTML head body and inside of the body is where the children prop is actually going to go I want to import HTM X and we'll do that through the CDN option that they offer on their website so we just take that script tag and we can place it inside of our head tag we can do the same thing with Twi I'll grab the script tag from there get started page and now we have access to everything we need let's use our new layout inside of the routes that we created by wrapping our div tags in it you'll notice that the font changed which is a good indicator that Tailwind is now working but also if you look at the script tags in the browser both tags that we added should be there let me also quickly add some color to the background because the White theme is actually hurting my eyes and that's a lot better now that we have our layout figured out we can create a homepage inside of our Pages folder the contents of this component will obviously have to be wrapped in the layout but inside of here what we want our homepage to have is a component for creating a new to-do so we'll call this new to-do and then also a component that lists all of our existing to-dos which we'll call to-do list I'll add the components here and now we can can focus on actually creating them we'll start with the new to-do component and for now I'll just create it and return some text I'll also make sure that this text is white so it's readable but let's import it in the home component and now we can focus on the to-do list component which for now we'll just do the same thing by returning some text and that's just to show that things are working properly don't forget to also import this in home now that we did all this we can go back to our routes and delete the SL different route and we can modify the default route to now return the new homepage component that we created and if we did everything correctly we should now see the white text we added in our two components with that done we can actually focus on building something now so inside of the new to-do we can delete the placeholder text that we created and since we want this to be an input box for the user to type out their to-do and click a button to add it we'll put this inside of a form the form will have a label and a text area for the content of the Todo like I mentioned this is where we type out our Todo but next we just want to submit button which will create our Todo if we look at it on the front end and it won't look very nice at all I can barely make out the layout and the create is supposed to look like a button but doesn't look like one at all I'll simply just copy and paste some tellwin styling here if you'd like to check out the code for the project there will be a link in the description also notice that for the styling to work here instead of using class name like we're used to in react we actually have to call this like in regular HTML class but with the styling added this now looks a lot better for the to-do list I'll do the same thing with the styling but the goal here is basically to just have an unordered list that displays all our to-dos it also needs an ID so we can Target it later I'll just call this to-do list but we can now see that our list looks so much better it has a nice border as well but one thing I don't like here is the spacing so let's fix that real quick by adding some styling to the homepage and that's much better since we have our list I guess the first thing we should start with is populating this list with the todos that we have in our database from the seed script looking through the documentation it looks like running a get request on a route is pretty straightforward and we can also set a trigger for for when we want this to happen which for us is on load there's also a swap property which is able to Target a specific element where we want a response to go it seems like this is able to do a lot of things like replacing content adding to it or even just deleting it without doing anything else but the default is inner HTML which is exactly what we want we want the list of to-dos to just be displayed inside of our list tag all we have to do here is add the HX get tag for a get request and the route for it I'll just put it as/ API SL toos for now the trigger like I mentioned will just be on load and if we try refreshing we'll see that we get a 404 not found this is because we haven't created the route yet so we'll just create that route real quick and in here we can grab all of our to-dos normally depending on how many you have in here you might want to look into pagination which HDMX actually supports but I'll consider that out of the scope of this video for now we'll simply just map the todos to a to-do item component which we can create real quick it'll be just a list item which just shows the content and I'll also give this a unique ID which we'll come back to later but that's it our UI is now loading our list of todos from our back end next let's fix up our form in order to actually be able to create some todos building on what we learned with the list we want our form to submit the data by doing a post so we'll write an HX post to our / API too the target this time though won't be in our HTML again since we don't want the new too to replace the form all we want is to just add it at the end of the list and this is where the ID on the list comes into play We called it to-do list so on our form we can set the target as that and for the swap we'll do before end this will add it at the end of the list but if you want you can add it at the top or wherever you want for the route this route we'll simply just take the request coming in and grab the content field since that's what we named it next we just insert it into the database if for some reason that failed we can just return an empty block but otherwise we can return the to-do item if you were to try and use the create now you'll notice that we get a 5 00 ER which is odd well that's because by default HTM X sends our post request as a URL format it looks like they provide this extension which allows us to encode our parameters as Json I prefer working with Json so we'll add this to our layout really quick also don't forget to add the HX extension property to our form but now everything is working as expected the to-do is added at the bottom and we can even look inside a database and see that we have it in there one last thing I want to add to this is the ability to delete things let's modify our to-do item a bit I'll add some more styling and also I want to show the Tim stamp and an x button for being able to delete this to-do but with all the styling in place our list already looks so much better but before we do anything with the button itself I actually want to create the route first for deleting it'll be on the same/ API too route and all this does is just delete the to-do with the ID that was passed in since we're deleting I'll just return a check mark just because and a status of 200 now in order to send our data from our button to delete the item we can give the button a name and a value of the ID of that to-do and as expected this will have the HX delete property to the route that we created but for the Swap this is where we'll use the delete value this will just delete the element regardless of the response that we get back and this really depends on the experience that you want to provide but the target for this swap will be the exact to-do which is why we gave it that unique ID I mentioned earlier in the tutorial we also need the same Json extension and obviously we want to trigger this when the user clicks on the button and it looks like I put the status as 2011 instead of 200 so let me fix that real quick now if you don't want to simply delete the item regardless of the server response another alternative is to refetch that list whenever the delete happens in the documentation it looks like HTM X provides ways to update other elements as side effects basically and in this case I will use the trigger method where we can return a trigger from our delete route and whenever that trigger is received our list will will update itself to do this we just add the header HX trigger to our response and I'll call this to- do delete for our list trigger it fires off on a page load but now it also listens for the to-do delete header being returned from our request on our page I'll actually comment out the delete swap on the to-do item just so we can see the refetch in full effect but now you'll notice that whenever I delete a to-do another request is fired off that fetches all the to-dos again since we're working locally these requests are really fast and you won't notice the load but if we were working with a slower connection there might be a small delay before things disappear from our screen which is where the swap can come in handy but that's it we somehow achieved a functional and reactive to-do app through the magic of HTML in 2024 this was a really fun project to build and I love the speed at which I could get things done so it props to the HDMX team on that as someone coming from a lot of apps where my back end and my front and logic are split up it'll definitely take me some getting used to having all that logic Blended in together but maybe will be different for someone coming from something like nextjs if you enjoy the video make sure you subscribe and follow me on Twitter for updates and oh check out my articles on medium they take a while to write so

Channel: CodeBrew

Views: 4,468

Keywords: htmx, htmx tutorial, htmx and bun, bun and hono, bun and drizzle orm, htmx frontend development, htmx vs react, htmx course, htmx tutorial for beginners, htmx in 10 minutes, get started with htmx, htmx intro, what is htmx, codebrew, htmx in 100 seconds, intro to htmx, using htmx with bun, return htmx from bun, return htmx with hono, htmx with jsx, import htmx, htmx and tailwind, tailwind tutorial with htmx, htmx styled components, bun hono api, tailwind htmx, full stack

Id: arVNHfFCJfU

Length: 10min 11sec (611 seconds)

Published: Tue Jan 30 2024