Servir contenido estático con Flask

Estructura del directorio

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.

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í:

Estructura del directorio

Ahora necesito servir todo lo que está dentro de webfonts y dentro de css. Por lo tanto, en mis rutas coloco lo siguiente:

Nota: recuerda importar a send_from_directory, en mi caso lo importo así (ya que ocupo otras cosas además de esta función):

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:

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *