Retornar HTML con FastAPI
¡Feliz año gente! Como prometí, este año nos vamos a centrar mucho en FastAPI, así que como no podía ser de otra forma, vamos a empezar el año con un tutorial de este fantástico framework 💪. ¿Sabías que además de una API, puedes realizar el desarrollo fullstack completo desde FastAPI y retornar contenido como HTML?
Pues si, gracias a la combinación de FastAPI + Jinja2. Y antes de seguir...
¿Qué es Jinja2?
Pues bien, Jinja2 es un motor de plantillas rápido, expresivo y extensible. Desde una plantilla de HTML nosotros podremos añadir código similar a la sintaxis de Python, de esta manera nuestras plantillas podrán tener contenido dinámico.
Y dicho esto, vamos al siguiente paso.
Retornar HTML desde FastAPI
Para retornar HTML desde FastAPI, vamos a crear un proyecto para explicarlo. Yo me he creado una carpeta llamada fastapi-templates en la que voy a crear un entorno virtual y lo voy a activar:
python -m venv env
# Activación windows
env/Scrips/activate
# Activación en mac/linux
source env/bin/activate
El siguiente paso es instalar las librerías que necesitaremos que en este caso serán FastAPI, uvicorn y Jinja2:
pip install fastapi uvicorn jinja2
Ahora que ya tenemos instaladas las librerías necesarias, crearemos el archivo main.py en el directorio raíz con el siguiente contenido:
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
app = FastAPI()
De fastapi vamos a importar FastAPI y Request. Esta última la necesitaremos para generar una instancia de la petición y es obligatoria cada vez que retornamos una plantilla de Jinja2.
De fastapi.responses importamos HTMLResponse porque en nuestro endpoint necesitaremos indicar que la respuesta será de tipo HTML.
De fastapi.staticfiles importamos StaticFiles para realizar la configuración de almacenamiento y ruta de los archivos estáticos ya sean css, javascript, imágenes o lo que queramos.
Y por último de fastapi.templating importamos Jinja2Templates para poder utilizar las plantillas de Jinja2.
Ahora vamos a añadir dos nuevas líneas al final de nuestro archivo main.py:
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
En la primera línea indicamos la ruta desde donde podremos acceder a los archivos estáticos que en nuestro caso será "/static" y después definimos el directorio donde se guardarán estos archivos que también se llamará static y esta carpeta estará en la raíz del proyecto.
La segunda línea define una variable que será una instancia de Jinja2Templates y como parámetro recibe el directorio donde guardaremos nuestras plantillas que en este caso se van a guardar en una carpeta llamada templates, también en la raíz de nuestro proyecto.
Ahora vamos a crear nuestro primer archivo estático que será un css para darle estilos a la plantilla que crearemos a continuación. Para ello creamos la carpeta static en el directorio raíz y dentro añadimos un archivo al que llamaremos styles.css con el siguiente contenido:
.container {
font-family: Arial, Helvetica, sans-serif;
color:steelblue;
text-align: center;
width: 100%;
}
El siguiente paso es crear nuestra plantilla. Para ello añadimos la carpeta templates en el directorio raíz y dentro creamos un archivo llamado index.html que será nuestra plantilla con el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retornar HTML desde FastAPI</title>
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>{{message}}</h1>
</div>
</body>
</html>
En un archivo HTML bastante sencillo y solo debemos fijarnos en estas dos líneas:
.
.
.
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
.
.
.
<h1>{{message}}</h1>
.
.
.
Ambas son una mezcla de sintaxis de HTML con Jinja2. La primera la usamos para cargar la hoja de estilos que acabamos de crear y la segunda es una variable con un mensaje que podremos customizar cuando retornemos la plantilla.
Para finalizar el proyecto, volvemos al archivo main.py y añadimos el siguiente código al final de este:
@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
return templates.TemplateResponse("index.html", {
"request": request,
"message": "Hola gente, vamos a usar html con FastAPI"
})
En esta parte ya definimos nuestro endpoint que será la url de inicio y como response_class indicamos que la respuesta será HTML.
Después generamos nuestra función que recibirá la información de la petición (request) que como comentamos antes, es indispensable para el funcionamiento de Jinja2.
Por último, llamamos a la función TemplateResponse la cual recibe como primer parámetro el nombre del archivo de nuestra plantilla y como segundo parámetro un diccionario.
El diccionario contendrá una clave request que como hemos dicho previamente SIEMPRE SERÁ OBLIGATORIO y como segunda clave he añadido "message" que se corresponde con el nombre que le dimos a la variable en la plantilla. La variable "{{message}}" será reemplazada por el valor de "message" en el diccionario al retornar la respuesta HTML.
Listo, ya solo queda probarlo así que vamos a la terminal a arrancar nuestro proyecto:
uvicorn main:app --reload
Accedemos a la URL http://127.0.0.1:8000/ y si todo ha ido bien, deberíais ver algo como esto:
Fácil, sencillo y para toda la familia 😂. Como podéis ver, es muy sencillo utilizar HTML con FastAPI.
He preparado un repositorio con el proyecto que acabamos de realizar al que podéis acceder pinchando aquí por si queréis echarle un vistazo y si queréis aprender más sobre FastAPI os dejo este enlace donde tenéis todo el contenido que he creado hasta ahora sobre este gran framework.
Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.
Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.
Nos leemos 👋.