Embedding more than one multi-page Dash apps in a Flask app

I am attempting to embed two multi-page Dash apps into a Flask app, and I have successfully done so by following the chosen answer here: python - Integrating Dash apps into Flask: minimal example - Stack Overflow.

However, one of the two multi-page apps do not function properly.

When I start the Flask app and I visit /dashApp1, it functions exactly as it did when it was not embedded in a Flask app. However, if I then visit /dashApp2, the page contents render exactly as they should, but all of the Dash functionality (callbacks, etc) do not work.

What’s interesting is that the reverse is true! If I start the Flask app and first visit /dashApp2, the entire app works exactly as it should! But then if I visit /dashApp1, the page contents (HTML, CSS) render exactly as they should, but all of the Dash functionality of this app now does not work.

So I know that both Dash apps do indeed work as they should when they are both embedded in a Flask app, however I cannot visit both apps in the same session without the latter one ceasing to function as it should.

I have enabled debugging and disabled suppress_callback_exceptions, and I have no errors from Dash anywhere! So I am at a loss as to how to debug any further. Has anyone else experienced something like this?

Hello @shwiftyRick,

Nope, I haven’t. However, I expect it has something to do with how the callbacks work. They are all sent to the post request of _dash-update-component.

When you visit the first page, it registers that the endpoints go to the first location. And then it doesn’t update for the second one.

Have you tried doing the other inside of an iframe?

Thank you. I have not tried that, so I will look into it.

I agree, it seems to be a callback specific issue from what I can tell.

1 Like