Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Rendering basic HTML
Login or
purchase this course
to watch this video and the rest of the course contents.
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.