Multi-Page Dash App Callbacks Not Registering Multi-Page Dash App Callbacks Not Registering flask flask

Multi-Page Dash App Callbacks Not Registering


I figured it out, but I am unsure about the "why"

If I edit app.py to be:

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])server = app.serverapp.config.suppress_callback_exceptions = True

and create index.py to be:

from app1 import build as app1from app import appbody = html.Div([    dcc.Location(id='url', refresh=False),    html.Div(id='page-content')], id='body')app.layout = html.Div([navbar, body])@app.callback(dash.dependencies.Output('page-content', 'children'),              [dash.dependencies.Input('url', 'pathname')])def display_page(pathname):    if pathname == '/' or pathname == '' or pathname == '/index':        return build_index_page()    elif pathname == '/1':        return app1.layout    else:        return html.H3('URL Error!')if __name__ == '__main__':    app.run_server(debug=True)

Then the code for build.py works! As I said, I am unsure why this is the case...


It might be a bit late, for people who come across similar questions, it could be helpful digging into the tutorial here:

Dash renders web applications as a "single-page app". This means that the application does not completely reload when the user navigates the application, making browsing very fast.

Also, you will find a component app.validation_layout which helps "completely" load all the callbacks of your sub-apps.

Basically, in some cases that a single app could trigger all callbacks when hosted separately but don't fire all callbacks when moved into a multi-page apps system.

So if you have a file structure:

- app.py- index.py- apps   |-- __init__.py   |-- app1.py   |-- app2.py

All you need to do is to include wanted apps in app.validation_layout:

# "complete" layoutapp.validation_layout = html.Div([    import_module('apps.'+appname).layout     for appname in [apps-needed-to-be-loaded-completely]])