Integrate a Dash app with a route into a proper running Flask environment

Question

I'm struggling a bit with integrating a proper running Dash app inside a Flask website. Either I do have a problem in understanding howit works or it's only a small issue.
Each hint is welcome.

• My Flask environment has this route:

@blueprint.route('/dash-test')
@login_required
def dash_test():
    """Integrate the Dash App into the page"""
    server = flask.Flask(__name__)
    return render_template('dashapp-test.html',
                           my_dashapp=my_dash_app(),
                           server=server
                           )

• It's calling the function which contains the Dash app:

def my_dash_app():

    app = dash.Dash(
        __name__,
        external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'],
    )

    app.layout = html.Div(id='example-div-element')
    return app

• Given result after send the request /dash-test:

<dash.dash.Dash object at 0x0000025909864700>

But expected is: Dash App is shown.

Answer 1

This page from the docs might prove useful for you. It deals directly with running Dash inside a Flask app. Here is the mini example they provide:

import flask
import dash
import dash_html_components as html

server = flask.Flask(__name__)

@server.route('/')
def index():
    return 'Hello Flask app'

app = dash.Dash(
    __name__,
    server=server,
    routes_pathname_prefix='/dash/'
)

app.layout = html.Div("My Dash app")

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

Answer 2

Something to keep in mind: when you generate a dashapp, you are adding components to an existing flask application (also called "server"). A suitable solution to this would be to build your flask app --> then build your dash app with a specific route --> then build a route in your flask app to your dashapp:

# Create a function which creates your dashapp
import dash
def create_dashapp(server):
    app = dash.Dash(
        server=server,
        url_base_pathname='/dashapp/'
    )
    app.config['suppress_callback_exceptions'] = True
    app.title='Dash App'

    # Set the layout
    app.layout = layout = html.Div('Hello Dash app')

    # Register callbacks here if you want...
    
    return app


# Create your app (or server, same thing really)
server = flask.Flask(__name__)

# Initialize by passing through your function
create_dashapp(server)

# Define index route
@server.route('/')
def index():
    return 'Hello Flask app'


# Define dashapp route
@server.route('/dashapp/')
@login_required
def redirect_to_dashapp():
    return redirect('/dashapp/')


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