HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Surveying the non-js-enabled Flask app
Lecture: Setting up and running the Flask app

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Here we are in our GitHub repo for the course. When you get to it
0:04 I'm sure there'll be a lot more things going on.
0:06 But we're going to start from the beginning and here we are with our starter video
0:10 collector Flask web app. In order for us to explore it and run it,
0:14 the first thing we need to do is open it up in an editor,
0:18 install some of the configuration files,
0:20 the requirements and then we can go and run it.
0:23 So we're gonna use PyCharm and drop this over here and PyCharm will
0:27 open it up. That only works on Mac, if you're on Windows or Linux,
0:31 just click on file, open directory, browse to that.
0:34 PyCharm has noticed that there's no virtual environment but that we have a requirements.txt,
0:39 so he thinks we should have one and offers to create it for us, which
0:43 is great. We come down to the terminal and do a pip list,
0:51 see what we've got, it's actually already installed,
0:54 Flask and everything that's specified here in the requirements file, except for, it didn't update our
0:59 pip, did it? Let's go and do that real quick as well.
1:02 Just so we don't see warnings for the rest of the course.
1:04 Great, we've got our system all set up and ready to go.Before we look
1:10 at the code, I think it makes sense to just run this app and see
1:13 what's going on. So in PyCharm we have no run configuration.
1:17 We have to go over here and right click and say run 'app'. Fires up our
1:21 Flask web app after just a second.
1:25 And here it is! This is our video collector.
1:28 Your favorite videos, old school,
1:30 Yahoo! style. So what is this thing about?
1:32 Well, it has categories of videos. Here,
1:35 You can see five categories on the screen.
1:37 Apple, EVs, JavaScript, Racing and Python,
1:40 you know, Apple has six videos.
1:42 same with EVs, JavaScript five, Racing has eight.
1:45 And if we dive into one,
1:46 like if we go to racing,
1:48 you can see here that we've got some driver coaching stuff about trail braking,
1:53 Romain Grosjean's first IndyCar race.
1:56 Some stuff about Formula E. This one's kind of this crazy video here about this
2:02 SIM that this Australian guy put together, and if you click on them,
2:05 they'll actually play. So here you can see this guy driving in his, here,
2:11 uh go back and see this IndyCar start.
2:16 So these are real videos that we got off of Youtube and we put them into
2:21 these categories, and it's Yahoo! style because we're just kind of keeping track of the ones
2:25 that we like, right? we save them to the categories and whatnot.
2:28 That's how Yahoo! used to be in the early days.
2:30 It was literally like the yellow pages of the internet.
2:33 Very weird. The other thing that we have up here is this little dot, dot,
2:36 dot hamburger type thing. And if we click it,
2:39 see it spins for a while, thinking,
2:42 thinking, thinking and then eventually it gives us every single video on the site.
2:47 Oh, that seems not ideal.
2:50 Wouldn't that make a lot of sense to do like an infinite scroll? and over here
2:55 when we're in a category, like one of the python category,
2:59 what if we wanted to add a new video?
3:02 Well that "Click to Edit", right
3:04 there would be super handy. And if you don't really know what videos are interesting,
3:08 maybe a little search. We have no search
3:11 placeholder, anything yet. We're gonna have to write that entire page.
3:15 So this is the application that we're going to be starting from in order for you
3:19 to get started and run it yourself.
3:21 Just make a copy, so you have the original.
3:23 Of course, as you evolve it, create a virtual environment, pip install -r requirements.txt
3:28 after you've activated environment, run That's it,
3:34 you'll have this site up and running right away.