Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Your first Flask site
Lecture: Demo: CLI starter site

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Now we're going to both use PyCharm as well as just the command line interface to create our first little demo site.
0:08 Let's get started by choosing the command line interface. With this way you're going to see all the little steps every single thing that you got to do.
0:15 With PyCharm, you might check a few boxes and push some buttons, and things that you'll see here will happen behind the scenes.
0:22 So, this might take a few more steps but it's also going to show you exactly what's going on. So, here we are on my computer.
0:28 And we're over in the GitHub repository for this course. What we're going to do, is we're going to go into
0:34 ch04_first_site. The first three chapters had no code. It's time to rectify that for the rest of the course by the way.
0:41 So, we're going to start at chapter four. And we have first_site final, and starter. Remember, when I talked about following along
0:47 I'm going to show you, or provide you the code that we start with and end with for each chapter.
0:52 Well right now, the starting code is basically non-existent but in the future, maybe we've already set up the database in SQLAlchemy
0:59 and now we want to add some kind of form input or something. We don't want to rebuild the site from scratch
1:03 so we're going to kind of have these save points along the way and we're going to work over here in final. Now the first thing that we want to do
1:12 let's go into there, just copy that. See it's empty. So what we need to do, is we're going to go
1:18 and create a virtual environment, that was our first step. Or what I could do is I could type Python3 -m venv venv
1:26 That will create it. And then I could activate it. And of course, pip and setup tools are always out of date so we could then go and upgrade those.
1:35 But what you'll see me do throughout this class is I have a little alias that I've defined, that does those three steps.
1:44 All right, so I'm just going to run that here. And we can see the prompt changed and if we ask which Python it is now, this one right here.
1:54 By the way, sometimes people ask me how I get this shell and this little git status tracking and so on. This is Oh My Zsh or Oh My Zshell.
2:03 Check that out, that's very cool. I definitely do recommend it, but it's not required. Okay, so now we have this, the next thing to do
2:08 is to go and make our folder structure. So we've got our app right here. Let's suppose that this directory that we're working in
2:16 actually, we'll just make a directory called first_site or something like that. I want to go into first_site, and in here
2:24 we're going to have things like templates and a static folder and those are kind of standard. We're also going to have something called views
2:34 and this is where we're going to put all the view methods. And we're also going to have something called viewmodels.
2:39 So, this is a design pattern that I really like that I have adapted to the web. And I think it is super, super powerful.
2:44 We have a whole chapter on it later. Let's just make the structure for it now. And make another one for data, so where our data models go.
2:51 And then finally, let's not throw everything just into the root of that static folder. You're going to have a lot of static files
2:57 so let's make a static js, a css and an img. You can make them short, long names, javascript, or js whatever, it doesn't really matter.
3:06 So now if we look here, we have all the stuff and we upload of it, we have our virtual environment. If we look down here, you can ask for a tree
3:13 and we can ignore the rich environment we don't want to see that. Here's what it looks like. We have our first_site, we have data
3:18 we have our structured static file here. We've templates, view models, and views. The other thing that we need to do is we need to have our
3:29 and probably a good idea to have our requirements.txt I also like to have the -dev. The reason is, I want to put stuff for
3:38 like, testing, continuous integration other helpful tools for me in here that don't get installed on the server, but, you know
3:46 I always install this one when I'm working on it and then this is like the production line and the bottom one imports the top one.
3:53 Okay, so now everything's up and ready to go. We're going to need to edit our And just so we don't talk to PyCharm yet
4:01 let's just open us up Visual Studio Code. And we just have to do a few things. We're going to have flask, we're going to
4:07 define an app from flask, we'll say flask.Flask. I'm going to pass that dunder name in there and then we're going to have a method.
4:17 That's going to be our view method. So I have an app.route. So we'll just have a quick index method here
4:22 takes no parameters and it's going to return hello world. And the simplest thing to do is say There's better things to do in practice
4:30 but that's what we got. Okay, so we should be able to run this assuming that we've edited or somehow installed our requirements.
4:39 We'll work on that in a moment. Let's just pip install flask. Now here we are with our app. We can just say Python
4:53 Looks like we have our flask app running. Notice it's running in production. We'll talk about how to alter that as we get into a real app.
4:59 But for now let's just see what we got going on here. Well look at that, hello world. Make it more impressive, I'll zoom it.
5:08 There you go, hello world. That's our app. So we've got our basic structure here. Our tree that we can look at
5:15 so we've got our first_site and all that code here. The reason I put this in a sub-directory is we ultimately may want to install this as a package.
5:22 It makes some of the testing and other things slightly easier when we do that. Slightly easier for her to parts without worring
5:28 about partial relative paths and things like that. So, that allows us to put the and other stuff
5:34 outside of the site itself, that's typically how that goes. So, here's our code. We've got our static section
5:40 our templates, our view models, our views. Haven't done too much of that yet but this is the general structure we're going to use to get started.
5:48 We'll put flask in here, maybe pytest in there and whatnot as we go. But this is our first_site, and this is how you do it on the command line.

Talk Python's Mastodon Michael Kennedy's Mastodon