Sirviendo archivos est谩ticos con Flask

     

    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.

     

    Etiquetas:

    Deja una respuesta

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