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