Render an HTML template with Jinja2 and FastAPI

Python is a powerful programming language that is widely used for web development. When working with web applications, it is common to use templates to generate HTML content dynamically. Jinja2 is a popular templating engine for Python that allows you to create HTML templates with placeholders for dynamic content. FastAPI is a modern web framework for building APIs and web applications with Python that can be used to render HTML templates using Jinja2.

In this article, we will show you how to render an HTML template with Jinja2 and FastAPI.

Step 1: Install FastAPI and Jinja2

First, you need to install FastAPI and Jinja2 using pip:

“`html
<pip install fastapi

<pip install jinja2

“`

Step 2: Create a FastAPI application

Next, create a FastAPI application and configure Jinja2 as the templating engine:

“`python
from fastapi import FastAPI
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory=”templates”)
“`

Step 3: Create an HTML template

Create an HTML template with placeholders for dynamic content. For example, create a file named “index.html” in the “templates” directory:

“`html

{{ heading }}

{{ content }}

“`

Step 4: Render the HTML template with dynamic content

In your FastAPI application, create a route handler that renders the HTML template with dynamic content:

“`python
from fastapi.responses import HTMLResponse
from fastapi import APIRouter

router = APIRouter()

@router.get(“/”, response_class=HTMLResponse)
async def render_template():
data = {
“title”: “Hello, World!”,
“heading”: “Welcome to my FastAPI application”,
“content”: “This is a sample HTML template rendered with Jinja2 and FastAPI”
}
return templates.TemplateResponse(“index.html”, {“request”: request, “context”: data})
“`

Step 5: Run the FastAPI application

Finally, run the FastAPI application to render the HTML template with Jinja2:

“`python
import uvicorn

if __name__ == “__main__”:
uvicorn.run(app, host=”0.0.0.0″, port=8000)
“`

Now, when you visit http://localhost:8000/ in your web browser, you should see the rendered HTML template with the dynamic content provided.

That’s it! You have successfully rendered an HTML template with Jinja2 and FastAPI. Happy coding!