Vamos a ver mediante un ejemplo cómo podemos trabajar con archivos estáticos con Flask. Trabajando con este tipo de archivos toma un papel fundamental la función url_for() para construir las rutas en las que van a estar disponibles nuestros archivos.
Partiremos como siempre de nuestra aplicación ‘Hola mundo!’ creada en el primer tutorial para desarrollo de aplicaciones web con Flask, pero importando también el método url_for().
Estáticos con Flask
Conocer el funcionamiento de los archivos estáticos en Flask es fundamental para posteriormente trabajar con plantillas.
from flask import Flask, url_for
app = Flask(__name__)
@app.route('/')
def hola_mundo():
return '<h1>Hola mundo con Flask!!</h1>'
if __name__ == '__main__':
app.run(debug=True)Vamos a crear una carpeta llamada ‘static’ en el directorio donde está nuestra aplicación Flask.
Ahora, crearemos un archivo de texto llamado ‘estilos.css’ y lo guardaremos en la carpeta ‘static’ que acabamos de crear.
- /carpeta_proyecto
- app.py
- /static
- estilos.css
body {
background-color: aqua;
}Una vez que tengamos la estructura creada, añadiremos a nuestra aplicación mediante el decorador route() una función nueva llamada archivo_css(). Dentro de esta función mediante url_for() construiremos la ruta donde está almacenado nuestro archivo estilos.css y retornaremos ese valor.
@app.route('/estaticos')
def archivo_css():
ruta_archivo = url_for('static', filename='estilos.css')
return f'<h1>{ruta_archivo}</h1>'Si ejecutamos nuestra aplicación en un navegador y vamos a la ruta http://localhost:5000/estaticos nos debe aparecer lo siguiente.
Ahora con el valor de la ruta almacenado en la variable ruta_archivo podemos hacer uso nuestro archivo estático. Este tipo de rutas se utiliza para trabajar con archivos estáticos y plantillas.
Importante → Recuerda siempre crear una carpeta llamada ‘static’ y en su interior los archivos .js .css o imágenes a los que quieras acceder desde las plantillas.