Flask Hooks in a multi page DASH application

Dash Python
1

Hello
I have a multi page dash application where upon loading the application loads to localhost:8050/app
The remaining pages are localhost:8050/app/process, localhost:8050/app/visualize

I was hoping to use the newly added hook option to create a route so that for example if I have the following

@hooks.route(methods=(“GET”,), name=“get-data”, priority=1)
def new_route():
data = {
“status”: “success”
}
return jsonify(data)

  • and if the user goes to the link localhost:8050/app/get-data - he / she will only just see that string. However - the app being a multi page application when I go to the link it shows me a page not found Error 404.

Or for a single page application
from flask import jsonify
from dash import hooks

import dash
from dash import html, dcc
import pandas as pd

import plotly.express as px

Sample data

df = pd.DataFrame({
“Category”: [“A”, “B”, “C”],
“Value”: [4, 1, 2]
})

Create a simple bar chart

fig = px.bar(df, x=“Category”, y=“Value”, title=“Sample Bar Chart”)

Initialize the Dash app

app = dash.Dash(name,)

Define the layout

app.layout = html.Div([
html.H1(“Simple Dash Application”),
dcc.Graph(figure=fig)
])

@hooks.route(methods=(“GET”,), name=“get-data”)
def new_route():
data = {
“status”: “success”
}
return jsonify(data)

if name == “main”:
app.run(debug=True)

that route does not do anything.

I think I am doing something fundamentally wrong or I am misunderstanding something. Any suggestions / help?

2

Now I also tried server route as in the following example

from flask import jsonify
from dash import hooks
from flask import Flask
import dash
from dash import html, dcc
import pandas as pd

import plotly.express as px

# Sample data
df = pd.DataFrame({
    "Category": ["A", "B", "C"],
    "Value": [4, 1, 2]
})

# Create a simple bar chart
fig = px.bar(df, x="Category", y="Value", title="Sample Bar Chart")
server = Flask(__name__)
# Initialize the Dash app
app = dash.Dash(__name__,server = server,routes_pathname_prefix='/mdct/', use_pages=True,)

# Define the layout
app.layout = html.Div([
    html.H1("Simple Dash Application"),
    dcc.Graph(figure=fig)
])


# @hooks.route(methods=("GET",), name="get-data")
# def new_route():
#     data = {
#         "status": "success"
#     }
#     return jsonify(data)


@server.route('/get-data', methods=['GET'])
def flask_endpoint():
    data = {
        "status": "success"
    }
    return jsonify(data)

if __name__ == "__main__":
    app.run(debug=True)

This seems not to work in a multi page app as dash is identifying it as a page request and telling me a page not found error.

3

Hello @sssaha1989,

You needed to bring the hook before you initialized the app:

from flask import jsonify
from dash import hooks
from flask import Flask
import dash
from dash import html, dcc, page_container
import pandas as pd

import plotly.express as px

# Sample data
df = pd.DataFrame({
    "Category": ["A", "B", "C"],
    "Value": [4, 1, 2]
})

# Create a simple bar chart
fig = px.bar(df, x="Category", y="Value", title="Sample Bar Chart")


@hooks.route(methods=("GET",), name="get-data")
def new_route():
    data = {
        "status": "success"
    }
    return jsonify(data)

# Initialize the Dash app
app = dash.Dash(__name__, use_pages=True, pages_folder='', routes_pathname_prefix='/mdct/',)

# Define the layout
app.layout = html.Div([
    html.H1("Simple Dash Application"),
    dcc.Graph(figure=fig),
    page_container
])



if __name__ == "__main__":
    app.run(debug=True)
2 Likes
4

That worked - thanks - you just saved me- maybe I missed this in the documentation or my misunderstanding of the whole hook system.

Now for multi page apps - should I then always write the additional flask hooks on the app.py? Or if I add them in my python files inside pages folder - that should work too?

5

For simplicity, I’d recommend adding them in a file separately and importing that into the app.

1 Like