Running a Dash app within a Flask app

Question

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

@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:

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

Answer 1

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)

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

@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 DispatcherMiddleware to mount both applications.

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

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

Answer 2

Set url_base_pathname in your Dash instance.

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.

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

Answer 3

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)

Answer 4

#here are full codee
from dash import Dash
import flask
from dash import html

server = flask.Flask(__name__)
app = Dash(__name__, server=server, url_base_pathname='/ATM_Data_Anlaysis/')
app.layout = html.Div([html.H1('This Is head',style={'textAlign':'center'})])

@server.route("/dash")
def MyDashApp():
    return app.index()

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 5

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

####################################
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