Structuring a multi-tab app

Thank you for sharing this example! Very helpful.

As far as I understand, in order to define the callbacks outside of the main app (either in the tab file or a separate file just for callbacks), you need to have a separate app.py file that you import from your main app file so instead of app = dash.Dash() you have from app import app

It is explained in the bottom of the page URLs and Multi-Page App Tutorial that you quoted, but maybe was not when you created this example. (So I thought I just quote it here for reference)

It is worth noting that in both of these project structures, the Dash instance is defined in a separate app.py , while the entry point for running the app is index.py . This separation is required to avoid circular imports: the files containing the callback definitions require access to the Dash app instance however if this were imported from index.py , the initial loading of index.py would ultimately require itself to be already imported, which cannot be satisfied.

And the app.py file is simply just something like this

import dash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.config.suppress_callback_exceptions = True
3 Likes