Dash showing blank page

i am new to dash.it showing black webpage in browser. please help me understand…

os: ubuntu
browser: firefox.

i have used this program.

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
html.H1(children=‘Hello Dash’),

html.Div(children='''
    Dash: A web application framework for Python.
'''),

dcc.Graph(
    id='example-graph',
    figure={
        'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],
        'layout': {
            'title': 'Dash Data Visualization'


        }
    }
)

])

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

There are a couple of errors that appear when I try to run it.
Such as

    app = dash.Dash(name, external_stylesheets=external_stylesheets)

NameError: name 'name' is not defined

and

    if name == ‘main’:
                    ^
SyntaxError: invalid character in identifier

So I am not sure how you even got it running.
However, when fixing all the errors that I get during launch to

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
    Dash: A web application framework for Python.
'''),

dcc.Graph(
    id='example-graph',
    figure={
        'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],
        'layout': {
            'title': 'Dash Data Visualization'


        }
    }
)

])

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

It works fine for me and the page displays graphs.

it is typographical error, i am sorry about that. while i try to connect to http://127.0.0.1:8050/ in chrome browser. it showing a error message in javascript console. please see this screen shot. https://i.stack.imgur.com/00lKU.png .
error message in console
TypeError: dependencies.forEach is not a function
at graphs (dependencyGraph.js:14)
at combination (combineReducers.js:120)
at reducer.js:66
at reducer.js:102
at dispatch (createStore.js:165)
at index.js:11
at UnconnectedContainer.initialization (APIController.react.js:63)
at UnconnectedContainer.componentWillReceiveProps (APIController.react.js:33)
at Zf (react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:67)
at qg (react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:95)
Bg @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:117
c.callback @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:126
Ag @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:116
zg @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:116
qi @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:131
ui @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:133
(anonymous) @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ react@16.8.6.min.js?v=1.0.0&m=1564319210:27
Vc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
Sc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
Z @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:156
Kc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:155
ya @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:153
enqueueSetState @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:202
t.setState @ react@16.8.6.min.js?v=1.0.0&m=1564319210:20
handleChange @ connect.js:302
dispatch @ createStore.js:173
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ api.js:53
Promise.then (async)
(anonymous) @ api.js:52
Promise.then (async)
(anonymous) @ api.js:46
(anonymous) @ index.js:8
initialization @ APIController.react.js:58
componentDidMount @ APIController.react.js:29
qi @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:130
ui @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:133
(anonymous) @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ react@16.8.6.min.js?v=1.0.0&m=1564319210:27
Vc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
Sc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
Z @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:156
Kc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:155
ya @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:153
bh @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:160
xe @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:160
nb.render @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:215
(anonymous) @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:164
$g @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:159
Wc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:164
render @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:217
DashRenderer @ DashRenderer.js:12
(anonymous) @ (index):28
api.js:73 Uncaught (in promise) TypeError: err.text is not a function
at api.js:73
(anonymous) @ api.js:73
Promise.catch (async)
(anonymous) @ api.js:45
(anonymous) @ index.js:8
initialization @ APIController.react.js:58
componentDidMount @ APIController.react.js:29
qi @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:130
ui @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:133
(anonymous) @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ react@16.8.6.min.js?v=1.0.0&m=1564319210:27
Vc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
Sc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:158
Z @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:156
Kc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:155
ya @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:153
bh @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:160
xe @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:160
nb.render @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:215
(anonymous) @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:164
$g @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:159
Wc @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:164
render @ react-dom@16.8.6.min.js?v=1.0.0&m=1564319210:217
DashRenderer @ DashRenderer.js:12
(anonymous) @ (index):28

Tried the code above and had to do some modifications as mentioned by @Snizl.

Haven’t check but probably have the exact same code

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
html.H1(children='Hello Dash'),

html.Div(children='''
    Dash: A web application framework for Python.
'''),

dcc.Graph(
    id='example-graph',
    figure={
        'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],
        'layout': {
            'title': 'Dash Data Visualization'


        }
    }
)
])

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

This seems to be working fine on my end in Chrome, Firefox and Safari, all close to latest version.

As a first step and for sanity, can you confirm the version of the dash packages being used (both Dash and dependencies) and your Python version? Anything standing out in Chrome’s “Network” tab? Thanks.

I am using

OS: ubuntu 16.04 LTS

Browser : google chrome Version 74.0.3729.169 (Official Build) (64-bit)

dash packages versions
dash -1.0.2,
dash-core-components -1.0.0,
dash-html-components -1.0.0,
dash-renderer -1.0.0,
dash-table -4.0.2

python version 2.7

i have installed dash through pip
sudo pip install dash==1.0.2
[sudo] password for baskar:
DEPRECATION: Python 2.7 will reach the end of its life on January 1st, 2020. Please upgrade your Python as Python 2.7 won’t be maintained after that date. A future version of pip will drop support for Python 2.7. More details about Python 2 support in pip, can be found at https://pip.pypa.io/en/latest/development/release-process/#python-2-support
WARNING: The directory ‘/home/baskar/.cache/pip/http’ or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo’s -H flag.
WARNING: The directory ‘/home/baskar/.cache/pip’ or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo’s -H flag.
Collecting dash==1.0.2
Requirement already satisfied: Flask>=1.0.2 in /usr/local/lib/python2.7/dist-packages (from dash==1.0.2) (1.1.1)
Collecting dash-html-components==1.0.0 (from dash==1.0.2)
Collecting dash-core-components==1.0.0 (from dash==1.0.2)
Collecting dash-renderer==1.0.0 (from dash==1.0.2)
Collecting dash-table==4.0.2 (from dash==1.0.2)
Requirement already satisfied: plotly in /usr/local/lib/python2.7/dist-packages (from dash==1.0.2) (4.0.0)
Requirement already satisfied: flask-compress in /usr/local/lib/python2.7/dist-packages (from dash==1.0.2) (1.4.0)
Requirement already satisfied: PyYAML>=5.1.1 in /usr/local/lib/python2.7/dist-packages (from dash==1.0.2) (5.1.1)
Requirement already satisfied: itsdangerous>=0.24 in /usr/local/lib/python2.7/dist-packages (from Flask>=1.0.2->dash==1.0.2) (0.24)
Requirement already satisfied: Jinja2>=2.10.1 in /usr/local/lib/python2.7/dist-packages (from Flask>=1.0.2->dash==1.0.2) (2.10.1)
Requirement already satisfied: click>=5.1 in /usr/local/lib/python2.7/dist-packages (from Flask>=1.0.2->dash==1.0.2) (7.0)
Requirement already satisfied: Werkzeug>=0.15 in /usr/local/lib/python2.7/dist-packages (from Flask>=1.0.2->dash==1.0.2) (0.15.5)
Requirement already satisfied: retrying>=1.3.3 in /usr/local/lib/python2.7/dist-packages (from plotly->dash==1.0.2) (1.3.3)
Requirement already satisfied: six in ./.local/lib/python2.7/site-packages (from plotly->dash==1.0.2) (1.10.0)
Requirement already satisfied: MarkupSafe>=0.23 in /usr/local/lib/python2.7/dist-packages (from Jinja2>=2.10.1->Flask>=1.0.2->dash==1.0.2) (1.0)
Installing collected packages: dash-html-components, dash-core-components, dash-renderer, dash-table, dash
Successfully installed dash-1.0.2 dash-core-components-1.0.0 dash-html-components-1.0.0 dash-renderer-1.0.0 dash-table-4.0.2

sudo pip install dash-daq==0.1.0
[sudo] password for baskar:
DEPRECATION: Python 2.7 will reach the end of its life on January 1st, 2020. Please upgrade your Python as Python 2.7 won’t be maintained after that date. A future version of pip will drop support for Python 2.7. More details about Python 2 support in pip, can be found at https://pip.pypa.io/en/latest/development/release-process/#python-2-support
WARNING: The directory ‘/home/baskar/.cache/pip/http’ or its parent directory is not owned by the current user and the cache has been disabled. Please check the permissions and owner of that directory. If executing pip with sudo, you may want sudo’s -H flag.
WARNING: The directory ‘/home/baskar/.cache/pip’ or its parent directory is not owned by the current user and caching wheels has been disabled. check the permissions and owner of that directory. If executing pip with sudo, you may want sudo’s -H flag.
Collecting dash-daq==0.1.0
Installing collected packages: dash-daq
Successfully installed dash-daq-0.1.0

**refer js console and network console screen shot below **

@bas Using the closest setup I can (Python 2.7.15 on MacOS, Chrome 75.0.3770.142, dash==1.0.2 + dash-daq==0.1.0), I’m still unable to reproduce the issue.

The stack in the console error corresponds to the moment where we are processing the content of the _dash_dependencies network request. Trying to find a logical differentiator… could you provide me with:

(1) the response for that request in the network tab,

I have [].

(2) the version of at least the following packages in your environment (taken from a clean virtualenv with only dash+dash-daq installed): dash, dash-core-components, dash-daq, dash-html-components, dash-renderer, dash-table, Flask, Flask-Compress, itsdangerous, Jinja2, MarkupSafe, plotly, PyYAML, retrying, setuptools, six, Werkzeug, wheel.

I have

Package              Version
-------------------- -------
Click                7.0
dash                 1.0.2
dash-core-components 1.0.0
dash-daq             0.1.0
dash-html-components 1.0.0
dash-renderer        1.0.0
dash-table           4.0.2
Flask                1.1.1
Flask-Compress       1.4.0
itsdangerous         1.1.0
Jinja2               2.10.1
MarkupSafe           1.1.1
pip                  19.2.1
plotly               4.0.0
PyYAML               5.1.1
retrying             1.3.3
setuptools           41.0.1
six                  1.12.0
Werkzeug             0.15.5
wheel                0.33.4
  1. dash_dependencies response screen shot. please check it below
  2. I have installed all packages mentioned by you with correct versions.

Hi Everyone,
I have trouble question. I tried the couple of way for solving this problem.
My test code ran on local notebook.

import os

import dash
import dash_core_components as dcc
import dash_html_components as html

print(“start”)
app = dash.Dash(name)

app.scripts.config.serve_locally = False
app.css.config.serve_locally = False

app.config.update({
‘routes_pathname_prefix’: ‘’,
‘requests_pathname_prefix’: ‘’
})

server = app.server

app.layout = html.Div([
html.H2(‘Hello World’),
dcc.Dropdown(
id=‘dropdown’,
options=[{‘label’: i, ‘value’: i} for i in [‘LA’, ‘NYC’, ‘MTL’]],
value=‘LA’
),
html.Div(id=‘display-value’)
])
print("app.layout: ",app.layout)
@app.callback(dash.dependencies.Output(‘display-value’, ‘children’),
[dash.dependencies.Input(‘dropdown’, ‘value’)])
def display_value(value):
return ‘You have selected “{}”’.format(value)

if name == ‘main’:
app.run_server(host=‘0.0.0.0’, port=8888)

My environment are

python 3.7.3
dash==1.2.0
dash-core-components==1.1.2
dash-html-components==1.0.1
dash-renderer==1.0.1
dash-table==4.2.0
dash-table-experiments==0.6.0
Flask==1.1.1
pandas==0.23.4
requests==2.22.0

When I try to deploy on docker and dominolab env.
It getting the blank page.

Looks like the javascript assets are getting blocked. Could you try app.css.config.serve_locally = True? Setting this to False will serve the assets from an external CDN which might be blocked on your network.

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online