Comment intégrer une application Dash dans une application Flask existante

Photo de Jezael Melgoza sur Unsplash

Dash (by Plotly) est un framework Python open source simple à utiliser pour la création de superbes applications Web pilotées par les données.

Si vous souhaitez en savoir plus sur le cadre, rendez-vous à «Introduction à Dash», l'annonce officielle de la sortie, ou consultez les nombreux exemples de leur galerie.

Ce qui est important, c’est que Dash utilise Flask pour le back-end.

Si vous connaissez Flask, vous saurez qu’il a un noyau minimaliste, qu’il est hautement personnalisable et qu’il est livré avec des extensions faciles à ajouter.

Il est donc naturel de penser que les applications Dash doivent être faciles à intégrer dans une application Flask existante.

Table des matières

  • Solutions existantes
  • Un exemple autonome
  • Factorez l'application Dash dans son propre sous-dossier
  • Plusieurs applications Dash sur un seul serveur Flask
  • Points remarquables
  • Notes sur la configuration, direnv et virtualenvwrapper
  • Journal des mises à jour

Solutions existantes

Les ressources d'intégration de Dash avec une application Flask existante sont rares et incomplètes.

La recherche de «flacon d'intégration de tableau de bord» fait apparaître le code des documents officiels en cours de déploiement. B̵u̵t̵ ̵i̵t̵'̵s̵ ̵h̵a̵r̵d̵l̵y̵ e̵v̵e̵n̵ a̵n̵ e̵x̵am̵p̵l̵e̵. L'équipe Dash a fait un excellent travail et a répondu aux demandes de la communauté. Néanmoins, les nouveaux exemples utilisent uniquement une configuration de flacon sans système de base.

D'autres résultats de recherche pointent vers des questions StackOverflow telles que Exécuter une application Dash dans une application Flask ou sur le problème github de Dash qui demande Un exemple de travail simple pour incorporer un tiret dans une fiole sous un chemin.

Ces ressources sont encore insuffisantes et présentent généralement plusieurs des problèmes suivants:

  • les exemples ne sont pas autonomes, difficiles à tester, désorganisés
  • exiger une application Flask simplifiée de manière irréaliste
  • ne pas répondre aux exigences de base spécifiques telles que l'authentification

Ainsi, si vous avez également passé des heures à chercher, à lire et à tester des dizaines de liens imbriqués, sans grand succès, vous êtes probablement parvenu à la même conclusion.

Nous avons besoin d'une stratégie documentée pour intégrer une application Dash dans une application Flask existante!

Un exemple autonome

J'ai créé un exemple facilement testable et autonome qui intègre une application Dash dans un projet Flask réaliste.

Pour le tester

Cloner le dépôt github:

git clone https://github.com/okomarov/dash_on_flask
cd dash_on_flask
touchez .envrc

Ajoutez les détails de configuration au fichier .envrc (non validé):

export FLASK_APP = dashapp
export FLASK_ENV = développement
export DATABASE_URL = sqlite: ///$PWD/app.db
export SECRET_KEY = secret_key_change_as_you_wish_make_it_long_123

Chargez les détails de la configuration, créez un environnement virtuel (facultatif, vous y reviendrez), installez des dépendances python, initialisez la base de données et exécutez l'application:

source .envrc
pip install -r Requirements.txt
fiole db init
fiole db migrate -m 'init'
mise à niveau de flask db
course de ballon

Enfin, consultez l’application à l’adresse http://127.0.0.1:5000/dashboard!

Vous devriez être redirigé vers un formulaire de connexion, avec un lien pour vous inscrire en premier. Autrement dit, le tableau de bord requiert une authentification:

Échantillon du formulaire de connexion

C'est exactement ce que nous voulons! Commencez par vous inscrire, puis connectez-vous et revenez au / tableau de bord.

Maintenant, nous avons une application Dash construite indépendamment, servie par notre application Flask, qui fonctionne bien avec notre authentification et d'autres extensions.

Détails d'implémentation

L'application ajoute le traceur d'actions simple affiché ci-dessous (modifié pour utiliser les prix yahoo):

Adapté de l’exemple Dash’s Stock Ticker

vers une application Flask qui utilise:

  • le modèle d'usine et les plans
  • une base de données pour gérer les utilisateurs (sqlite avec Flask-SQLAlchemy et Flask-Migrate)
  • authentification (Flask-Login)

Ceci est une configuration standard avec la plupart des applications Flask. Les étapes et le code sur la manière de mettre en œuvre l'infrastructure utilisée dans mon référentiel sont directement adaptés de l'excellent Flask Mega Tutorial de Miguel Grinberg.

Il y a plusieurs choses à noter. Jetons donc un coup d’œil à la structure des dossiers:

.
├── app /
├── __init__.py
├── extensions.py
├── forms.py
├── models.py
├── modèles /
│ └── ...
└── webapp.py
├── app.db
├── config.py
├── dashapp.py
├── migrations /
└── ...
En .envrc
└── exigences.txt

Tout d'abord, l'application / dossier contient tout ce qui concerne notre application Flask, ou le serveur, comme indiqué dans la documentation de Dash. Nous créons le plan directeur principal et les itinéraires dans webapp.py (édité pour plus de clarté):

et définir la fabrique d'applications dans __init__.py:

Deuxièmement, dashapp.py est le fichier que nous exécutons avec flask run. Ce fichier crée l'application serveur Flask qui est réutilisée par l'application Dash.

De plus, le fichier est également utilisé pour définir la mise en page et les rappels de l'application Dash et pour protéger ses itinéraires / vues (édités pour plus de clarté):

Factorez l'application Dash dans son propre sous-dossier

Comme vous l'avez probablement remarqué, le fichier qui instancie l'application (parfois appelé run.py) est plus encombré que d'habitude. Par exemple, l'application Dash devrait vraiment appartenir à son propre dossier.

Ainsi, si vous n'utilisez pas le modèle de fabrique d'applications, la structure plus simple décrite dans cette réponse vous conviendra probablement mieux.

Après la solution de contournement expliquée dans cette réponse, nous pouvons placer le code de l'application Dash dans son propre sous-dossier sous le répertoire / app:

.
├── app
├── __init__.py
├── dashapp1
│ ├── actifs /
│ ├── callbacks.py
│ └── layout.py
⋮
└── webapp.py
├── dashapp.py
⋮

où la mise en page et les rappels se trouvent dans leurs fichiers distincts (la modification côte à côte est plus facile que d'avoir des rappels sous la mise en page):

L'instatiation de l'application Dash est maintenant entièrement effectuée dans __init__.py (pour plus de détails, consultez le référentiel github) et notre principal fichier dashapp.py est juste:

depuis l'application import create_app
serveur = create_app ()

Ça fait du bien!

Plusieurs applications Dash sur un seul serveur Flask

Maintenant que nous savons comment intégrer notre application Dash dans son propre sous-dossier, nous pouvons instancier plusieurs applications Dash sous le même serveur Flask.

La solution complète se trouve sur github sous la fonctionnalité de branche / multiple_dash_apps.

Notez également que si vous n'utilisez pas le modèle d'usine pour démarrer le serveur Flask, ignorez cette section et suivez la documentation officielle pour structurer une application de plusieurs pages.

Supposons maintenant que vous avez une autre application Dash que vous avez créée sous / app / dashapp1:

.
├── app
├── __init__.py
├── dashapp1
│ ├── actifs /
│ ├── callbacks.py
│ └── layout.py
├── dashapp2
│ ├── actifs /
│ ├── callbacks.py
│ └── layout.py
⋮
└── webapp.py
├── dashapp.py
⋮

Nous pouvons adapter notre /app/__init__.py à:

Nous pouvons maintenant lancer notre serveur Flask et accéder à / dashboard pour la première application Dash ou à / example pour la deuxième application!

Points remarquables

Modèles Jinja: lors de l'accès à la route du tableau de bord, l'application Dash est chargée dans sa propre page au lieu d'un élément div pouvant être intégré dans nos modèles Jinja. Cette réponse décrit une solution de contournement sur la façon de réutiliser notre modèle Jinja pour l'application Dash.

Notes sur la configuration

direnv

Pour exécuter l'exemple, nous devons créer des variables d'environnement, qui sont ensuite importées automatiquement par config.py. Nous plaçons ces variables dans un fichier nommé .envrc et les sources si nécessaire.

Je laisse direnv charger automatiquement par magie les variables d’environnement spécifiques au projet définies dans le fichier .envrc lorsque je cd dans le dossier.

virtualenvwrapper

Avant d'installer la configuration requise, je recommande de créer un environnement virtuel. Une façon de faire est d’exécuter à partir de la racine du projet:

python3 -m venv env
source env / bin / activate

Un autre moyen parmi beaucoup d’autres est de gérer et d’organiser vos environnements en un seul endroit avec virtualenvwrapper, ce que j’utilise conjointement avec l’intégration direnv.

Journal des mises à jour

  • Message initial - 2019/01/02
  • Meilleure organisation des fichiers d'application Dash - 2019/02/21
  • Plusieurs applications Dash sous un même serveur Flask - 2019/05/05
  • Ajout du contexte Flask aux applications Dash - 2019/07/09

Restons en contact

Si vous avez aimé cet article et que vous souhaitez recevoir les mises à jour pertinentes ou rester informé des futurs sujets abordés, établissez une connexion plus profonde!

Inscrivez-vous à ma newsletter. Et ne vous inquiétez pas. J'essaie de créer de la qualité et la qualité prend du temps (et je déteste aussi le spam).