CODEWITHSUNDEEP
pythonflaskplotly-dash
Mysterious Otter
Mysterious Otter

Reputation: 4029

Running a Dash app within a Flask app

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'

Upvotes: 75

Views: 62873

Answers (5)

davidism
davidism

Reputation: 127180

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})

Upvotes: 81

mayur sarvankar
mayur sarvankar

Reputation: 9

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

Upvotes: 0

JustInTime
JustInTime

Reputation: 2776

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)

Upvotes: 20

Mandeep Singh
Mandeep Singh

Reputation: 185

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

Upvotes: -4

chanioxaris
chanioxaris

Reputation: 1006

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')

Upvotes: 39

Related Questions