Dash and Flask Integration through DispatchedMiddleWare and ReverseProxy not working

Question

I'm trying to integrate a dashboard through Dash with a mature Flask App. I've tried multiple routes including these methods, but to no avail. My main application runs through a reverse proxy and also has a secret key as well. What approach am I'm doing wrong. For me, I'm aiming for the DAsh app to run inside the Flask App and as a separate app side by side as a last resort.

wsgi.py

from werkzeug.wsgi import DispatcherMiddleware
"""Implements the application for deployment"""
from flask.mainapp import mainapp as mainapp
from dashboard import dashapp as dashapp
mainapp.secret_key = os.getenv('SECRET_KEY', 'dev')
dashapp.secret_key = mainapp.secret_key
applicaton = DispatcherMiddleware(mainapp, {
        '/admin/dashboard':dashapp.server,
})

dashboard.py

import dash
import plotly.express as px
import dash_core_components as dcc
import dash_html_components as dhtml
import plotly.graph_objects as go
import dash_bootstrap_components as dbc

#def create_dashboard(server):
"""Create a Plotly Dash dashboard."""
dashapp = dash.Dash( __name__,#server=server,
        requests_pathname_prefix='/admin/dashboard/',
        routes_pathname_prefix='/admin/dashboard/',
        external_stylesheets=[dbc.themes.BOOTSTRAP],
                serve_locally = False
        )
        # Create Dash Layout
dashapp.layout = dhtml.Div(children=[dhtml.H1(children='Hello Dash')])

        #return dash

mainapp.py

#Libraries 
from flask import *
from flask import stream_with_context
from werkzeug.utils import secure_filename
from werkzeug.datastructures import Headers
from werkzeug.wrappers import Response
from ReverseProxy import *
##Reverse Proxy line
mainapp.wsgi_app = ReverseProxied(mainapp.wsgi_app,script_name=mainapp.config["APPLICATION_ROOT"])
Bootstrap(mainapp)

#Main way to start application and host
if __name__ == '__main__':
    #Uncomment for non reverse proxy and comment the next line
    mainapp.run(host='0.0.0.0', port=5000, debug = False)

Thank you.

Edit here's the errors that come out after loading the page:

score 0 · Accepted Answer · answered Jun 16 '20 at 12:55

I'm going to post the answer that I came up with. In short, when doing Reverse proxying, especially mounting to a URL that has an application root you have to change the configuration with the URL before the Dashapp mount included in the configuration. So let's begin with the original dash app.

    dashapp = dash.Dash(__name__, server=server,
                    url_base_pathname='/admin/dashboard/',
                    external_stylesheets=[dbc.themes.BOOTSTRAP],
#                          static='/gambler/static',
#                          assets_folder= "/admin/dashboard/assets/",
#                          serve_locally = False
    )

So now the big part: Dash does not know how to serve files based upon how Flask is mounted with it's applicaiton root (i.e. Flaskapp['APPLICATION_ROOT']) so you got to do the application root URL ontop of the rest of the route:

dashapp.config.update({
    "routes_pathname_prefix": '/[APPLICATION_ROOT]/admin/dashboard/',
    'requests_pathname_prefix': '/[APPLICATION_ROOT]/admin/dashboard/'
})

That should work for those doing work with application root as well as reverse proxying.

Dash and Flask Integration through DispatchedMiddleWare and ReverseProxy not working

1 Answers1