Python 在 Flask 应用程序中运行 Dash 应用程序

Running a Dash app within a Flask app

提问by zthomas.nc

I have an existing Flask app, and I want to have a route to another app. More concretely, the second app is a Plotly Dashapp. How can I run my Dash app within my existing Flask app?

我有一个现有的 Flask 应用程序，我想要一条通往另一个应用程序的路线。更具体地说，第二个应用程序是Plotly Dash应用程序。如何在我现有的 Flask 应用程序中运行我的 Dash 应用程序？

@app.route('/plotly_dashboard') 
def render_dashboard():
    # go to dash app

I also tried adding a route to the Dash instance, since it's a Flask app, but I get the error:

我还尝试向 Dash 实例添加路由，因为它是 Flask 应用程序，但出现错误：

AttributeError: 'Dash' object has no attribute 'route'

回答by davidism

From the docs:

从文档：

The underlying Flask app is available at app.server.

import dash
app = dash.Dash(__name__)
server = app.server

You can also pass your own Flask app instance into Dash:

import flask
server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)

底层 Flask 应用程序可在app.server。

import dash
app = dash.Dash(__name__)
server = app.server

您还可以将您自己的 Flask 应用程序实例传递到 Dash：

import flask
server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)

Now that you have the Flask instance, you can add whatever routes and other functionality you need.

现在你有了 Flask 实例，你可以添加任何你需要的路由和其他功能。

@server.route('/hello')
def hello():
    return 'Hello, World!'

---

---

To the more general question "how can I serve two Flask instances next to each other", assuming you don't end up using one instance as in the above Dash answer, you would use DispatcherMiddlewareto mount both applications.

对于更普遍的问题“我如何为两个相邻的 Flask 实例提供服务”，假设您最终没有像上面的 Dash 答案那样使用一个实例，您将使用DispatcherMiddleware安装两个应用程序。

dash_app = Dash(__name__)
flask_app = Flask(__name__)

application = DispatcherMiddleware(flask_app, {'/dash': dash_app.server})

回答by chanioxaris

Set url_base_pathnamein your Dash instance.

url_base_pathname在您的 Dash 实例中设置。

app_flask = flask.Flask(__name__)

app_dash = dash.Dash(__name__, server=app_flask, url_base_pathname='/pathname')

Now you can redirect to your Plotly Dashboard app under any Flask routes you want.

现在你可以在你想要的任何 Flask 路由下重定向到你的 Plotly Dashboard 应用程序。

@app_flask.route('/plotly_dashboard') 
def render_dashboard():
    return flask.redirect('/pathname')

回答by JustInTime

Ok for those who are lazy enough like me, here is the code

好吧，对于像我这样足够懒惰的人，这里是代码

from dash import Dash
from werkzeug.wsgi import DispatcherMiddleware
import flask
from werkzeug.serving import run_simple
import dash_html_components as html

server = flask.Flask(__name__)
dash_app1 = Dash(__name__, server = server, url_base_pathname='/dashboard' )
dash_app2 = Dash(__name__, server = server, url_base_pathname='/reports')
dash_app1.layout = html.Div([html.H1('Hi there, I am app1 for dashboards')])
dash_app2.layout = html.Div([html.H1('Hi there, I am app2 for reports')])
@server.route('/')
@server.route('/hello')
def hello():
    return 'hello world!'

@server.route('/dashboard')
def render_dashboard():
    return flask.redirect('/dash1')


@server.route('/reports')
def render_reports():
    return flask.redirect('/dash2')

app = DispatcherMiddleware(server, {
    '/dash1': dash_app1.server,
    '/dash2': dash_app2.server
})

run_simple('0.0.0.0', 8080, app, use_reloader=True, use_debugger=True)

回答by Mandeep Singh

To solve this issue, here is what I did and was successful. This should be documented in official DASH documentation

为了解决这个问题，这是我所做的并且是成功的。这应该记录在官方 DASH 文档中

####################################
import dash_core_components as dcc
import dash_html_components as html
from dash import Dash
from dash.dependencies import Input, State, Output

from flask          import Flask, flash, redirect, render_template,    request, session, abort, url_for, json, make_response

url_router=''

@application.route("/view_tables", methods=['GET','POST'])
def view_tabales:
  # Logic for displaying dashboard using Dash
  server.layout = html.Div(
                    children=[
                    #division for graph 1
                    html.Div([html.H1(children='Capital Charge'),],className='text-center'),

                    html.Div([html.Div([html.H3(children='''Correlation for assets'''),],className='text-primary'),
                                # define the graph
                                dcc.Graph(
                                    id='Delta-graph',
                                    figure={
                                        'data': [
                                            {'x': df_delta['Correlation_Level'], 
                                             'y': df_delta['Capital_Charge'], 
                                             'type': 'bar', 
                                             'name': 'Delta',
                                             #'domain': {'x': [0, .48],'y': [0, .49]},
                                             }
                                        ],
                                        # sizes the graph
                                        'layout': {
                                            'title': 'Delta','margin': {'l': 10, 'r': 0, 't': 30, 'b': 10},
                                            "height":300,
                                        }
                                    }
                                )],className='col-md-4'),
  url_router = 'Dash(__name__,server=application, url_base_pathname="/dash")'

Then you can control which dashboard it is headed from inside flask

然后你可以控制它从烧瓶内部朝向哪个仪表板

if url_router !='':
      server = url_router

server.layout = html.Div(children = [html.H1(children = ' MEP dashboard - error 404')])


# run the app.
if __name__ == "__main__":
   # Setting debug to True enables debug output. This line should be
   # removed before deploying a production app.
   server.secret_key = os.urandom(12)
   server.run_server(debug=True,port=5000)

you can create different functions with different graphs between the Flask code and keep calling the code in dash

您可以在 Flask 代码之间创建具有不同图形的不同函数，并继续在 dash 中调用代码