HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Installing htmx
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It's time to start using htmx to add our first feature, which is Click to Edit, click to add in our case to add a new
0:08
video. So how do we get started with it? Well, it says "htmx is small" and then a link over here, and it will
0:16
say here's a min version, and we could just go view raw and possibly we could just link straight to that thing, which would be fine.
0:24
That would work great. I'm not a big fan of using CDNs from different places for different parts of our JavaScript.
0:31
Too often I found a year or so later they've decided they're not going to host that anymore, and it's just gone.
0:37
It just stops working in ways that are really unclear to me> So what I did is I downloaded that, and I put it over in our static files,
0:45
in the js section right there. We've got both the non minified and the modified version, and we'll go and just use
0:54
the minified version. And in order to use this, there's not like a CLI, there's not webpack, there's not all this stuff going on,
1:02
check this out. This should be refreshing. Here's our style sheets at the top, and at the bottom.
1:07
We can have some JavaScript. How do we get this in here? We'll just like any other JavaScript, we say <script src="static/js/htmx.min.js"></script>
1:21
Done, we've now installed htmx, and we're ready to have it go, let's just verify everything is working over here.
1:32
I'll just do a inspect element, console, make sure there's no errors. Looks like our Source Map is not there for
1:41
Bootstrap, but you know what, Who cares? That doesn't matter. Our htmx is absolutely working. Here we go, you can even see it in action,
1:51
htmx right there. But what else do we have to do in terms of JavaScript to make this work in order to like wire up events.
1:58
Remember if this was jQuery from way back when we would have to do like a $document on ready. If this was Vue,
2:06
we'd have to create a Vue App and then wire the pieces together. Well, the cool thing about htmx is, it's running, it's done its thing.
2:14
All we have to do is put attributes in certain places and the magic is going to happen. We've completely set up and gotten
2:20
htmx working with just this super simple one line of code right there, done.