Python Web Apps that Fly with CDNs Transcripts
Chapter: Integrating Static Content
Lecture: Running the demo app
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
First step to writing some code is making sure that we can install and run the web app on our computers. So let's do that now Over here on the desktop
0:12
I've checked out the github repository for the code the one that I've introduced in the introduction to this course Now we don't have all the code
0:21
There's gonna be a chapter four and five and six because we're working our way through it, right? We're creating that code as part of the course
0:28
But other than that, this is exactly what you'll get when you check it out from source control.
0:33
So what we want to do is we want to run this web application in our editor on our computer so that we can play with it.
0:41
Now again, I'm going to be using PyCharm down here. You could also use VS Code. Those are the two good options. Now in order to do this,
0:49
you can see that we have some requirements that we have to install here. And in order to do that, we want to create a virtual environment.
0:57
So there's a couple of ways I could do that. I could open this in PyCharm and have PyCharm create a virtual environment.
1:04
It'd open in VS Code and then create a virtual environment or I could do the environment stuff manually. So you see how that works.
1:10
I'll do the manual way 'cause the others are pretty obvious. All right, so let's open up a terminal here. You can see that we have some requirements.
1:23
Now I'm a huge fan of using this tool called pip Tools. pip Tools allows you to state your top level requirements without version pinning.
1:33
So for example, here's a list of basically the stuff I said is the tech highlights of what we're covering,
1:39
Flask, Jinja Partial, SQL Model, and so on, okay? What we can do with that is we can run a command that says snapshot this and create a report
1:50
and requirements file that we can use to actually manage our requirements. And that is over here in the requirements.txt.
1:58
Notice how it says you have Flask 'cause you asked for it, but you have it's dangerous because Flask needs it. All right.
2:04
Now you don't need to worry about this and run those commands or anything. I just wanna let you know what's going on there.
2:08
It's also highly recommended there. All right, so I wanna first create a virtual environment. So that's Python, let's say Python 3-M, VENV, VENV.
2:20
not active yet, so we have to activate it. So I'll say -venv/bin/activate. Notice the prompt changed over here for me,
2:30
but it may change on the left for you, but it should change somehow to indicate it's active. You can always ask which Python 3,
2:37
and it'll show you where it is. On Windows, you would not say this. On Windows, you would just say venv\scripts\activate.bat. activate.bat
2:50
but we're not in Windows so we're not going to run that command, right? It won't work.
2:54
Now we need to install our requirements, but first let's say pip install -u for upgrade pip, make sure we got
3:02
the latest pip. I think it's almost a bug that Python always gives you the old outdated pip and then turns around and complains to you
3:10
that it's out of date. You should just upgrade it as you create a virtual environment, in my opinion.
3:14
Anyway, let's say, "pip install -r requirements.txt", that's the one you want. There it is.
3:25
Now we can see that they should all be installed at their latest version, more or less.
3:31
So excellent, we're ready to go and we can go back and now open this in our editor.
3:36
Again, you can open it in VS Code, you can open it in PyCharm, whatever makes you happy. We're using PyCharm on my end.
3:43
Now on macOS I can drag the folder and drop it here and it'll open. Let's make a little room for a second there.
3:50
In Windows you can drag files but not folders. Last I checked and so you've got to just go file, open directory and browse to it.
3:58
Same thing you can drop it on VS Code. Now PyCharm is a great tool but it has always had this kind of weird relationship with virtual environments.
4:09
It like it understands them and understands them. it kinda doesn't, then it does again, and then it kinda doesn't. At the time of this recording,
4:15
it's in a I don't really understand them anymore mood. I don't know why. Notice here it says Python 3.11, great.
4:22
But that is Homebrew System Python 3.11. Great, so we'll add a new interpreter, local, and it suggests exactly what we wrote.
4:32
But it says, oh, Warning, you can't do that. That's already taken. Guess what? Maybe you should just use it
4:37
like you did suggest it automatically earlier. Anyway, you got to make, go over here and say, use this one, and it should change down here
4:46
to start using the right virtual environment. Right now, the other thing that we're doing, there's two ways to work with the code here.
4:54
One, you can go into each folder. I can come over here and say, okay, right now I'm on chapter three,
5:00
make a virtual environment here and open this one. I'd like to work with a starter code sometimes,
5:04
so I'll make a virtual environment and open this one. You can do that. and it might be easier depending on the tools you're using.
5:11
Because for example, if I come over to my app and I say import DB, I try to run this, it's probably not gonna like it.
5:20
Let's give it a try, see what happens. Oh, it did work, okay. Looks like there's a leftover Python running
5:29
from when I was playing with earlier, gotta kill it. But the editor is gonna have some issues with this. For example, This is the working directory.
5:41
That's probably what it changed over here for running correctly is where is the working directory? Yeah, that's why that worked.
5:47
But over here in the editor, when it sees import db or from db import something,
5:55
it'll potentially look here and say, "Well, I don't know anything about that. I don't see any db here. I only see code and course image."
6:02
So what we need to do is come over here and right click and say mark directory as sources root. So in PyCharm, you can cycle between these.
6:11
I can say, oh, actually unmark that one and mark this one now because now I want to run that, that DB, not that DB.
6:20
Okay, so we can go over here and right click and say mark directory as in PyCharm and you
6:26
probably need to do that for everything to hang together just right.
6:30
So make sure you only have one of these marked as blue when you're running it in PyCharm.
6:35
Alternatively, like I said, just open up that folder as its own project or that folder as its own project. Let me quickly fix that port sharing issue.
6:45
There we go. I just had another copy running in the background. All right. So now we should be able to run our code. Starts up super quick.
6:57
Click on it. So there you have it, running locally on port 10001. There were some conflicts with the way we're sharing this over the internet
7:06
for the CDN along with AirDrop on my Mac, so 10001 is the port instead of the default 5000, but
7:14
nothing really special there, just trying to make that work and not conflict.
7:18
And here's our app, again, just like we saw before, as we click around, it's working great. So everything's set up, ready for us to make changes
7:26
to our code.