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