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