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:

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:

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.