Run WSGI on multiple dash apps triggers 404 error for dash dependencies


I have a 4 pages app that I am now running using an file (loosely similar to this ). I got access to a web server and reading around seems that the way to go would be use werkzeug. However after reading several examples on stackOverflow or this forum I cannot make it to work.

My project structure is something like this


every has both callbacks and layout and starts with

app = Dash(__name__,
app.layout = dbc.Container(....)

while my file is structured like this. At the moment I tried both having an app within this file or by importing from pages.

import flask
from dash import Dash, html
from werkzeug.middleware.dispatcher import DispatcherMiddleware
from werkzeug.serving import run_simple
from pages.page1 import app as page1

server = flask.Flask(__name__)

def home():
    return "Hello, Flask!"

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

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

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

Problem is that while I can see localhost:8050/app2, when I go to localhost:8050/page1 it get stuck in the loading and outputs several 404 related to dash packages? - - [13/Jun/2022 15:59:30] "GET /page1 HTTP/1.1" 308 - - - [13/Jun/2022 15:59:30] "GET /page1/ HTTP/1.1" 200 - - - [13/Jun/2022 15:59:30] "GET /page1_dash-component-suites/dash/deps/polyfill@7.v2_3_1m1652107458.12.1.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/deps/react@16.v2_3_1m1652107458.14.0.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/deps/react-dom@16.v2_3_1m1652107458.14.0.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/deps/prop-types@15.v2_3_1m1652107458.7.2.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_1_0m1651876973.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_3_1m1652107458.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/dcc/dash_core_components.v2_3_0m1652107458.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/dcc/dash_core_components-shared.v2_3_0m1652107458.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/html/dash_html_components.v2_0_2m1652107458.min.js HTTP/1.1" 404 - - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/dash_table/bundle.v5_1_1m1652107458.js HTTP/1.1" 404 -

I tried both using request_url_prefix and also request_url_basename (raises 404 not found). What am I missing? Went through the docs but no information


Hi @d.a and welcome to the dash community :slightly_smiling_face:

There is a new, much easier way to make multi-page Dash apps. This has been in development in dash-labs for a few months and you can find more information here:

The pages/ feature has just been released in dash V2.5.1. There will be an announcement and new documentation available in a few days.

If you would like to get a headstart, I recommend checking out this repo which has a few minimal examples of multi-page apps for dash >=2.51

The multi_page_example1 looks like it might be a match for your project structure. You could try running that app, then modifying it for your content. If you get stuck, then the new docs will be available soon!

HI @AnnMarieW,

thanks for the quick answer!

I have seen that and it is kinda what I have now in (where I am just rendering a different layouts)

@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def display_page(pathname):
    if pathname == "/page1":
        return page1.layout
    elif pathname == "/page2":
        return page2.layout
    elif pathname == "/page3":
        return page3.layout
        return home.layout

but I want to deploy with gunicorn and to this end I think would be cleaner to use DispatcherMiddleware to route requests to based on the prefix of the incoming requests.