MongoDB with Async Python Transcripts
Chapter: FastAPI Example
Lecture: Static Files: CSS
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I told you there were two things that we needed to wrap up.
0:05
One was this index page, quote page was included in the open API documentation when it clearly had nothing to do with the API.
0:15
The other one is, what the heck is this? This is a web page, right? This is supposed to be the page you see when you just go to the server.
0:25
You're not supposed to see a JSON response. one should have a message like welcome to our API, here's our docs, here's the things
0:31
you could call. Here's a getting started guide and then go into the API. At least that's
0:36
the way I see it. So what are we going to do to fix that? Well, FastAPI has integration
0:42
with Jinja templates, same things you probably know from flask if you've done that, for actually
0:48
returning real web pages. So let's add a proper web page here. The first thing to do, well, Let's have some HTML. Okay, so close that back up.
0:58
And I'm going to create a folder. And very, very commonly in Python, this is called templates, all the frameworks, so much
1:07
so that if I right click on it, I can mark directory as a template folder.
1:12
And that triggers PyCharm to says, go say, what kind of language are you working with? Are you working with Jenja, Django, million? Let's go fix that.
1:22
we'll make sure that we have proper chameleon auto complete and syntax highlighting out
1:28
of our HTML files. And it's purple. It's cool because it's another color play with that's
1:33
always nice. So then what are we going to do? Well, a couple of steps. The first thing
1:39
is we have to set up ginger and plug that into FastAPI. So up here, we can say from
1:46
FastAPI dot template in import ginger templates. So we come over here and say templates equals
1:56
ginger two templates. What we need to pass in here is just a directory. So we'll say
2:01
directory equals just the name, the relative name templates of this folder. So if you wanted
2:08
really to call it something else you could, but it's not really the convention. That work
2:14
yet. And there's the error I was looking for. So FastAPI uses ginger, but it doesn't have to.
2:21
And so it doesn't ship as a hard requirement with ginger. In order to use it, we have to
2:26
additionally install it, kind of like we saw with the argon algorithm for fast for passlib. So one more round through this world. And you do
2:39
use this to generate our requirements file, which in here has a ginger and we'll just install it down here, but you could click the button.
2:54
Excellent. So go away. Now we should be able to run our code again.
3:02
So the final thing is, wherever we want to refer to a template, right, first thing, we're going to
3:08
need a template, but then we're going to use this template object to render it as HTML dynamically.
3:14
So we come over here and say new HTML file, we'll just call it index, I like to call it the same
3:20
name as the function here. So index, index, index, index dot HTML index. Welcome, welcome to the
3:31
the PyPI API. Fancy, isn't it? I know, I can tell you're impressed. So then somewhere over
3:37
here, instead of doing this, we're going to return templates, template response, and then
3:43
we have to give it the name index dot html. And this can be a sub path name and have directories
3:50
and sub folders and all that kind of stuff. But it's start here is the route and then
3:54
go down so we could keep going from there. And then we have to pass in a data dictionary.
4:00
So for example, if we have, it's called name, right, something like that, we're going to
4:06
pass that in, we would come in here and we would say name equals the app. There's one colon, it's a dictionary.
4:17
Here's one other thing we got to pass in. And that is the request.
4:30
ginger needs access to the starlet request so that we can so we can do its job basically and write out the HTML.
4:38
So we got to come over here and say this takes a request, which is a type of starlet request. All right. We'll clean up.
4:49
So we're using this HTML file passing this optional data and this because it's required by the page and ginger the runtime needs that.
5:00
Hit it again. Whoa, look at that. Welcome to the pipe API is called the app. And we can view source. And there you go.
5:13
That should look really, really familiar, except for that part right there, is that part right here. Super cool, right? Well, this is fun,
5:22
but let's make a more realistic look on one. Let's just put in a little bit of, hey, you could click these links to try them out really quick.
5:30
IPI demo app. Rerun that, just to get it to reload the template. There we go. That looks good, but more importantly, now it looks like that.
5:40
not much to see, but if I click it, now I can sort of interact with the API instead of just getting either a 404, just greetings as a JSON document.
5:51
Okay, so I'll leave it as an exercise to the user to go and improve this. Obviously, it's not great, but it's at least when you open up the page,
6:00
you go in, you get a little bit of something that feels like it's a working website. So that's what the whole goal of this is.
6:08
One final thing on this serving up HTML, actually I have a whole class on building full web apps with FastAPI, if you wanna go check that out,
6:16
it spends a ton of time really working on the nuances of making this side of FastAPI awesome. But just really quickly, if we just wanted to appear
6:24
in this header, we just wanted to have some kind of style sheet link, like /static/site.css. Well, it doesn't exist, so that's a problem.
6:35
But even if it did, right? This is also another layout convention is to have static here and let's even do CSS. So we'll have like a CSS.
6:50
Even if this were to exist, notice PyCharm is starting to think part of the string is okay. I'll have a new style sheet site.
7:00
And we could take this little style this a dot visited over here. Put it in there. Let's also say body background. Right, it's yellow.
7:14
Okay, so that should work. We have our page is referring to it. And it is there and pi charm noticed thought it was okay. Hmm, well, that would purple.
7:27
And it's not yellow. Something's wrong. If we look at the network, you see we're getting 404.
7:34
So the final thing to do, you want a real app, just to leave it at this, is we have to do a little bit more on this configure routing.
7:42
So up at the top, let's say, from starlet.static files, import static files. We're going to, in the configure routing, do one more thing.
7:54
is when I say API dot mount static. So that's the URL to this folder. And then what are
8:04
we going to put in there static files, and this thing takes a directory, which so happens
8:11
to also be called the same static in a name equals static. Whoops. That belongs to the
8:25
mount call. There we go. And again, so this tells FastAPI to serve up static files. Well,
8:34
technically it tells starlet the foundation of FastAPI, serve up static files out of
8:38
there, which gives us a chance for this to not be a 404. And instead to work and turn it into this
8:44
yellow. I'm not sure I want to leave it this way. But maybe I'll leave it this way. Anyway,
8:51
you can see clearly that this now is serving up our CSS file right there. Excellent, excellent.
8:59
Maybe the last thing just change this title. That's kind of silly to have it like that.
9:02
refresh it. All right. Now, if you bookmark it, it doesn't say title or untitled or whatever
9:13
the heck it might say. It just says here's your demo app. Cool. Well, you've learned
9:19
a little bit of FastAPI if you haven't used it before. And if you have used it, now you
9:23
know for sure how to plug in Beanie and the async MongoDB stuff and even the identic models
9:31
that come back from Beanie when you can plug them into or use them in your API responses and maybe when you shouldn't.
9:38
We set up the routing, including static files. We used router so that we don't have to jam everything into one file, which is not the way to do it.
9:47
But we put our package API endpoints here in the package API folder, as well as the stats one over there.
9:58
the on startup async event to run the connection to Mongo through motor and
10:05
beanie correctly on the right event loop. And finally, we set ourselves up for
10:12
success in production by doing all the setup plus running the main or just
10:17
configuring the routing and not actually starting the server. So that's it. That's
10:22
our FastAPI integration. We're going to come back to this and do some more
10:25
interesting things with it later in the course, but hopefully this gives you a good sense
10:30
of why you would choose Beanie, why it's awesome to have Pydantic involved, why it's awesome to have async queries as part of Beanie.
10:38
It all comes together in frameworks like FastAPI.