Hoy veremos cómo servir archivos CSS o JS en una aplicación web de Flask, utilizando el método send_from_directory, lo que nos permitirá servir estilos o scripts a partir de una URL.
Por defecto, Flask no sirve contenido estático, es decir, archivos; pero podemos hacer que una ruta coincida con “js” o “css” y servir el archivo.
Método simple
Podemos servir automáticamente el contenido de la carpeta static. Por ejemplo, yo tengo ahí un archivo llamado bulma.min.css y para servirlo desde HTML utilizo url_for para generar la ruta:
<link rel="stylesheet" href="{{ url_for('static', filename='bulma.min.css') }}">Al final, eso va a generar una url como /static/bulma.min.css que bien podríamos generar manualmente, pero con esto lo hacemos de la manera correcta.
Sigue leyendo si quieres ver cómo servir contenido de una manera más manual.
Servir contenido estático con Flask
Para este ejemplo voy a mostrar cómo servir archivos CSS y archivos de fuentes, para iconos de FontAwesome.
Mi directorio es así:
Ahora necesito servir todo lo que está dentro de webfonts y dentro de css. Por lo tanto, en mis rutas coloco lo siguiente:
"""
Estas dos rutas son para servir el CSS y los iconos
"""
@app.route('/css/<path:path>')
def send_css(path):
return send_from_directory('css', path)
@app.route('/webfonts/<path:path>')
def send_webfont(path):
return send_from_directory('webfonts', path)Nota: recuerda importar a send_from_directory, en mi caso lo importo así (ya que ocupo otras cosas además de esta función):
from flask import Flask, render_template, request, send_from_directory
Estamos sirviendo lo que comience con /css y con /webfonts. Lo único que hacemos en cada ruta es invocar a send_from_directory, indicando el directorio desde donde servir y la path, que en este caso será el nombre del archivo.
Ahora en mi vista simplemente importo los estilos con:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bienvenido</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
</head>Lo de webfonts no es necesario aquí, pues FontAwesome las importa desde el CSS, pero necesita que estén disponibles.
De este modo podemos servir todo tipo de archivos, incluso aunque no sean CSS o JS.
