Modern APIs with FastAPI and Python Transcripts
Chapter: Building a realistic API
Lecture: Rendering HTML templates
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, we have our basic app working here, but the homepage leaves a little bit to be desired. Remember, we wanted a cool,
0:08
HTML graphic, stylized home page, and all we got is a weird JSON response that was just a string, if that's even JSON. Anyway,
0:17
this is not exactly what we want. So what we want to do is we actually want to take some HTML templates,
0:23
and if you've ever done programming for Python Web applications or any really server side Web
0:29
framework, you've worked with some sort of dynamic HTML template. It looks like HTML, but then there's little placeholders for a little bit of activity
0:37
in, say, in this case in Python to take data and turn it into strings or to loop over data or to conditionally show or hide sections of the page.
0:45
Now there's three main template languages, maybe four. I'm gonna go, I'll stick with three. But there's certainly four that
0:51
come right to mind when we think about these template languages for Python, and FastAPI,
0:56
being sort of flask-esque, embraces the one that comes with flask, which is Jinja2, so Jinja support is built right in. It also has
1:05
the ability to use chameleon, Mako, or Jingo templates as well. But because Jinja is built in, I'm going to use that. It's not a big part of this.
1:14
I actually think chameleon is a vastly better template language than Jinja or Jingo, for that matter, it's better than both of them.
1:22
But let's not, let's not worry about that. We're just focus on what's built in instead of bringing more pieces into it.
1:27
So in order to render a template, we first need to have some templates over here, so I'm gonna paste in some pre written HTML.
1:34
As you can tell from this course, I like writing things from scratch and seeing them built up,
1:38
but writing all this static HTML, just not super interesting to me. So we're gonna just drop in this piece now.
1:45
One thing that's interesting is noticed this couple of things here that says it extends layout, so index only has the main content,
1:53
but the layout page has like the standard look and feel for the whole site.
1:56
So we're going to include a couple of CSS styles, we're gonna include bootstrap and so
2:02
on, and then we're just going to right here drop in the content from the various pages. Right now, index. That's thing one that's interesting. Thing
2:10
two is why is there no help for what content or syntax goes there? If I type that, no suggestions. There should be stuff going "oh,
2:19
you want to do a block? You want to extend stuff? You want to do a loop?" Nope. Why is that not there?
2:23
And by the way, for using the community version of PyCharm, everything we do in this course was equally supported
2:30
except for this part I'm about to show you. The thing that I'm about to show you doesn't work for Community Edition.
2:37
No big deal, because we're doing so little of it. But, just so you know. Alright, so how do we fix this?
2:42
First, we want to tell PyCharm that this is a template folder where proper HTML lives that I should work on so I can go "mark directory as template",
2:51
and it says "hold on, we don't really know what kind of project this is. It could be Jinja or chameleon or whatever,
2:57
so would you like to configure that?" This is very helpful. The fact that it just randomly drops us into the settings,
3:04
that is not helpful. So we gotta go over here and go for "template
3:08
language" and search for that. And then down here, it says there's none, Click on HTML and say those are Jinja too,
3:14
right. So these are all the template languages. Now, notice that these have highlighting
3:19
and if we go over here and say "percent" we get for, we get end, extends and so on. Okay, that's super important if you have PyCharm community that
3:29
you don't get auto-complete on that little tiny bit. But it is the one difference. Okay, so this is all good.
3:36
We've got our template language configured. We've got our template directory. But now I want to do something like, come over here
3:43
and I don't know, render that template as text. So we need to create one time a templates object that manages all these templates.
3:53
So this is going to be Jinja2 templates which actually comes out as starlette, which FastAPI is built on, not FastAPI itself.
4:02
And then what we have to give this is the directory, gonna be templates. Now this is based on the working directory. You could give it the full path,
4:08
which would be safer, but for our sake, this is gonna be fine. And instead of returning "hello
4:13
world", we're gonna come over here and say "template response" and we're going to say that we're gonna work with index.html and then what
4:22
it needs is some data over here. We're gonna, it's gonna crash. When I try to run this, You see, something is missing we'll
4:27
always have to pass. Super annoying, but so it is. Let's try. First of all, Jinja2 must be installed in order to use the templates.
4:35
So the way FastAPI works is it has optional dependencies that you don't necessarily need to install.
4:42
But if you're going to use aspects of those you have to install them. So first we'll do that. Forgot about that crash.
4:47
But we're looking for another crash. try again. That's a beautiful HTML template, isn't it? Nope. No, it's not. Problem
4:57
is, see, it must have a request key. So what that means is we have to somehow pass the FastAPI request object over here like this. How do we get this?
5:06
Well, the way we got other things passed over was we put like X, y and Z and we said
5:13
what their type was. They came from the URL path and the query string and so on. But there's other stuff like requests, if we say it is a request here,
5:23
starlette request, it'll just be passed through for us. So that's the last thing that we've got to do in order to make this work. done it right? Yes,
5:30
sort of. That almost looks like what I was hoping for. The one thing that's missing is, remember it had styles and colors and pictures?
5:39
Well, we're off to a good start. It's not exactly finished, but we are rendering this HTML template. And if we pass in other data,
5:48
I'll just pass in like a list, 1, 2, 3, we go over here to our index, and right after that, we just put an h2 with other.
5:58
Restart everything so it all hangs together. Notice the live data does get passed through,
6:03
and we can interact with it like we could do, something silly like, there we go, program against it in the template,
6:16
Right? So 1, 2, 3, there we go. Not at all interesting yet. We're actually gonna do that later when we get some more interactive stuff going on in
6:24
our Web app, in our API and so on. But for now, we just need to pass the request over so that the templates can render out to the response and so on.
6:34
Excellent. So now we have much better support, at least for the HTML side of things.