Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Static files
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
You might be thinking: hey, this belongs in a CSS file so that you could maintain it separately, just like we did with our HTML and Python.
0:09
Maybe you wanna I don't know, have an image that you show on your website or use JavaScript.
0:14
Well, those would be files in a static folder that gets served directly, not through some sort of processing that FastAPI might be doing.
0:23
And some frameworks come with this built-in or defaulted like Flask automatically you can go to /static and just serve stuff out of there.
0:31
FastAPI doesn't work like that. You've got to explicitly enable static files in two steps or three.
0:38
So what we're gonna do is gonna create a folder, directory called static. And in here, let's just create something simple.
0:46
We'll do a "site.css". In our site, let's go and move this over. <style> here. And let's change the color just slightly. So you get a sense of,
0:57
you know, here's something different. Let's make it like a light blue, maybe purple. Anything different is all we need.
1:07
And then let's go over here and try to include it. So we have a style sheet and check this out.
1:12
If I select, type /static, I'm already getting some completion here. You get even better completion if you go over here and mark directory as
1:21
a resource route. But it seemed like that worked pretty well for us. And if I run this, let's go and see what happens.
1:30
Well, where did our green go? Green is gone because I took it out of the page. But why isn't it purple? Well, because this is not working.
1:38
If I try to click, this is cached again. But a quick click this, not found, can't serve that. So the fix is easy, but not obvious.
1:47
Let's go over here, told you we're doing more and more things in these various stages, which is why I broke it out. I want to go to the app,
1:53
and I need to mount the static folder. And then what I need to do is pass along this thing called StaticFiles, and that comes out of Starlette.
2:03
Not FastAPI, FastAPI is an API framework built upon Starlette, so a lot of times you'll see things like request, response things or this actually being
2:14
driven by Starlette. We'll go in here, we're going to give the name of this as well. "static" like that. I think we gotta explicitly do it.
2:22
These are all keyword arguments. And then, if that wasn't enough static, we're also going to say name="static" like that.
2:30
All right, You would think this might do it, and it will get us part of the way there. Check this out. It says if you're going to use static files,
2:37
we would like to be able to serve them asynchronously as fast as possible without blocking the rest of the requests. A really cool way to do async
2:46
await file access is with this package called aiofiles. So, in order to use this feature, we have to install this extra library to work with it.
2:55
So we're gonna come over here and say we're gonna use aiofiles. We would have basically done the same for Chameleon,
3:02
but this package already depends upon Chameleon, so it solves that. So there's a bunch of things like this in FastAPI that are not used by default.
3:10
But if you want to use them, you're gonna need to install additional dependencies. So yeah, and that's not misspelled.
3:17
Let's try one more time. That should be all the hoops we got to jump through,
3:20
create the static folder, mount the static directory with static files, and add and install
3:25
the aiofiles package. Wuju! look at that, purple! Doesn't seem like a big deal.
3:32
But that is our CSS file that we're now able to serve right out of here and for some reason, that keeps getting cashed, the view source.
3:40
But there it is. There's our CSS file that we created, and we're serving out as a static file, so it doesn't look like much,
3:46
but this means we can serve images, we can serve CSS, we can serve JavaScript. All the things that major websites have to do.