Fichiers statiques

Utilisation de fichiers statiques

Les applications Web nécessitent souvent des fichiers statiques tels que des fichiers CSS ou JavaScript. Pour utiliser des fichiers statiques dans une application Flask, créez un dossier appelé “static” dans votre package ou à côté de votre module et il sera disponible dans “/static” sur l’application.

Voici un exemple de structure de projet pour l’utilisation de modèles :

MyApplication/
    /static/
        /style.css
        /script.js
    /templates/
        /index.html
    /app.py

app.py est un exemple de base de Flask avec rendu de modèle.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

Pour utiliser le fichier CSS et JavaScript statique dans le modèle index.html, nous devons utiliser le nom de point de terminaison “statique” spécial :

{{url_for('static', filename = 'style.css')}}

Ainsi, index.html peut contenir :

<html>
    <head>
        <title>Static File</title>
        <link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
        <script src="{{url_for('static', filename = 'script.js')}}"></script>
    </head>
    <body>
        <h3>Hello World!</h3>
    </body>
</html>

Après avoir exécuté app.py, nous verrons la page Web dans http://localhost:5000/.

Fichiers statiques en production (servis par le serveur Web frontal)

Le serveur Web intégré de Flask est capable de servir des actifs statiques, et cela fonctionne bien pour le développement. Cependant, pour les déploiements de production qui utilisent quelque chose comme uWSGI ou Gunicorn pour servir l’application Flask, la tâche de servir des fichiers statiques est celle qui est généralement déchargée sur le serveur Web frontal (Nginx, Apache, etc.). Il s’agit d’une tâche simple/petite avec des applications plus petites, en particulier lorsque tous les actifs statiques se trouvent dans un dossier ; Cependant, pour les applications plus volumineuses et/ou celles qui utilisent le(s) plug-in(s) Flask qui fournissent des ressources statiques, il peut devenir difficile de se souvenir de l’emplacement de tous ces fichiers et de les copier/collecter manuellement dans un répertoire. Ce document montre comment utiliser le plug-in Flask-Collect pour simplifier cette tâche.

Notez que cette documentation se concentre sur la collection d’actifs statiques. Pour illustrer cette fonctionnalité, cet exemple utilise le plugin Flask-Bootstrap, qui fournit des actifs statiques. Il utilise également le plugin Flask-Script, qui est utilisé pour simplifier le processus de création de tâches en ligne de commande. Aucun de ces plugins n’est critique pour ce document, ils sont juste utilisés ici pour démontrer la fonctionnalité. Si vous choisissez de ne pas utiliser Flask-Script, vous voudrez consulter la documentation Flask-Collect pour d’autres moyens d’appeler la commande collect.

Notez également que la configuration de votre serveur Web frontal pour servir ces actifs statiques n’entre pas dans le cadre de ce document, vous voudrez consulter quelques exemples en utilisant [Nginx](https://www.digitalocean.com/community/tutorials/ how-to-deploy-flask-web-applications-using-uwsgi-behind-nginx-on-centos-6-4) et [Apache](http://stackoverflow.com/questions/24739925/serving-static-files -via apache) pour plus d’informations. Qu’il suffise de dire que vous créerez des alias d’URL commençant par “/static” vers le répertoire centralisé que Flask-Collect créera pour vous dans cet exemple.

L’application est structurée comme suit :

/manage.py - The app management script, used to run the app, and to collect static assets
/app/ - this folder contains the files that are specific to our app
    | - __init__.py - Contains the create_app function
    | - static/ - this folder contains the static files for our app.
        | css/styles.css - custom styles for our app (we will leave this file empty)
        | js/main.js - custom js for our app (we will leave this file empty)
    | - templates/index.html - a simple page that extends the Flask-Bootstrap template

  1. Tout d’abord, créez votre environnement virtuel et installez les packages requis : (votre-virtualenv) $ pip install flask flask-script flask-bootstrap flask-collect

  2. Établissez la structure de fichiers décrite ci-dessus :

    $ touch manage.py; mkdir -p app/{static/{css,js},templates}; touch app/{init.py,static/{css/styles.css,js/main.js}}

  3. Établissez le contenu des fichiers manage.py, app/__init__.py et app/templates/index.html :

    manage.py

    #!/usr/bin/env python import os from flask_script import Manager, Server from flask import current_app from flask_collect import Collect from app import create_app

    class Config(object): # CRITICAL CONFIG VALUE: This tells Flask-Collect where to put our static files! # Standard practice is to use a folder named “static” that resides in the top-level of the project directory. # You are not bound to this location, however; you may use basically any directory that you wish. COLLECT_STATIC_ROOT = os.path.dirname(file) + ‘/static’ COLLECT_STORAGE = ‘flask_collect.storage.file’

    app = create_app(Config)

    manager = Manager(app) manager.add_command(‘runserver’, Server(host=‘127.0.0.1’, port=5000))

    collect = Collect() collect.init_app(app)

    @manager.command def collect(): “““Collect static from blueprints. Workaround for issue: https://github.com/klen/Flask-Collect/issues/22"”” return current_app.extensions[‘collect’].collect()

    if name == “main”: manager.run()

# app/__init__.py
from flask import Flask, render_template
from flask_collect import Collect
from flask_bootstrap import Bootstrap

def create_app(config):
  app = Flask(__name__)
  app.config.from_object(config)

  Bootstrap(app)
  Collect(app)

  @app.route('/')
  def home():
    return render_template('index.html')

  return app

# app/templates/index.html
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}
<div class="navbar navbar-fixed-top">
  <!-- ... -->
</div>
{% endblock %}

{% block content %}
  <h1>Hello, Bootstrap</h1>
{% endblock %}

  1. Une fois ces fichiers en place, vous pouvez maintenant utiliser le script de gestion pour exécuter l’application :

    $ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.

  2. Maintenant, pour collecter vos actifs statiques pour la première fois. Avant de faire cela, il convient de noter à nouveau que vous ne devriez PAS avoir de dossier static/ au niveau supérieur de votre application ; c’est là que Flask-Collect va placer tous les fichiers statiques qu’il va collecter à partir de votre application et des différents plugins que vous pourriez utiliser. Si vous * avez * un dossier static/ au niveau supérieur de votre application, vous devez le supprimer entièrement avant de continuer, car commencer avec une table rase est un élément essentiel pour voir/comprendre ce que fait Flask-Collect. Notez que cette instruction n’est pas applicable pour une utilisation quotidienne, c’est simplement pour illustrer le fait que Flask-Collect va créer ce répertoire pour vous, puis il va y placer un tas de fichiers.

Cela dit, vous pouvez exécuter la commande suivante pour collecter vos éléments statiques :

$ ./manage.py collect

Après cela, vous devriez voir que Flask-Collect a créé ce dossier static/ de niveau supérieur et qu’il contient les fichiers suivants :

$ find ./static -type f # execute this from the top-level directory of your app, same dir that contains the manage.py script
static/bootstrap/css/bootstrap-theme.css
static/bootstrap/css/bootstrap-theme.css.map
static/bootstrap/css/bootstrap-theme.min.css
static/bootstrap/css/bootstrap.css
static/bootstrap/css/bootstrap.css.map
static/bootstrap/css/bootstrap.min.css
static/bootstrap/fonts/glyphicons-halflings-regular.eot
static/bootstrap/fonts/glyphicons-halflings-regular.svg
static/bootstrap/fonts/glyphicons-halflings-regular.ttf
static/bootstrap/fonts/glyphicons-halflings-regular.woff
static/bootstrap/fonts/glyphicons-halflings-regular.woff2
static/bootstrap/jquery.js
static/bootstrap/jquery.min.js
static/bootstrap/jquery.min.map
static/bootstrap/js/bootstrap.js
static/bootstrap/js/bootstrap.min.js
static/bootstrap/js/npm.js
static/css/styles.css
static/js/main.js

Et c’est tout : utilisez la commande “collect” chaque fois que vous apportez des modifications au CSS ou au JavaScript de votre application, ou lorsque vous avez mis à jour un plug-in Flask qui fournit des ressources statiques (comme Flask-Bootstrap dans cet exemple).

← Signaux
Pagination →