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 e

Answer 1

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