# How to add your dash app to Flask

**URL:** <https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870>\
**Category:** Dash Python\
**Created:** [April 9, 2021, 1:18pm UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870 "2021-04-09T13:18:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [April 9, 2021, 1:18pm UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870/1 "2021-04-09T13:18:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [April 10, 2021, 11:10am UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870/2 "2021-04-10T11:10:14Z")

</div>

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

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.

```python
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`.

```python
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](https://github.com/facultyai/dash-bootstrap-components/blob/main/docs/run.py) if you’re interested.

# Django

For integration with Django you should check out [django-plotly-dash](https://github.com/GibbsConsulting/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.

---

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [April 10, 2021, 11:22am UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870/3 "2021-04-10T11:22:10Z")

</div>

Thank you very much! Well appreciated

---

<div class="post-metadata">

**Author:** ![livingpixels](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/livingpixels/32/25838_2.png) [@livingpixels](https://community.plotly.com/u/livingpixels)\
**Post date:** [January 8, 2024, 11:16pm UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870/4 "2024-01-08T23:16:11Z")

</div>

Hi,  
Thanks for this post. In [this question on dash behind a paywall](https://community.plotly.com/t/dash-app-behind-a-paywall/55675), 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?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [January 9, 2024, 12:22am UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870/5 "2024-01-09T00:22:27Z")

</div>

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.

> [@Dash App Pages with Flask Login Flow using Flask](https://community.plotly.com/t/dash-app-pages-with-flask-login-flow-using-flask/69507):
>
> Hello All! I’ve been working to be able to use the Flask method of logging in. This is an alteration of the flask\_login method provided here: [dash-multi-page-app-demos/multi\_page\_flask\_login at main · AnnMarieW/dash-multi-page-app-demos · GitHub](https://github.com/AnnMarieW/dash-multi-page-app-demos/tree/main/multi_page_flask_login) This will allow you to: restrict individual pages and redirect to login while saving the path (note: you will use the registered page name to restrict) once logged in, will redirect to the saved path or to the home page when logging out, it will redi…

---

<div class="post-metadata">

**Author:** ![livingpixels](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/livingpixels/32/25838_2.png) [@livingpixels](https://community.plotly.com/u/livingpixels)\
**Post date:** [January 9, 2024, 3:54am UTC](https://community.plotly.com/t/how-to-add-your-dash-app-to-flask/51870/6 "2024-01-09T03:54:23Z")

</div>

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](https://community.plotly.com/t/dash-app-pages-with-flask-login-flow-using-flask/69507).

Thanks so much for your reply and the other post!