dash.exceptions.NoLayoutException

Dash Python
1

I am deploying a dash app (Locally and on Heroku) and I keep running into the NoLayoutException error even though i have defined app.layout before app.run_server…

On localhost:

Screenshot 2020-02-25 at 3.18.38 PM
Screenshot 2020-02-25 at 3.18.38 PM787×112 11.6 KB

From the logs:

dash.exceptions.NoLayoutException: The layout was `None` at the time that `run_server` was called. Make sure to set the `layout` attribute of your application before running the server.

127.0.0.1 - - [25/Feb/2020 15:17:52] " **GET / HTTP/1.1** " 500 -

My code – app.py -

from app import server

# import tabs
from tabs import port, report


app = dash.Dash(__name__)
server = app.server

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True



# In[5]:

# App Layout

app.layout = html.Div([

    # header
    html.Div([

        html.H3("Market Platform", style={"float":"left",
                                                         "margin-left":"2%",
                                                         "margin-top":"30px",
                                                         "margin-right":"16px"}),

        html.Div(
            html.Img(src='https://s3-us-west-1.amazonaws.com/elasticbeanstalk-us-west-1-721395644652/images/exy.png',height="100%")
            ,style={"float":"right","width":"170px","height":"100px","margin-top":"-14px"})
        ],
        className="row header"
        ),

    # tabs
    html.Div([

        dcc.Tabs(
            id="tabs",
            style={"height":"60","verticalAlign":"middle"},
            children=[
                 dcc.Tab(label="Portfolio", value="port_tab"),
                 dcc.Tab(label="Reporting", value="report_tab"),
            ],
            value="report_tab",
        )

        ],

        className="row tabs_div"
        ),

        # Tab content
        html.Div(id="tab_content", style={"margin": "2% 3%"})

])

# Callbacks

@app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value")
              ]
             )
def render_content(tab):
    """
    For user selections, return the relevant tab
    """
    if tab == "port_tab":
        return port.layout
    if tab == "report_tab":
        return report.layout

# In[10]:

if __name__ == '__main__':
    app.run_server(debug='True', port='8000', host='127.0.0.1')

My file structure is:

app.py
index.py
Procfile
requirements.txt 
report.csv 
tabs
-- port.py
-- report.py

I also updated procfile as suggested:

web: gunicorn app:server

As you may notice,

app = dash.Dash(__name__)
and app.layout is defined before app.run_server which is the last block of code in the file.

Any pointers would be much appreciated.

2

What’s in index.py? If this is structured as per https://dash.plot.ly/urls, then this should be web: gunicorn index:server

3

@chriddyp

index.py mostly contains imports –

import pandas as pd
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import flask
from app import app
from app import server

I moved everything to app.py and therefore web: gunicorn app:server in Procfile.

I tried the other approach as per - https://dash.plot.ly/urls and still running into the same error.