dash.exceptions.NoLayoutException: The layout was `None` at the time that `run_server`

Dash Python
1

I tried the suggested resolutions of using gunicorn index:app.server in PROCFILE. however, I am still getting NoLayoutException when I check the heroku logs.

Below is my code for index.py. Any comments/pointers would be much appreciated.


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 plotly.plotly as py
from plotly import graph_objs as go
from plotly.graph_objs import *
import dash_table_experiments as dt
import flask
from app import app
from app import server

MAPBOX_KEY='xxxx'

import os
from tabs import por, rep, mar


# In[8]:


# App Layout

app.layout = html.Div([

    # header
    html.Div([

        html.H3("Platform Demo", 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/STROOM-logo-black.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="mar", value="mar_tab"),
                 dcc.Tab(label="rep", value="rep_tab"),
                 dcc.Tab(label="por", value="por_tab"),
            ],
            value="mar_tab",
        )
        
        ],
        
        className="row tabs_div"
        ),
         
        # Tab content
        html.Div(id="tab_content", style={"margin": "2% 3%"})

])


# In[9]:

@app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value")
              ]
             )
def render_content(tab):
    """
    For user selections, return the relevant tab
    """
    if tab == "por_tab":
        return por.layout
    if tab == "rep_tab":
        return rep.layout
    elif tab == "mar_tab":
        return mar.layout
    else:
        return mar.layout


# In[10]:

if __name__ == '__main__':
    app.run_server(debug=True)
2

where do you define app = dash.Dash(__name__)? This needs to be done before app.layout.

3

It’s in app.py file.

import dash
import flask
import dash_core_components as dcc
import dash_html_components as html


server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
app.config.suppress_callback_exceptions = True

Does it need to be in index.py ?

4

I would move it app.py, but also have app.layout (defined before app.run_server) be a function callout to index.py to return its layout.You would need to handle the callback definitions to via a function call.

5

Did you mean move it to index.py? So, here’s what my index.py looks like –

server = flask.Flask(__name__)
app = dash.Dash(__name__)
app.config.suppress_callback_exceptions = True


# App Layout

app.layout = html.Div([

    # header
    html.Div([

        .
        .

        html.Div(
            html.Img(src='logo',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="Market", value="market_tab"),
                 dcc.Tab(label="Portfolio", value="portfolio_tab"),
                 dcc.Tab(label="Reporting", value="reporting_tab"),
            ],
            value="market_tab",
        )

        ],

        className="row tabs_div"
        ),

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

])


# In[9]:

@app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value")
              ]
             )
def render_content(tab):
    """
    For user selections, return the relevant tab
    """
    if tab == "portfolio_tab":
        return portfolio.layout
    if tab == "reporting_tab":
        return reporting.layout
    elif tab == "market_tab":
        return market.layout
    else:
        return market.layout


# In[10]:

if __name__ == '__main__':
    app.run_server(debug=True)

still getting the same error.

6

@flyingcujo still getting the same error when I try to deploy.