Dash multipage app server issue - dash.exceptions.NoLayoutException

Dash Python
1

Following guidelines to structure a multipage dash app here: URL Routing and Multiple Apps | Dash for Python Documentation | Plotly

Trying to replicate and adjust following the example in the link, adding one layer on top for execution.

It works fine if I go in the multipageapp folder and execute the index.py file from there. However, I am getting the following error when executing the wsgi.py file, I am not sure what I am doing wrong, it seems like it match what’s in the example.

Following link contains the exact code I am using:

2

It looks like the issue is that when you run the wsgi.py file, you are not setting the layout of the app with app.layout = something. That is why you are getting a NoLayoutException .

I would move your layout to its own variable, try importing it into wsgi.py, and then assign it to the app there:

layout_div = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])
...
app.layout = layout_div
3

The layout is defined in index.py as in the example used in the Dash documentation.

They do mention the following at the end of the page:
" 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."

Hence why layout is separated from server, your solution would go against the recommended way of structuring multipage app I believe.

What I really want to get to is: using their recommended solution, how can I run the app from a file located in the parent folder of the structure they describe? (I need to do so for my specific corporate deployment)

4

I tried your proposed solution, but now get an error due to this circular reference

Error

Traceback (most recent call last):
File “wsgi.py”, line 6, in
from multipageapp.index import layout_app
File “\multipageapp\index.py”, line 5, in
from app import app
ModuleNotFoundError: No module named ‘app’

index.py

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app
from apps import app1, app2

layout_app = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])

@app.callback(Output(‘page-content’, ‘children’),
[Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/apps/app1’:
return app1.layout
elif pathname == ‘/apps/app2’:
return app2.layout
else:
return ‘404’

if name == ‘main’:
app.run_server(debug=True)

wsgi.py

from multipageapp.app import app, server
from multipageapp.index import layout_app

app.layout = layout_app

if name == “main”:
server.run(debug=True, port=8050)

5

I’m curious about what your intention in using wsgi.py was in the first place. It seems like an extra layer around the index.py file which was working fine on its own, according to your 1st post.

6

This has to do with doing a deployment of the app on AWS - this constraint of an overarching wsgi.py file come from my I.T. department.

7

Found out a way to make it work. I simply moved the content of ‘index.py’ into ‘wsgi.py’, deleted ‘index.py’ and I adjusted the imports to have folder ‘multipageapp’ inside

1 Like
8

That’s excellent!

I was assuming that you wanted to keep index.py and wsgi.py together, but knowing you only need one definitely means you could just import all the content of index.py over to one file (running server, etc).

9

I wanted to - in order to keep organization of code as in dash example, but I gave up as I could not find a way to do so. Thanks for your help anyway

10

hey guys this multipage functionality of dash is only available at paid version?

11

Hi @sqnnidea

Multi page apps are available in the open source version of Dash.

See the documentation here:

You might find this helpful:

12

Hello AnnMarie! thank you for the very quick response I appreciate!. I will check thank you!