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 app.py
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 app.py. 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 app.run. 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 app.py.
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 setup.py 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.