Servir contenido estático con Flask

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/