Black Lives Matter. Please consider donating to Black Girls Code today.

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 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

Not sure this is the case, but I’ve managed to solve some missing requests by changing the host from 127.0.0.1 (local) to 0.0.0.0, in other terms:
if name == ‘main’:
set_app(app)
app.run(host=‘0.0.0.0’, port=5002, debug=True)

I changed the host to 0.0.0.0 from 127.0.0.1 and it didn’t help. I still get one missing POST request per dropdown callback, i.e. when the app loads and when I change the dropdown.

With direction from @T4rk1n, it was a conflict between CSRFProtect flask extension and Dash. I removed CSRFProtect for now.