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