Integrating Dash apps into Flask: minimal example
Combining One or More Dash Apps with Existing WSGI Apps
The following example illustrates this approach by combining two Dash apps with a Flask app.
flask_app.py
from flask import Flask
flask_app = Flask(__name__)
@flask_app.route('/')
def index():
return 'Hello Flask app'
app1.py
import dash
import dash_html_components as html
app = dash.Dash(
__name__,
requests_pathname_prefix='/app1/'
)
app.layout = html.Div("Dash app 1")
app2.py
import dash
import dash_html_components as html
app = dash.Dash(
__name__,
requests_pathname_prefix='/app2/'
)
app.layout = html.Div("Dash app 2")
wsgi.py
from werkzeug.wsgi import DispatcherMiddleware
from app1 import app as app1
from app2 import app as app2
application = DispatcherMiddleware(flask_app, {
'/app1': app1.server,
'/app2': app2.server,
})
In this example, the Flask app has been mounted at / and the two Dash apps have been mounted at /app1 and /app2. In this approach, we do not pass in a Flask server to the Dash apps, but let them create their own, which the DispatcherMiddleware routes requests to based on the prefix of the incoming requests. Within each Dash app, requests_pathname_prefix must be specified as the app's mount point, in order to match the route prefix set by the DispatcherMiddleware.
Note that the application object in wsgi.py is of type werkzeug.wsgi.DispatcherMiddleware, which does not have a run method. This can be run as a WSGI app like so:
$ gunicorn wsgi:application
Alternatively, you can use the Werkzeug development server (which is not suitable for production) to run the app:
run.py
from werkzeug.wsgi import DispatcherMiddleware
from werkzeug.serving import run_simple
from app1 import app as app1
from app2 import app as app2
application = DispatcherMiddleware(flask_app, {
'/app1': app1.server,
'/app2': app2.server,
})
if __name__ == '__main__':
run_simple('localhost', 8050, application)
If you need access to the Dash development tools when using this approach (whether running with a WSGI server, or using the Werkzeug development server) you must invoke them manually for each Dash app. The following lines can be added before the initialisation of the DispatcherMiddleware to do this:
app1.enable_dev_tools(debug=True)
app2.enable_dev_tools(debug=True)
Note: debug mode should not be enabled in production. When using debug mode with Gunicorn, the --reload command line flag is required for hot reloading to work.
In this example, the existing app being combined with two Dash apps is a Flask app, however this approach enables the combination of any web application implementing the WSGI specification. A list of WSGI web frameworks can be found in the WSGI documentation with one or more Dash apps.
Reference - https://dash.plot.ly/integrating-dash
Edited:
Multiple Dash app without WSGI
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 Dash1')])
dash_app2.layout = html.Div([html.H1('Hi there, I am Dash2')])
@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)
Looks like few things have changed and needs to be updated in both Combining One or More Dash Apps with Existing WSGI Apps and Multiple Dash app without WSGI.
DispatcherMiddleware
now needs to be imported fromwerkzeug.middleware.dispatcher
rather thanwerkzeug.wsgi
inrun.py
/wsgi.py
, as appropriately.- Also, the
flask_app
needs to be imported appropriately.