Clash Royale CLAN TAG

Dash callbacks not working, if dash app is created and called from flask

Dash app fails, when it is created and called through the flask sever. Dash 'Callback’s are not working and gives Post Request 400. Any help is much appreciated.

A sample code to reproduce the problem is below. I use latest Dash 0.22.0, Dash HTML Components 0.11.0, and Dash Core Components 0.24.1, and Flask 1.0.2:

# file 'simple_flask.py'

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_wtf.csrf import CSRFProtect


# Initialise flask App
app = Flask(__name__, instance_relative_config=True)
#app.config.from_object('config.Config')

db = SQLAlchemy() # SQLAlchemy
csrf_protect = CSRFProtect()

def set_app(app):

# Setup WTForms CSRFProtect
app.secret_key = 'My super secret key'
csrf_protect.init_app(app)

# Setup Flask-SQLAlchemy
db.init_app(app)

# run in app context
with app.test_request_context():
db.create_all()

from simple_dash import create_dash
create_dash(app)


if __name__ == '__main__':
set_app(app)
app.run(host='127.0.0.1', port=5002, debug=True)


## file 'simple_dash.py'

import dash
import dash_html_components as html
import dash_core_components as dcc

def create_dash(app):
dash_app = dash.Dash(__name__, server=app,
#static_folder='/static',
#url_base_pathname='/app/oga/',
# csrf_protect=False
)
dash_app.layout = html.Div([
dcc.Dropdown(
id='my-dropdown',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='NYC'
),
html.Div(id='output-container')
])


@dash_app.callback(
dash.dependencies.Output('output-container', 'children'),
[dash.dependencies.Input('my-dropdown', 'value')])
def update_output(value):
return 'You have selected "{}"'.format(value)


The missing reference after loading the page and any subsequent change in drop-down is: “POST /_dash-update-component HTTP/1.1” 400.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.