Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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'
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})
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')
                Let me point out just one thing that I stumbled upon: in your main you should then run the app_flask. I know it may be obvious, but it may save some minutes to beginners like me
– Tommaso Guerrini
                May 10, 2020 at 8:26
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)
                I tried your code . it looked like what I was looking for as a test case. I get the following:  /usr/local/lib/python3.7/site-packages/flask/app.py", line 1107, in register_blueprint     blueprint, self.blueprints[blueprint.name], blueprint.name AssertionError: A name collision occurred between blueprints <flask.blueprints.Blueprint object at 0x1133d8fd0> and <flask.blueprints.Blueprint object at 0x1139184a8>. Both share the same name "assets". Blueprints that are created on the fly need unique names.
– user2945234
                Aug 21, 2018 at 18:05
                Ran into the same problem. I notice that the method worked for one redirection, but not for two redirections to dask apps. I have no clue how the change the assets name.
– Kehlin Swain
                Sep 25, 2018 at 1:22
                It seem that you have to take care of the flask version you use, I had two different experiences when using flask 1.0 and flask 0.12.
– JustInTime
                Sep 28, 2018 at 7:40
                I used dispatch middleware from werkzeug.middleware.dispatcher because werkzeug.wsgi threw an error.  Here is the documentation link and code:  from werkzeug.middleware.dispatcher import DispatcherMiddleware
– william_drew_67
                Feb 23, 2021 at 21:58
                Is it possible to pass data posted in a flask route to a dash callback triggering an update in a component (for example a plot)? If you'd like to suggest me to start a new question I already did but it was marked as duplicate.... stackoverflow.com/questions/69134233/…
– user11696358
                Sep 13, 2021 at 10:29
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)
                Welcome to Stack Overflow! While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– holydragon
                Dec 23, 2021 at 6:51
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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.