Relative paths for Dash Pages

Dash Python
1

With Dash Pages, how can I pass a relative path to dash.register_page()? Something like app.get_relative_path() but avoiding circular import.

2

Hi @nlyle

Try using dash.get_relative_path()

Can you say more about why you are passing the relative path to dash.register_page() ?

Note that the relative page is automatically generated for you with the relative_path prop:

  • relative_path: The path with requests_pathname_prefix prefixed before it. Use this path when specifying local URL paths that will work in environments regardless of what requests_pathname_prefix is. In some deployment environments, like Dash Enterprise, requests_pathname_prefix is set to the application name, e.g. my-dash-app. When working locally, requests_pathname_prefix might be unset and so a relative URL like /page-2 can just be /page-2. However, when the app is deployed to a URL like /my-dash-app, then relative_path will be /my-dash-app/page-2.

To verify this, you can use the print_registry() function from dash-labs. More info on that here: GitHub - AnnMarieW/dash-multi-page-app-demos: Minimal examples of multi-page apps using Dash Pages

3

Hi Ann, thanks! For context, I’m hosting an app on Posit Connect, and attempted to use Dash Pages (since I’m using Dash >= 2.5.0) but the relative paths didn’t work as expected. I realize now that this could be due to the 2022 version of Posit Connect I have available to me.

Once deployed to the Posit Connect environment, the URL has a prefix (like your comment mentions) that I wanted to handle with a relative path. I will try dash.get_relative_path(). I also need to use relative href links in Anchor components, so that buttons in individual pages can navigate to other pages. Sounds like I might be able to leverage dash.get_relative_path().

I will circle back and let you know how it goes.

1 Like
4

@AnnMarieW To be more specific, I’m trying to pass a relative path to a DMC Anchor href, kind of like this:

dmc.Anchor(
    dmc.Button("Go Somewhere"),
    href=dash.get_relative_path("/page-name"),
    style={"text-decoration": "none"},
)

When I try, I get an attribute error referencing requests_pathname_prefix. In the traceback it seems it’s not able to return app_get_relative_path(CONFIG.requests_pathname_prefix, path). I tried adding a pathname prefix in the app object instantiation, but no luck.

5

Try using url_base_pathname, for example:

app = Dash(__name__, use_pages=True, url_base_pathname="/app1/")

You can see a minimal example app here GitHub - AnnMarieW/dash-multi-page-app-demos: Minimal examples of multi-page apps using Dash Pages

6

@nlyle,

I encountered the same attribute error with dash.get_relative_path() when running my code on Posit Workbench (as opposed to locally). The issue stemmed from my navbar module, which was located in a ‘components’ folder. I was able to resolve the error by rearranging imports in the main app.py script such that the app was defined prior to the component imports.

# imports
import sys
sys.path.append("/home/user_name@email.org/directory_name")


from dash import Dash, page_container, dcc, callback, Input, Output, State, html, no_update
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc

# -- try moving app definition here --
app = Dash(__name__, external_stylesheets=[dbc.themes.CYBORG], use_pages=True, suppress_callback_exceptions=True)

from components.navbar import navbar
from components.modals import modal_01, modal_02

from datetime import datetime

# ...rest of app.py script...