How to add your dash app to Flask

Dash Python
1

Hi guys,

Does anyone have any tips for best practices to add your dash application to Flask or Django application?

A few snippets would be extremely beneficial.

Thanks

2

Hmm, there used to be a good section on this in the Dash docs which seems to have been removed for some reason :confused:

Anyway, here’s some options

Flask

Integration with Flask is easier because Dash is built on top of Flask. There are two main options here:

  • Host the Dash app on a particular route of the existing Flask app. This is done by passing the Flask app to your Dash app with the server keyword argument.
  • Stitch together multiple Flask apps and Dash apps using Werkzeug’s DispatcherMiddleware.

Host on a route of existing Flask app

Here’s a simple example. Note you need to set routes_pathname_prefix on the Dash app, which controls where the Dash app will be visible.

import dash
import dash_html_components as html
import flask

server = flask.Flask(__name__)


@server.route("/")
def home():
    return "Hello, Flask!"


app = dash.Dash(server=server, routes_pathname_prefix="/dash/")

app.layout = html.Div("This is the Dash app.")

if __name__ == "__main__":
    app.run_server(debug=True)

You can access the Flask home page at localhost:8050/ and the Dash app at localhost:8050/dash/.

DispatcherMiddleware

You can access the underlying Flask server of any Dash app you create using .server which means you can stitch together the apps using DispatcherMiddleware from Werkzeug. Here’s a simple example. Note this time we set requests_pathname_prefix rather than routes_pathname_prefix.

import dash
import dash_html_components as html
import flask
from werkzeug.middleware.dispatcher import DispatcherMiddleware
from werkzeug.serving import run_simple

server = flask.Flask(__name__)


@server.route("/")
def home():
    return "Hello, Flask!"


app1 = dash.Dash(requests_pathname_prefix="/app1/")
app1.layout = html.Div("Hello, Dash app 1!")

app2 = dash.Dash(requests_pathname_prefix="/app2/")
app2.layout = html.Div("Hello, Dash app 2!")

application = DispatcherMiddleware(
    server,
    {"/app1": app1.server, "/app2": app2.server},
)

if __name__ == "__main__":
    run_simple("localhost", 8050, application)

You can see the Flask home page at localhost:8050/ and the two Dash apps at localhost:8050/app1/ and localhost:8050/app2/. Note that run_simple is definitely only suitable for development and you should use something like gunicorn to actually serve your app when it’s ready.

This approach is used in the dash-bootstrap-components documentation if you’re interested.

Django

For integration with Django you should check out django-plotly-dash. I don’t know so much about this, but if you’re a Django user I think it’s the best option.

8 Likes
3

Thank you very much! Well appreciated

1 Like
4

Hi,
Thanks for this post. In this question on dash behind a paywall, you said:

you can host the dash app on a route of the flask app and make sure that that route is protected
and refer to this post.

I’ve found examples of protecting a flask route but I don’t understand how to protect a dash route. How does one do that?

5

Hello @livingpixels,

Have you checked out my topic about this, there is discussion there about protecting all routes except for those explicitly provided by using the before_request handler.

6

Hi @jinnyzor,

I hadn’t seen your post about this and it’s great! I’ve been trying to secure a Dash app using a keycloak server via OIDC but wasn’t able to get the public pages integrated. I really like the authentication being prior to the Dash app - makes a lot of sense to me. It’s not working 100% yet but I’m close! Once I get my simple example working, I’ll add a reply to your topic.

Thanks so much for your reply and the other post!

1 Like