Sirviendo archivos estáticos con Flask

S

 

Configuración de matraz

Matraz es una gran opción para crear aplicaciones web de forma modular utilizando Python. A diferencia de Django y otros análogos como Ruby on Rails, Flask es un micro-framework. Esto significa que incluye solo lo necesario para realizar el desarrollo web central, dejando a usted la mayor parte de las opciones más allá de ese subconjunto mínimo.

Este enfoque tiene una gran ventaja para mantener su código y flujo de trabajo simples, particularmente en proyectos más pequeños. Aquí le mostraremos cómo servir archivos estáticos como JS, CSS e imágenes usando Flask.

Asegúrate de tener Python 3 instalado. Puedes usar pyenv para esto, lo que le ayuda a seleccionar versiones de Python. Seguir esta guía para configurar Python 3 usando pyenv. Si tu prefieres virtualenv en su lugar, asegúrese de consultar la documentación, pero asegúrese de tener un entorno Python 3 activo.

Antes de que podamos comenzar a servir archivos estáticos con Flask, necesitamos instalarlo y poner en marcha una aplicación simple. Para hacer esto, instale Flask usando el comando:

$ pip install flask

Ahora crearemos una aplicación Flask básica que sirve como página de destino en la que mostraremos el texto clásico, “Hola mundo”.

$ mkdir serving_static

En este nuevo directorio, cree un nuevo archivo que crea la aplicación Flask y la ejecuta. En este archivo, creamos una ruta Flask donde mostraremos un mensaje de bienvenida usando una plantilla Flask.

# serve.py

from flask import Flask
from flask import render_template

# creates a Flask application, named app
app = Flask(__name__)

# a route where we will display a welcome message via an HTML template
@app.route("/")
def hello():
    message = "Hello, World"
    return render_template('index.html', message=message)

# run the application
if __name__ == "__main__":
    app.run(debug=True)

Ahora creemos la plantilla para mostrar nuestro mensaje. Cree un archivo HTML en la ubicación “serve_static / templates / index.html” con el siguiente código HTML. Nota la message Variable de Python pasada desde el serve.py archivo anterior.

<!-- templates/index.html -->
<html>
  <head>
    <title>Flask Shop</title>
  </head>
  <body>
    <h1>{{message}}</h1>
  </body>
</html>

Ahora estamos listos para ejecutar la aplicación. De vuelta en el directorio raíz “serve_static”, ejecute la aplicación con el comando:

$ python serve.py

Si el servidor se inició correctamente, recibirá un mensaje de que se inició y una URL para ver la aplicación. Abra esta URL en su navegador y ahora debería ver nuestro mensaje “Hola, mundo” en el navegador.

Flask crea rutas de aplicación utilizando decoradores como el que se ve en serve.py encima. Un decorador como @app.route("/") crea una nueva ruta en la ruta proporcionada. La definición de función a continuación contiene la lógica de la aplicación que se ejecutará cuando se reciba una solicitud en esa URL.

Entrega de archivos estáticos mediante un directorio estático

Los archivos estáticos más comunes que querrá servir en una aplicación web son los archivos CSS de su aplicación para diseñar la aplicación, así como los archivos JavaScript que agregan un comportamiento dinámico a la página. En esta sección veremos cómo servir archivos CSS y JavaScript agregándolos a la aplicación simple que creamos anteriormente.

Los archivos estáticos en Flask tienen una ruta especial. Todas las URL de la aplicación que comienzan con “/ static”, por convención, se envían desde una carpeta ubicada en “/ static” dentro de la carpeta raíz de la aplicación.

Esto significa que si creamos una carpeta “/ static” dentro de nuestra carpeta principal “serve_static”, podremos servir archivos estáticos como CSS, JS, imágenes y otros activos simplemente colocándolos dentro de esa carpeta “/ static”.

Ahora cambiemos el mensaje de bienvenida en la página de índice de nuestra aplicación para presentar “The Flask Shop”, una tienda ficticia donde los visitantes pueden comprar libros Flask.

Primero, queremos que la plantilla de la página de índice muestre al visitante el nombre de la tienda, así como una lista de libros que están a la venta. Actualice su plantilla HTML en “serve_static_ / templates / index.html” con estos cambios para tener el siguiente aspecto.

<!-- templates/index.html -->
<html>
  <head>
    <title>Flask Shop</title>
    <link rel="stylesheet" href="/static/style.css">
  </head>
  <body>
    <h1>{{message}}</h1>

    <h2>On sale this week alone:</h2>
    <ol>
      <li>Flask By Example</li>
      <li>Uncluttered Flask</li>
      <li>Flask From First Principles</li>
    </ol>

    <script src="/static/scripts.js" charset="utf-8"></script>
  </body>
</html>

Notará que el título de la página ahora es “Flask Shop”, y hemos incluido una lista de libros Flask a la venta. El visitante debería poder ver en la página esta lista de libros cuando visite la página de inicio de nuestra aplicación de tienda.

Eche un vistazo a la sección de cabecera de la plantilla HTML nuevamente. Notará que ahora estamos vinculando a un nuevo archivo, específicamente una hoja de estilo CSS llamada “style.css”. La ruta, “/static/style.css” muestra que este archivo se encuentra en nuestra carpeta “/ static”.

Recuerde que Flask sirve archivos colocados en “/ static” automáticamente como archivos estáticos, en lugar de intentar ejecutar estos archivos como archivos fuente de Python.

Creemos ahora una carpeta estática en “serve_static / static” para contener todos nuestros archivos estáticos.

Dentro de esta carpeta estática, creemos el nuevo archivo “style.css” y agreguemos las siguientes reglas CSS para agregar algo de estilo a nuestra aplicación de escaparate.

/* static/style.css */

h1 {
    color: navajowhite;
    font-variant-caps: all-small-caps;
    font-size: 46px;
}

h2 {
  color: white;
  font-size: 36px;
}

li {
  color: red;
  font-size: 50px;
}

body {
    background: firebrick;
}

Con estas reglas de estilo definidas, nuestra aplicación eliminará el fondo blanco liso que vimos en nuestro ejemplo “Hola, mundo” por un fondo rojo de “ladrillo refractario” más colorido. También estamos definiendo un estilo blanco distintivo para el texto de la página.

Ahora actualicemos el mensaje que estamos mostrando en la página. Vuelva a “serve_static / serve.py” y actualice el message variable para ser el nombre de la tienda. Encuentra el hello() funcionar y actualizar el message variable de la siguiente manera:

# serve.py

...

# a route where we will display a welcome message via an HTML template
@app.route("/")
def hello():
    message = "The Flask Shop"
    return render_template('index.html', message=message)

...    

Ahora, reinicie su servidor y ejecute python serve.py otra vez. Luego, visite la URL de la aplicación en localhost: 5000 y debería ver nuestra lista de libros de Flask.

Observe que el estilo de la aplicación ahora se está recogiendo de nuestro archivo CSS que está siendo servido desde el directorio “/ static” por nuestra aplicación Flask.

Si vuelve a mirar nuestra plantilla “serve_static / templates / index.html”, antes del cierre </body> etiqueta, estamos insertando una etiqueta de script JavaScript.

La URL de este script es “/static/scripts.js”. Este es otro archivo estático que será servido por Flask desde nuestra carpeta “/ static”.

Creemos ahora este archivo JavaScript en “serve_static / static / scripts.js”. El contenido será un código JavaScript para cambiar dinámicamente el color de fondo de nuestra aplicación de tienda cada segundo. Esto crea un efecto dramático para llamar la atención sobre la venta por tiempo limitado en nuestra tienda ficticia de Flask.

// scripts.js

// a couple of different backgrounds to style the shop
var background1 = 'black';
var background2 = 'firebrick';

// this lets us toggle the background state
var color = true;

// every 1 second, switch the background color, alternating between the two styles
setInterval(function () {
  document.body.style.backgroundColor = (color ? background1 : background2)
  color = !color;
}, 1000);

Ahora, detenga su servidor y vuelva a ejecutar python serve.py Una vez más. Cuando visita nuestra aplicación en el navegador, el fondo de la página debe parpadear y cambiar cada segundo de un tono rojo, esto:

a un tono de negro, así:

los setInterval La función en nuestro código JavaScript cambia el fondo cada segundo en un ciclo de tiempo continuo.

Ahora estamos sirviendo archivos JavaScript y CSS desde nuestra carpeta “/ static” para diseñar y mejorar el comportamiento de nuestra aplicación.

Si tiene archivos CSS o JavaScript adicionales, puede agregarlos a la carpeta “/ static” de la misma manera y hacer referencia a ellos como lo hicimos anteriormente.

Entrega de archivos JavaScript

Otro caso de uso común cuando se trata de servir archivos estáticos en aplicaciones web es servir bibliotecas de terceros como Backbone.js, Vue.js, Bootstrap o React.

Cualquier tipo de biblioteca que desee incluir se puede servir casi de la misma manera que vimos anteriormente en nuestro directorio “/ static”.

Como ejemplo, veamos cómo incluir la biblioteca de JavaScript Backbone.js en nuestra aplicación.

Una buena idea al servir bibliotecas de terceros es ubicarlas dentro de un especial lib o vendedor directorio dentro de la carpeta “/ static”. Puede nombrar esta carpeta de terceros como desee.

Sin embargo, la clave es colocar las bibliotecas externas en su propia carpeta donde puede actualizar fácilmente las versiones o realizar otra administración separada de su propio código de aplicación.

Con esto en mente, cree una nueva carpeta en “serve_static / static / lib”. Ya que estamos incluyendo Backbone.js, descargue la versión de archivo único de Backbone.js aquíy luego colóquelo dentro del nuevo lib carpeta dentro de nuestra carpeta “/ static”.

Backbone.js tiene una fuerte dependencia de Underscore.js, otra biblioteca de JavaScript, que proporciona muchas utilidades esenciales. Así que descarga la última versión de Underscore.js aquí y colóquelo junto a Backbone.js en su carpeta “/ static / lib”.

Ahora podemos hacer uso de Backbone.js incluyéndolo en nuestra plantilla de página y llamando a sus funciones.

De vuelta en su plantilla, en el archivo “serve_static / templates / index.html”, busque el </ol> etiqueta de cierre. Después, en una nueva línea, cree un nuevo elemento de encabezado que manipularemos con Backbone.js.

Además, agregue nuevas etiquetas de script antes del cierre </body> etiqueta. En estas etiquetas, incluimos Underscore.js y Backbone.js, así como también escribimos código para actualizar el DOM usando el código Backbone.

La parte actualizada del index.html La plantilla debe tener el siguiente aspecto.

<!-- templates/index.html -->

...
<ol>
      <li>Flask By Example</li>
      <li>Uncluttered Flask</li>
      <li>Flask From First Principles</li>
</ol>

    <h4 id="version" style="color:white;">Backbone</h4>

    <script src="/static/scripts.js" charset="utf-8"></script>
    <script src="/static/lib/underscore.js" charset="utf-8"></script>
    <script src="/static/lib/backbone.js" charset="utf-8"></script>
    <script type="text/javascript">
      document.getElementById('version').innerHTML = "Proudly built with Backbone.js version " + Backbone.VERSION;
    </script>
  </body>
  ...

Nuestro ultimo <script> La etiqueta anterior utiliza Backbone.js. Si reinicia el servidor ahora, debería ver que el texto de la página en la parte inferior muestra la versión correcta de Backbone.js que estamos usando.

Si estuviéramos usando Vue.js, React o cualquier otra biblioteca, podríamos agregarla y servir sus archivos estáticos de la misma manera, poniéndola a disposición de nuestra aplicación.

Entrega de imágenes y otros tipos de archivos

Otros tipos de archivos, como imágenes e incluso .TXT y .pdf Los archivos se pueden servir de manera similar a los archivos JS y CSS que mostramos anteriormente. Simplemente colóquelos en “/ static” y vincúlelos.

Veamos un ejemplo de código para servir imágenes. Aquí hay dos imágenes de libros relacionados: Libro 1 y libro2. Descárgalos y colócalos en una nueva carpeta en “serve_static / static / images”.

Ahora podemos agregar una sección de libros “relacionados” a nuestra plantilla de índice, donde mostraremos las imágenes de estos libros.

Actualiza tu index.html plantilla con lo siguiente:

<!-- templates/index.html -->

...

<h4 id="version" style="color:white;">Backbone</h4>

<h2>Related</h2>
<img src="/static/images/book1.png" alt="Related Book 1" width="20%" height="auto">
<img src="/static/images/book2.jpg" alt="Related Book 2" width="20%" height="auto">

...

Ahora, cuando reinicie el servidor y visite la aplicación en el navegador, verá imágenes de los libros relacionados.

Preparación de archivos estáticos con un sistema de compilación

Una de las cosas más importantes que falta en nuestra configuración en este momento es la minificación de activos estáticos, la concatenación de JavaScript, CSS, así como otras optimizaciones para hacer que la aplicación sea más rápida. Además, el uso de preprocesadores y compiladores como Sass, Coffeescript y Babel debe manejarse manualmente en nuestra configuración actual.

Usando un sistema de construcción como Webpack, Trago, Desayuno tardíoo Browserify le ayuda a automatizar este proceso.

Si está interesado en explorar esto, aquí está la Guía de brunch para agregar Brunch como un sistema de construcción para su proyecto.

O puede revisar la documentación de su sistema de compilación preferido para familiarizarse con cómo configurarlo e integrarlo en su aplicación Flask.

Servicio de archivos estáticos en producción

Ejecutar su código en producción es un poco diferente a un entorno de desarrollo. En producción, dependiendo de su aplicación, puede encontrar volúmenes de tráfico mucho más altos, lo que puede afectar su servidor.

En producción, se recomienda servir archivos estáticos con un servidor como nginx para mantener la carga en su servidor web Python lo más ligera posible. Si sirve una gran cantidad de archivos, esto acelerará su aplicación.

Además, querrá utilizar un servidor web Python de grado de producción en lugar del servidor Flask integrado. Algunas buenas opciones son Gunicorn, Gevent y Apache con mod_wsgi.

Conclusión

En este artículo, vimos cómo puede servir fácilmente activos estáticos usando Flask. Puede servir JavaScript, CSS, imágenes y otros archivos estáticos. Esto se puede hacer de varias formas, siendo la más simple usar el directorio “/ static”, que Flask usará para entregar archivos al cliente.

 

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad