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