Modern APIs with FastAPI and Python Transcripts
Chapter: Building a realistic API
Lecture: Rendering HTML templates

Learn more about this course
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.