Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Rendering basic HTML template
0:00 Well this was nice here, to render this,
0:02 but that's not how we want to write our code,
0:04 is it? We want to write our HTML in an HTML file and then write our
0:08 Python in a Python file and then put those together.
0:11 That's how all the common web frameworks work.
0:13 So let's go and create one of these templates over here.
0:16 We're gonna start by creating one.
0:17 This is the whole HTML page,
0:19 and then we'll work on some nice shared layout.
0:22 I'm gonna create a folder directory called templates.
0:25 And then in here, I'm going to HTML File called,
0:32 what I like to do is, I like to name my files the same as the
0:36 view methods. So if the view method is index,
0:38 I'm gonna name the file index and this will be Fake
0:42 PyPI like that
0:45 and let's just put something similar,
0:47 but not exactly the same. We have <h1> now
0:50 we've got a nice editor for working with HTML,
0:53 beautiful. Say, call it "Fake PyPI" for now and <div>,
0:59 we'll just put, actually, let's put an unordered list of the popular packages
1:03 so we'll have a <ul>, it's gonna have an <li> it's gonna have
1:07 three popular ones. We could do this short,
1:09 cool little expansion thing in PyCharm if you hit Tab.
1:12 So let's say we wanna have fastapi, we have uvicorn and chameleon.
1:20 And let's also add one other thing here,
1:23 let's say we wanna have a <div>.
1:27 Let's put the user name and this is gonna be something I'm gonna pass.
1:30 A piece of dynamic data is gonna be passed.
1:32 We'll just have user_name like this.
1:37 And in Chameleon, the way you say output a string from a variable,
1:41 Turn that variable into a string, you say:
1:43 dollar curly braces. If you're familiar with Jinja than it would look like this.
1:48 But in Chameleon, you do it like that.
1:51 All right, so we want to render this.
1:53 How are we going to do it?
1:55 Well, turns out Chameleon is not built-in in FastAPI.
1:59 You wanna work with Jinja?
2:01 There's actually some built-in stuff,
2:03 but I'll show you a better way
2:04 I think anyway. So let's go look at an external package here. Let's go over here to
2:08 GitHub. Here's a cool package I created, I don't like it because I created it,
2:13 I like because I really wish that it exist and it didn't so I created it for FastAPI
2:17 So the idea is,
2:19 it's called fastapi-chameleon and what it is, is a decorator that you can
2:23 put onto your view method that will take a dictionary plus a template and automatically turn
2:28 that into HTML. What we got to, we've got to install it, right now
2:33 It's not yet on PyPI.
2:35 Check back here when you're watching this course,
2:37 there's a good chance I'm going to publish it
2:39 to PyPI, but for now,
2:40 just install it this way. So the way it works is you've got a template directory
2:43 and I like to actually name a little more structure here.
2:47 We'll get to that in a minute,
2:48 but got some template file. We're gonna set this overall path of where those live
2:55 and then all we gotta do is just say,
2:56 Here's a template and return a dictionary and we're good to go.
3:01 If you return any form of response like an HTML response or redirect response,
3:05 it just ignores the template idea
3:08 and just says, return that response directly.
3:11 So let's go and use that over here.
3:16 We're gonna install it like this.
3:18 And PyCharm says: Oh, you better install it like OK,
3:21 super. It's installed. And then when I go over here and I'm just going
3:25 to say @template and we need to import that from fastapi_chameleon.
3:34 I like that up there. Now I'm gonna first type out the template file to
3:40 be index.html and we don't need this and we don't need that.
3:46 All we gotta do is return some piece of data.
3:48 Maybe this comes from the database or something.
3:50 Will say user_name is
3:54 mkennedy or something like that. And and that's spelled ok.
3:59 And we try to run this.
4:00 It's not gonna love it, I don't think.
4:03 So when I click on this, it gives us an error.
4:06 That's unfortunate, what happened? It says you must call this initialization thing first.
4:13 So what we've got to do before we start using it,
4:16 and we're gonna organize this better in just a minute.
4:18 Is we need to go to I guess we need to import this as well,
4:25 directly. And we'll go to this and we'll say global_init() and we have
4:30 to pass along the folder "templates", that's what we're calling it.
4:35 And I think that should do it.
4:36 If we have the working directory
4:37 right. If the working directory is not in the same place,
4:40 you probably need to pass a full path here.
4:43 Let's try it again. Fingers crossed.
4:47 Look at that. How awesome is this?
4:50 So here's our HTML and this is the dynamic data that was generated and we passed
4:55 this over. We could actually do something like this.
4:58 We could say this has a user
5:04 which is a string. OK,
5:05 come over here and say it's going to be user if user else "anon", something like
5:13 that, OK. And we try this again.
5:18 Ah, yes, it needs a default value,
5:19 I guess that's the way that works,
5:21 I forgot, equals, just do it like this.
5:24 "anon". There we go.
5:29 So if there's nothing passed, it's anonymous.
5:31 But if we say user=the_account,
5:37 be whatever you want. So this part is totally dynamic,
5:40 as our dynamic HTML is. And this is our static stuff that we can write
5:44 so so cool, so super cool.
5:48 This lets us come over here and just specify a dynamic template.
5:52 A Chameleon template in this case,
5:55 you render. If for some reason you don't want to use Chameleon
5:58 and you prefer Jinja. Check this out over here,
6:01 scroll down a little bit. This friendly guy over here, cloned this project and created
6:07 a Jinja version. So all you gotta do to use it is go and put
6:12 a decorator or your Jinja template on as well.
6:15 So use one or the other,
6:17 depending on the template language that you would like.
6:19 But I really like this style of let's just put this here and return a dictionary
6:23 and let the system itself put the pieces together and build the HTML.