Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Rendering basic HTML
0:00 Here we are in chapter four and in our GitHub repo
0:02 I just want to give you the lay of
0:04 the land. We completed all of our code in chapter three,
0:08 and now I made a copy of that into chapter four.
0:11 So the way this is gonna work is the final code for chapter three is the
0:15 starter code for four. The final code for four is the starter for five,
0:18 and so on. I've already done all the set up.
0:20 Like I said, we're not going to go through that again.
0:21 So let's just jump into it over here.
0:24 Now, you would be forgiven to think that FastAPI is really just
0:28 for building APIs.
0:29 And if you wanna have a proper web app that has HTML and bootstrap and CSS
0:35 or Tailwind CSS, whatever you want,
0:36 that you need another framework like Django or Flask or something.
0:39 Because remember, when we run this,
0:41 we look at it, what we get back is JSON.
0:45 And if we look in the network
0:46 stack what we get over here when you do a request, the response type on this one
0:52 Its content-type is application/json.
0:55 Of course, it seems like,
0:57 well, what this does is it returns JSON
0:59 and that's true. But what we can do is we can actually change how it
1:03 works. Let me introduce you to the HTTP responses.
1:08 So over here in FastAPI,
1:10 we have a whole bunch of other things we can do
1:14 than the default. The default,
1:15 of course, is to return JSON.
1:17 But if we create a response under FastAPI
1:20 responses and you look, we have HTML response,
1:23 a file response, a redirect,
1:25 JSON. That's what we're getting now,
1:27 plain text, streaming content and so on. What we're gonna do is going to create and HTML
1:34 response, and we're just going to say the content is some local variable.
1:37 Notice all the other defaults are fine, the header
1:39 defaults are fine, the status code of 200 is fine and so on.
1:43 I'm gonna come over here, and for the moment,
1:45 just for a moment, I'm gonna do something bad and type some inline HTML.
1:49 This is not the end goal.
1:52 But in here let's say we want our page to look like this.
1:56 Here's some HTML and here will say: "hello FastAPI Web App", and we'll have
2:04 a <div> and then we wanna make sure we close our
2:06 </div> and it's gonna be: "This is where our fake pypi app will live!"
2:14 And instead of returning this dictionary,
2:16 we're going to return the response, and the response is gonna tell FastAPI you
2:20 know what this is actually not JSON,
2:24 it's an entirely different thing, like a file or in this case,
2:26 HTML. We can actually just inline this right there,
2:29 like so. OK, let's run it again and see what we get.
2:35 Look at that. "Hello FastAPI Web App This is where our app will live"
2:39 And if we go to our network and we look again at our content-type
2:46 down here somewhere, there it is: text/html.
2:50 Like all friendly HTML pages, its text/html and utf-8. Pretty cool,
2:55 right? And if we go to View Source this time,
2:59 it's well, exactly what we wrote.
3:01 Is it valid source? Not really.
3:04 We didn't put a body and a head and all that kind of business in there,
3:07 but this is enough to show you how we can return HTML at a FastAPI.
3:12 That said, this is not how you should be returning HTML out of
3:18 FastAPI. We're gonna do what all the other major frameworks do: That's
3:22 we're gonna use dynamic web templates, gonna put those over there,
3:25 and we're going to pass a dictionary like we did before,
3:28 off to that template and the template engine will generate our HTML and our static content and
3:33 our dynamic content, all those sorts of things.
3:35 So we're not going to do this,
3:36 but this is the underlying mechanism by which we're gonna make that happen.
3:40 We're gonna use another library that's super cool,
3:43 in my opinion, I really,
3:44 really enjoy working with it, and it makes it super easy.
3:46 We're just gonna put a decorator up here that says use a template, and magically, instead of being
3:51 an API, it now becomes a web view method or web endpoint
3:55 here. All right, so this is what we're gonna do for this chapter:
3:59 we're going to start like this,
4:00 but we're gonna build up into moving into those templates and serving static content and things along those lines.