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...
1 Like
7

Hi @AnnMarieW

On Dash Enterprise, we saw this error:
dash.exceptions.UnsupportedRelativePath: Paths that aren’t prefixed with requests_pathname_prefix are not supported.
You supplied: /folder/ui_page and requests_pathname_prefix was /Workspaces/view/test-app01/

We’re extending your multipage sample project.

def create_nav_link(icon, label, href, lidx):
dmc.NavLink( … )
dcc.Input(id={‘type’:‘nav_link_url’,‘index’:lidx}, type=‘hidden’, value=href),

The href comes from dash.page_registry.values()

If we intentionally prefix https://hostname//Workspaces/view/test-app01/ to the href and create the links, the error can be resolved.

My question is. Is there a better way than hardcoding this prefix in our project?
Thank you very much!

8

Hi @aydevmo

See the second example in the library on how to use the pathname_prefix

You can set the prefix in the app constructor:


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

Then be sure to use dash.get_relative_path() for links. and dash.get_asset_url() if you need the correct path to access things in the assets folder. You can find examples of both in the example above.

Note – the relative path is also included in the dash.page_registry . So instead of using the "path" like this:

html.Div(dcc.Link('Dashboard', href=dash.page_registry['pages.analytics']['path']))

be sure to use the "relative_path"


html.Div(dcc.Link('Dashboard', href=dash.page_registry['pages.analytics']['relative_path']))
2 Likes
9

Hi @AnnMarieW

Thank you very much for the detailed solution! I appreciate it!
We’ll incorporate it into our project.
Have a good day!

1 Like
10

Thank you @AnnMarieW for supporting @aydevmo .

Hi @aydevmo,
just in case you need support in the future, we do have a Dash Enterprise support team as well. Let me know if you’re interested and I can give you more details.

1 Like