Bun, ElysiaJS, HTMX getting started step-by-step tutorial (with Tailwind styling)

hi this will be a step-by-step tutorial how to create your first application with B HDMX and Elia JS uh I will not skip any steps so you can follow along and you'll have your first application ready in about uh half an hour so let's get started um first of all we need to install BN if you don't have it already on your machine and after that validate that we have like a recent version so if you're own Mark uh you can probably the easiest way is just to use Brew like Brew install bum and it will do it for you uh but if you own other um systems uh there are installation instructions uh available in BN and probably the most universal one is to use the script that they they provide okay so after we've done that we can check that we have our bun ready and this is the version uh currently the most recent one um next thing is uh we will use uh Elia GS which is supposed to be one of the uh most popular Frameworks for web applications in bun right now there is hono uh and Bun and Elia GS uh I made a video about hono already uh but today it's uh about Elia GS actually uh so uh and they provide a template um that you can use to generate your application so it will be B create Elia and then your application name so in my case I just done bun create Elia and then Bia GS HDMX getting started and I'm already inside this project so the structure is really simple so we have our index.ts file typescript by default we won't use too much typescript features uh but I'll keep it as typescript uh for Simplicity so what we have here is we have our uh simple application which will start on the port uh 3 and we have one Handler for now just for slash like a root Handler and it will say hello Elia if we uh check our um uh package Json uh we'll have that we have some scripts predefined and we have this uh Dev one which is uh running BN with watch on our index TS so if we run uh bun um run Dev it will start our server on uh Port uh 30 and we'll have our response back all right so next thing that we want to uh to do is as we're going to use HDMX uh on the back end uh we need a way to build our uh HTML Snippets and uh as we are in uh JavaScript typescript world we are obviously we're going to use jsx as the format uh but to enable uh HTML we need to use a plugin in uh Alia if you search for something like Alia GS HTML you will end up on a page like this for the HTML plug-in so we want to grab this installation command and add it to our project so we just run Bon add HTML um it will install all dependencies that we need and after that we can use this import now um and after that you use uh use method here and we want to use HTML like this uh but also we want to add some configuration to our GSX to uh TS config so if you just grab these lines and go to your TS config scroll down it has by default all these comments we don't need them uh so we can just insert it here and put a comma right here and that's it um but now we want to build uh to use some H uh jsx here so we want to rename our file so now it will be um rename uh TSX and also in our start script we now want it to be like this so we need to restart our application because we changed the file name let's reload it still works and after that let's use snippet that they have here for HTML and we can just put it inside our um root Handler right okay and as we want to add some extra uh logic here later I just switch it to use return okay and now if we refresh we'll have um an HTML now back so for Styles uh we we'll use uh tailwind and we'll stick to the most simple way of using that is just to use a CDN uh probably not a production grade approach but we can experiment really quickly with this approach so now we have our Tailwind dependency and let's just add classes that they have here for our H1 so we have class and then we can just put it here and now we should see some styling here right yeah okay so let's build just a simple uh counter with two buttons uh to increase and decrease the counter and we will add some styling based on the counter value uh as well and uh the counter state will be on the back end so we'll just use um a simple constant here like a let uh for counter uh uh with initial value zero uh but this will be um like a database or any uh persistent storage uh that you can that you're going to use in your application uh we'll have access to that state from our backend really easily so we can use use it as a source of Truth so we don't have to maintain two uh state at like on the front end and on the back end and that's the main selling point of HDMX for me that we move all the logic and all that state to to the back end and we know how to manage that all right so yeah um let's start with just a div here and we will put some classes there so it will be uh container from tailwind and also the MX alter so have our things in the middle of the screen uh let's grab this H1 put it here let's say um HTM X counter example let's reload and see what we have right uh and also let's in add our inspector we will need our Network tab at some point all right uh after that what we want to do is we want to build some BAS basic HTML here we'll have our div and inside our div we'll have two buttons basically uh so button um it will be minus and button with plus and in in the middle we'll have an extra div with our counter value something like that let's see yeah uh looks terrible we'll try to make it a bit more fun with some styling so first of all I want to add a flex class here so we have everything as a as a line and then here let's add some Styles as well so we have uh P probably five to have some putting we will do rounded and uh background color um let's say gray something like that let's see how it looks all right um yeah let's add some padding here like M top 10 right um and also I think we can just add Gap here to be five or something so we have some spaces between yeah um let's copy these Styles now for the other button we also want to align uh the counter uh in the middle so uh what we can do is we just use item Center I think the class is called yeah now we have everything aligned all right so I I think it's time to add some um some Dynamic features here so we'll have our end points for increment and decrement the counter and uh to do that we need to bring htx dependency and again we'll stick to the simplest approach but actually it's not bad like anyway like we basically just want a script here um and in production the the more ction grade way is just to copy this Library locally and serve it as like a static asset anyway so let's bring it here uh let's reload this thing and now we have access to uh defining our custom attributes right so we will do let's say we want post for that like HX post and then um it will be be decrement and then here we'll have the same but call it uh Inc let's reload this and clean up our um Network Tab and now if we click on plus we'll see that it was actually it's fing the Ajax request for us so the library knows that if your HTML element has H Expos attribute uh by default on click it will be firing a post request to this end point and of course we don't have it we don't have it now uh but yeah we can we can fix that and as we are in the same file right so we Define All Our Roots here uh we can just do it uh as a new root so it will be uh post as we discussed uh we will have um ink let's say Tech first right and then the format is we have our context but it could be empty as well and then we do something like this um and here we want to mutate our counter counter minus minus one and then we want to return some HTML for our counter value right let's reload this um now if we click we see something weird but basically it's what we asked uh HTML htx to do so response of this uh request will be a HTML snippet uh where's the response yeah it's here so it's HTML uh row HTML looks like this and this response uh is replacing our button um in our HTML so to fix that what we want to do is to say uh we want this ID of uh counter to our main div and then um uh now here we want to use HX uh Target to be uh our ID counter right um and also there is uh HX swap uh which is by default uh the inner section of HTML element if you want to replace the entire thing you want to do alter HTML okay uh let's let's reload this and try it again uh the problem why it's not working if you click uh second time is because when we return our h HML uh for our um uh post request uh we are losing the ID of the counter so we want to put ID here I think now it should work as expected all right so now it's time to implement the same thing for our increment um and after that we it will be time to do some refactoring uh we can reuse a bunch of of uh components here and it will it will be a nice demo how you can split uh common things into components uh similar to what you do in react but obviously we're not using react here at all all right so now it will be increment um the other proms are exactly the same right and we want to add uh a new post here for for the ink uh it will be plus now and everything else stays the same let's reload we now have this plus working and minus as well um and it's time to do to do refactoring so what I suggest we do is let's create a [Music] um counter button component and we will return this button thing uh but we'll parameterize that so we'll put a URL we will put um uh Target and we will put um let's say let's call it icon probably for for this uh symbol here and we can use it like icon and then uh Target right so this will be Target Target and then um this will be our URL right and we want to return this return okay uh looks good and now we can reuse this component where we had our a button so it will be something like this uh and we want to pass URL to be uh decrement uh Target will be um counter and what else yeah it was [Music] um oops and the other thing is uh the icon right icon will be minus we want the same for our um plus button now it will be increment the icon will be plus and Target will be the same probably Target could be hardcoded inside component but whatever should still work yeah but now we have the reused component and the other thing I suggest we do for uh for the counter value uh counter component let's say and we want to return we want to return our div like this um and yeah so to make it like a pure component we probably want to pass the counter inside and then we want to use it here counter component counter counter and um now we can use that uh in our um htx response handlers as well right let's reload and it's still working and the final thing is to add some logic uh inside our uh counter um let's do it the simplest possible way so I just want to do something like if we have U counter value uh greater than zero uh we want to add like a green background um so it will be background green 200 uh if not we want to add account red 200 so now zero is gr yeah it works fine and not that we we are doing an HTML like Ajax uh request back to the server on each of these clicks so there is no State on the front content we just rely on the state from the back end and that's the power of htx uh and also I really like that uh in a language like JavaScript uh when we have a native support for HTML because of react and because of jsx uh it's really easy to work because you have your HTML basically live together with your code and that's what I really like uh the other grp great example of that is closure and hicup Library uh you can do the same things and you have uh probably much more strong core library to work with collections but that's completely different story um I hope you really enjoyed the video and that's it for today I'll share the code and you probably find the link in the description uh if you're interested uh but also don't forget to like subscribe and uh leave comments and also there are multiple ways to support my work by subscribing here on YouTube or buy me a coffee or my substack uh blog thanks a lot see you next video bye-bye

Channel: Andrey Fadeev

Views: 2,124

Keywords: bun, elysiajs, htmx, tailwindcss, tailwind, elysia

Id: 3F7cqnZrzA8

Length: 21min 14sec (1274 seconds)

Published: Sat Jan 27 2024