FastAPI with Jinja2 in UNDER 6 minutes

have you ever wondered how to set up a fast API application with Ginger 2 templating well in this video we're going to go through it step by step so you can create your first web application I'm Eric I'm an instructor a software engineer in a cloud Enthusiast so let's dive in all right in this quick python fast API in ginger tutorial we're going to go over how to set up Jinja templating with a fast API application now I already have my environment set up and I already have fast API uvicorn and Ginger 2 installed if you do not have it installed you can do this by saying pip install fast API uvicorn and Jinja 2. and like I said I already have all three of those installed now the very first thing we want to do is just go ahead and create a new file for main.pi which is going to be our fast API application and I'm going to start by importing and pasting two different Imports we can say from Fast API import fast API and request and fast API dot templating import Ginger to templates we then want to create our app equals fast API which we have to do with every fast API application and then after this we want to say templates equals Ginger 2 templates where we pass in a directory of templates now you might be wondering hmm what's this directory of templates really mean well we need to create a directory over here in our project structure that includes the HTML files for jinja2 templating so we can right click and say new folder and here we can call this templates and Insider templates we want to create our HTML file and we're going to name this home.html [Music] and here we need to create an entire HTML file let's start by just saying HTML and then I'm going to paste in our head our title of coding with Ruby and a link for bootstrap which will add our CSS to our application after this let's go ahead and create a body underneath our head but inside our HTML I'm going to create a P tag and inside I'm going to say double brackets and I am just going to print a name now let's go back to our main.pi and let's create an API endpoint for our jinja2 templates so I'm going to say app.get and inside here I'm just going to say a slash async def name where we pass in a request of request and then we want to return our templates dot template response where inside of here we need to say home.html so our templates knows that it's in our templates directory and then we're saying in there we want to return a response to our home.html file now we want to say brackets or we can pass in our request of request and then we want to say comma name coding with Ruby so what we're doing here is we're saying Insider template we need to find our home.html file return the request that we're passing in and we want to replace name with coding with Ruby and as you remember we have name right here so if we just go ahead and say euvicorn main colon app dash dash reload that'll spin up our fast API application and now inside here if we refresh the page we can see that we're going to get coding with Roby printed to our HTML file [Music] what if we have a list of items and we want to Loop through it and print it to a table well let's go back to our main.pi file and right above our import I'm going to create a new variable of dogs that is a list that holds two dogs of name Milo type golden doodle name Jacks with a type German Shepherd and then here at the end of our template response I'm going to pass in also dogs of type dogs and now let's go back to our home.html and now under our P tag but still inside the body I want to create a new table and this table is going to have a class that is equal to table and this is CSS that's coming from our bootstrap we then want to create a table row with two table headers inside that says dog name in dog type and then under this table row let's create one more table row and above this table row we want to say brackets two percent signs and inside we can say four dog in dogs and here we want to create a table data which is a dog dot name all wrapped around two brackets and two brackets of dog DOT type [Music] and then outside this table row we want to say brackets two percent signs or we can say end four so we're ending the for Loop now if we go back to our browser and application and we refresh the page we can see that we get coding with Ruby with a table of dog name and dog type Milo golden doodle and Jack's German Shepherd now this is a quick example on how to set up jinja2 in your fast API application and I will see you in the next video

Channel: Eric Roby

Views: 16,426

Keywords: python, fastapi, python tutorial, fastapi tutorial, fastapi python, fastapi crash course, fastapi jinja, fastapi jinja templates, fastapi jinja2 tutorial, fastapi jinja2, fastapi jinja2 templates, jinja, jinja2, jinja2 template, jinja2 python, jinja fastapi, jinja2 fastapi, fastapi web app, fastapi website, fastapi website template

Id: 92iCfXAK0Gc

Length: 6min 2sec (362 seconds)

Published: Wed Jun 28 2023