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

Dash Python
1

Hi,

I have a 4 pages app that I am now running using an index.py 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

assets\
data\
meta\
pages\
       init.py
       page1.py
       page2.py
       page3.py
       home.py

app.py
index.py
wsgi.py

every pageX.py has both callbacks and layout and starts with

app = Dash(__name__,
           url_base_pathname='/page1/',
external_stylesheets=external_stylesheets)
app.layout = dbc.Container(....)

while my wsgi.py 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__)


@server.route("/")
def home():
    return "Hello, Flask!"



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

application = DispatcherMiddleware(
    server,
    {"/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?

127.0.0.1 - - [13/Jun/2022 15:59:30] "GET /page1 HTTP/1.1" 308 -
127.0.0.1 - - [13/Jun/2022 15:59:30] "GET /page1/ HTTP/1.1" 200 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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 -
127.0.0.1 - - [13/Jun/2022 15:59:30] "GET //page1_dash-component-suites/dash/dcc/dash_core_components.v2_3_0m1652107458.js HTTP/1.1" 404 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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 -
127.0.0.1 - - [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

Thanks!

2

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!

3

HI @AnnMarieW,

thanks for the quick answer!

I have seen that and it is kinda what I have now in index.py (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
    else:
        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.