✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Flask integration with Dash App - routing

I am using flask’ login module with my dash app and need to integrate dash app in Flask environment. I am using flask for authentication and have added a navigation menu that links to the dash app.

Here’s my file structure:

  • auth

    • login
    • server
    • init.py
  • templates

    • base.html
  • pages

    • home.py
    • page2.py

index.py
app.py

contents of app.py


import dash
import flask

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

server = app.server

contents of index.py

app.layout = html.Div([

    # header
    html.Div([
        
        dcc.Link(
            href=get_relative_path('/home'),
        ),

        dcc.Link(
            href=get_relative_path('/archive'),
        ),

        dcc.Location(id='url'),

        html.Div(id='page-content', style={'margin-left': '2%'}),

])



# Render page content
@app.callback(Output("page-content", "children"),
              [
                Input('url', 'pathname')
              ]
             )
def display_content(pathname):

    if pathname == '/home':
        return home.layout

    elif pathname == '/archive':
        return archive.layout()
        
    else:
        return home.layout
      

contents of init.py

from flask_login import LoginManager, login_required
from .server import server
from werkzeug.middleware.dispatcher import DispatcherMiddleware
from werkzeug.serving import run_simple
from index import app as dashApp


@server.route('/dashboard')
@login_required
def render_dashboard():
    return redirect('/dashboard/')


app = DispatcherMiddleware(server, {
    '/dashboard': dashApp.server,
    #add dash routes
    })

if __name__ == '__main__':
    run_simple('0.0.0.0', 5000, app, use_reloader=True, use_debugger=True)

contents of server.py

from flask import Flask

server = Flask(__name__, instance_relative_config=False)

When I attempt to navigate / click the link to dash app, I get a 404 Not Found error. For some reason, upon debugging it seems that the def page_content function is not running and app / page layout isn’t rendered.

@nedned @chriddyp any suggestions. It seems like the page-content callback function in index.py is not being triggered when running dash with flask integration.

I get a 404 Not Found error when attempting to redirect to multi-page dash app.

I don’t know the issue that you;re running into, but I know that Integrating flask login within Dash can be done but requires a bit of configuring to work properly. For example, you need to secure the route end points that Dash automatically creates for the client to hit for callbacks and layouts. There’s a number of folks out there who have managed to get this working, perhaps try copying their approach. For example: GitHub - RafaelMiquelino/dash-flask-login: Implementation of Flask-login on top of Dash.