fastapi: CANNOT RENDER HTML IN FASTAPI

WE’D LOVE TO HELP YOU! ☮️

But we need your help first… 🏃

Can you:

• Format your code snippet:
  • Image:
  • Generated code:

from fastapi import FastAPI

app = FastAPI()

• Be specific on how we can help you.
  • What is the problem?
  • What is failing?
  • What do you want to achieve?
• Last but the most important: please, follow our question issue template. It makes us know where you have searched possible solutions, understand your issue better and several benefits for those who have the same problem as you and for those who are trying to help as well. 😎

Dear @siamhassan66,

I realise you got somewhere, but I can’t find your solution here. I came here to find help and I’m sure more people do the same. So, as promised, here is the solution I came up with, hoping the next person will find it useful.

My approach is to break away from templates.TemplateResponse, because I came to realise that this is designed to do just that: pack and send back a response. Instead, I use a two-step approach where I acquire a template — via templates.get_template — and then I render it with some values — via template.render.

This approach allows me to get the generated HTML, while doing away with the need to provide a request. This way, the whole processing can be done at middleware level.

Here’s the gist:

from fastapi.templating import Jinja2Templates

templates = Jinja2Templates(directory=r"manager_backend\templates")
template = templates.get_template("item.jinja2")

@app.get("/items/{id}")
async def read_item(id: str):
    text = template.render(id=id)
    response = whatever(text) # do some processing with the text
    return response

Please notice that, compared with the previous snippet:

1. I changed the template from item.html to item.jinja2;
2. the arguments to template.render don’t include the request, so I removed it from the path operation signature;
3. the arguments to template.render are no longer a dict, but rather kwargs;
4. I removed the response_class=HTMLResponse from the signature;
5. in my particular case, the function is returning a pdf file, but this is not a saved file, so I could not use FileResponse; instead, I did something like this:

@router.get("/{id}")
def generate_report_id(id):
    pdf, file_name = generate_report(id)
    return Response(content = pdf, headers = {
        'Content-Type': 'application/pdf',
        'Content-Disposition': f'attachment; filename={file_name}',
        'x-suggested-filename': file_name,
    })

This allows me to click a button on the frontend and get a pdf downloaded.

I hope this helps. I wish I had something like this in the examples.

I went through the same problem with the post request. I tend to agree that the Fastapi documentation doesn’t explain how to link the post request with an html web page. It shows what you need in Fastapi only without the other part. I figured out how to do it by myself. I asked that question too but received no answer for it. There is a need of an example to do this in the documentation. I can contribute on this aspect. I generated web pages with fastapi and it works similar to Flask. Had to relearn to program it in Fastapi code.

You have to pass the request as part of the key-value pairs in the context for Jinja2.

The fix is quite easy you just need to add Request in query parameters,

from fastapi import Request
...
@app.get("/", response_class=HTMLResponse)
async def get(request: Request):
    return templates.TemplateResponse("layout.html", {"request": request})

Then pass all the data inside the dictionary that you want to render.