plotly-dash showing blank web page

Question

I am new to plotly-dash. when I try to connect http://127.0.0.1:8050/ in chrome or Firefox it showing a blank web page.

I have tried in both chrome and firefox browsers. I have followed the installation procedure mentioned in this website https://dash.plot.ly/installation

pip install dash==1.0.2  # The core dash backend
pip install dash-daq==0.1.0  # DAQ components (newly open-sourced!)

I used this code.

# -*- coding: utf-8 -*-
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)

blank web page

terminal screen shot

blank web page

js console network console error message in javascript 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 ([email protected]?v=1.0.0&m=1564319210:67)
at qg ([email protected]?v=1.0.0&m=1564319210:95)
Bg @ [email protected]?v=1.0.0&m=1564319210:117  
c.callback @ [email protected]?v=1.0.0&m=1564319210:126
Ag @ [email protected]?v=1.0.0&m=1564319210:116
zg @ [email protected]?v=1.0.0&m=1564319210:116
qi @ [email protected]?v=1.0.0&m=1564319210:131
ui @ [email protected]?v=1.0.0&m=1564319210:133
(anonymous) @ [email protected]?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ [email protected]? 
v=1.0.0&m=1564319210:27
Vc @ [email protected]?v=1.0.0&m=1564319210:158
Sc @ [email protected]?v=1.0.0&m=1564319210:158
Z @ [email protected]?v=1.0.0&m=1564319210:156
Kc @ [email protected]?v=1.0.0&m=1564319210:155
ya @ [email protected]?v=1.0.0&m=1564319210:153
enqueueSetState @ [email protected]?v=1.0.0&m=1564319210:202
t.setState @ [email protected]?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 @ [email protected]?v=1.0.0&m=1564319210:130
ui @ [email protected]?v=1.0.0&m=1564319210:133
(anonymous) @ [email protected]?v=1.0.0&m=1564319210:158
unstable_runWithPriority @ [email protected]? 
v=1.0.0&m=1564319210:27
Vc @ [email protected]?v=1.0.0&m=1564319210:158
Sc @ [email protected]?v=1.0.0&m=1564319210:158
Z @ [email protected]?v=1.0.0&m=1564319210:156
Kc @ [email protected]?v=1.0.0&m=1564319210:155
ya @ [email protected]?v=1.0.0&m=1564319210:153
bh @ [email protected]?v=1.0.0&m=1564319210:160
xe @ [email protected]?v=1.0.0&m=1564319210:160
nb.render @ [email protected]?v=1.0.0&m=1564319210:215
(anonymous) @ [email protected]?v=1.0.0&m=1564319210:164
$g @ [email protected]?v=1.0.0&m=1564319210:159
Wc @ [email protected]?v=1.0.0&m=1564319210:164
render @ [email protected]?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 @ [email protected]?v=1.0.0&m=1564319210:130
 ui @ [email protected]?v=1.0.0&m=1564319210:133
 (anonymous) @ [email protected]?v=1.0.0&m=1564319210:158
 unstable_runWithPriority @ [email protected]? 
 v=1.0.0&m=1564319210:27
 Vc @ [email protected]?v=1.0.0&m=1564319210:158
 Sc @ [email protected]?v=1.0.0&m=1564319210:158
 Z @ [email protected]?v=1.0.0&m=1564319210:156
 Kc @ [email protected]?v=1.0.0&m=1564319210:155
 ya @ [email protected]?v=1.0.0&m=1564319210:153
 bh @ [email protected]?v=1.0.0&m=1564319210:160
 xe @ [email protected]?v=1.0.0&m=1564319210:160
 nb.render @ [email protected]?v=1.0.0&m=1564319210:215
 (anonymous) @ [email protected]?v=1.0.0&m=1564319210:164
 $g @ [email protected]?v=1.0.0&m=1564319210:159
 Wc @ [email protected]?v=1.0.0&m=1564319210:164
 render @ [email protected]?v=1.0.0&m=1564319210:217
 DashRenderer @ DashRenderer.js:12
 (anonymous) @ (index):28

OS: ubuntu 16.04 LTS Browser : google chrome Version 74.0.3729.169 (Official Build) (64-bit) Version 74.0.3729.169 (Official Build) (64-bit)

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

Answer 1

You might have figured this out already, but I've seen the debug=True problem occur before.

I ran your example on a Ubuntu 16.04 box, but I changed:

app.run_server(debug=True)

to:

app.run_server(debug=False)

and the example ran fine. (I only tested using Mozilla).

You can also run Dash applications specifying a port and host:

app.run_server(host='127.0.0.1',port=8700)

Hope that helps.