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,
0:03 which is Click to Edit, click to add in our case to add a new
0:07 video. So how do we get started with it?
0:11 Well, it says "htmx is small" and then a link over here, and it will
0:15 say here's a min version, and we could just go view raw and possibly we could just
0:20 link straight to that thing, which would be fine.
0:23 That would work great. I'm not a big fan of using CDNs from different
0:28 places for different parts of our JavaScript.
0:30 Too often I found a year or so later they've decided they're not going to host
0:35 that anymore, and it's just gone.
0:36 It just stops working in ways that are really unclear to me> So what I did is
0:40 I downloaded that, and I put it over in our static files,
0:44 in the js section right there.
0:47 We've got both the non minified and the modified version, and we'll go and just use
0:53 the minified version. And in order to use this,
0:56 there's not like a CLI, there's not webpack,
0:59 there's not all this stuff going on,
1:01 check this out. This should be refreshing.
1:03 Here's our style sheets at the top, and at the bottom.
1:06 We can have some JavaScript. How do we get this in here?
1:12 We'll just like any other JavaScript,
1:14 we say <script src="static/js/htmx.min.js"></script>
1:20 Done,
1:24 we've now installed htmx, and we're ready to have it go,
1:28 let's just verify everything is working over here.
1:31 I'll just do a inspect element, console,
1:36 make sure there's no errors. Looks like our Source Map is not there for
1:40 Bootstrap, but you know what, Who cares?
1:42 That doesn't matter. Our htmx is absolutely working.
1:47 Here we go, you can even see it in action,
1:50 htmx right there. But what else do we have to do in terms of
1:53 JavaScript to make this work in order to like wire up events.
1:57 Remember if this was jQuery from way back when we would have to do like
2:00 a $document on ready. If this was Vue,
2:05 we'd have to create a Vue App and then wire the pieces together.
2:08 Well, the cool thing about htmx is,
2:11 it's running, it's done its thing.
2:13 All we have to do is put attributes in certain places and the magic is going
2:17 to happen. We've completely set up and gotten
2:19 htmx working with just this super simple one line of code right there, done.