python - instalar - plotly dash tutorial

Ejecutar una aplicación Dash dentro de una aplicación Flask

Question

Tengo una aplicación Flask existente y quiero tener una ruta a otra aplicación . Más concretamente, la segunda aplicación es una aplicación Plotly Dash . ¿Cómo puedo ejecutar mi aplicación Dash dentro de mi aplicación Flask existente?

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

También intenté agregar una ruta a la instancia de Dash, ya que es una aplicación Flask, pero aparece el error:

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

Answer 1

De los docs :

La aplicación subyacente Flask está disponible en app.server .

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

También puede pasar su propia instancia de aplicación Flask a Dash:

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

Ahora que tiene la instancia de Flask, puede agregar cualquier ruta y otra funcionalidad que necesite.

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

A la pregunta más general "¿cómo puedo servir dos instancias de Flask una al lado de la otra", suponiendo que no termine usando una instancia como en la respuesta Dash anterior, usaría DispatcherMiddleware para montar ambas aplicaciones.

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

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

Answer 2

Establezca url_base_pathname en su instancia de Dash.

app_flask = flask.Flask(__name__)

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

Ahora puede redirigir a su aplicación Plotly Dashboard en cualquier ruta de Flask que desee.

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

Answer 3

Ok para aquellos que son lo suficientemente flojos como yo, aquí está el código

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)

Answer 4

Para resolver este problema, esto es lo que hice y tuve éxito. Esto debe documentarse en la documentación oficial de 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")''

Luego puede controlar qué tablero se dirige desde el interior del matraz

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)

puede crear diferentes funciones con diferentes gráficos entre el código del Frasco y seguir llamando al código en el tablero

Answer 5

Si desea incrustar una aplicación Dash en una aplicación Flask que utiliza:

• la fábrica de aplicaciones y
• requiere autenticación (Flask-Login)

Consulte la solución completa en el repositorio dash_on_flask .

Amplias explicaciones están here .