Templates¶

Você pode usar qualquer template engine com o FastAPI.

Uma escolha comum é o Jinja2, o mesmo usado pelo Flask e outras ferramentas.

Existem utilitários para configurá-lo facilmente que você pode usar diretamente em sua aplicação FastAPI (fornecidos pelo Starlette).

Instalação de dependências¶

Para instalar o jinja2, siga o código abaixo:

$ pip install jinja2

Usando `Jinja2Templates`¶

Importe Jinja2Templates.
Crie um templates que você possa reutilizar posteriormente.
Declare um parâmetro Request no path operation que retornará um template.
Use o template que você criou para renderizar e retornar uma TemplateResponse, passe o nome do template, o request object, e um "context" dict com pares chave-valor a serem usados dentro do template do Jinja2.

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item.html", context={"id": id}
    )

Note

Antes do FastAPI 0.108.0, Starlette 0.29.0, name era o primeiro parâmetro.

Além disso, em versões anteriores, o objeto request era passado como parte dos pares chave-valor no "context" dict para o Jinja2.

Dica

Ao declarar response_class=HTMLResponse, a documentação entenderá que a resposta será HTML.

Detalhes Técnicos

Você também poderia usar from starlette.templating import Jinja2Templates.

FastAPI fornece o mesmo starlette.templating como fastapi.templating apenas como uma conveniência para você, o desenvolvedor. Mas a maioria das respostas disponíveis vêm diretamente do Starlette. O mesmo acontece com Request e StaticFiles.

Escrevendo Templates¶

Então você pode escrever um template em templates/item.html, por exemplo:

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

Interpolação de Valores no Template¶

No código HTML que contém:

Item ID: {{ id }}

...aparecerá o id obtido do "context" dict que você passou:

{"id": id}

Por exemplo, dado um ID de valor 42, aparecerá:

Item ID: 42

Argumentos do `url_for`¶

Você também pode usar url_for() dentro do template, ele recebe como argumentos os mesmos argumentos que seriam usados pela sua path operation function.

Logo, a seção com:

<a href="{{ url_for('read_item', id=id) }}">

...irá gerar um link para a mesma URL que será tratada pela path operation function read_item(id=id).

Por exemplo, com um ID de 42, isso renderizará:

<a href="/items/42">

Templates e Arquivos Estáticos¶

Você também pode usar url_for() dentro do template e usá-lo, por examplo, com o StaticFiles que você montou com o name="static".

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

Neste exemplo, ele seria vinculado a um arquivo CSS em static/styles.css com:

h1 {
    color: green;
}

E como você está usando StaticFiles, este arquivo CSS será automaticamente servido pela sua aplicação FastAPI na URL /static/styles.css.

Mais detalhes¶

Para obter mais detalhes, incluindo como testar templates, consulte a documentação da Starlette sobre templates.