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