@ui.page('/sub_path') decorator shows page at "/" rather than at "/sub_path"

[belalhmedan90]

Question

issue is: @ui.page('/sub_path') decorator is showing the page in localhost :port rather than creating localhost :port/subpath
how can I solve this please? thanks in advance.

from pathlib import Path
from nicegui import ui, app

class MyClass:
    def __init__(self):
        self.create_page()

    @ui.page('/sub_path')
    def create_page(self):
        ui.label("Here")

if __name__ in {"__main__", "__mp_main__"}:
    
    app.on_startup(MyClass)
    uvicorn_args = {
        'uvicorn_reload_dirs': str(Path(__file__).parent.resolve()),
        'port': 8080,
        'show': False,
        'title': 'my_gui',
        'favicon': '🤖'
    }

    ui.run(**uvicorn_args)

[falkoschindler]

Hi @belalhmedan90,

Let's break it down:

class MyClass:
    def __init__(self):
        self.create_page()

    @ui.page('/sub_path')
    def create_page(self):
        ui.label("Here")

MyClass()

Now two things happen:

• With the ui.page decorator you define a new route at "/sub_path" which will call the create_page method. Note that this function has a parameter self. So when accessing the route "/sub_path?self=something", the method is called and you see "Here".
• On startup you're instantiating MyClass(), which calls create_page() and creates a label in the current context, which is the auto-index page. So when accessing the route "/", you also see "Here".

To fix this, you can nest the page function so that it is decorated but not called on startup:

class MyClass:
    def __init__(self):
        self.create_page()

    def create_page(self):
        @ui.page('/sub_path')
        def sub_page():
            ui.label('Here')

MyClass()

Or you call the decorator explicitly, maybe inside the initializer like this:

class MyClass:
    def __init__(self):
        ui.page('/sub_path')(self.sub_page)

    def sub_page(self):
        ui.label('Here')

MyClass()

[belalhmedan90]

@falkoschindler thanks for your kind suggestion, however this will create another issues, e.g. style might not work properly:

from pathlib import Path
from nicegui import ui, app

class MyClass:
    def __init__(self):
        self.load_styles()
        ui.page('/sub_path')(self.create_page)
        ui.navigate.to('/sub_path')

    def load_styles(self):
        # Load custom CSS styles
        css_path = Path(__file__).resolve().parents[2] / "static" / "style.css"
        with open(css_path, 'r') as css_file:
            ui.add_head_html("<style>" + css_file.read() + "</style>")

    def create_page(self):
        ui.label("Here").classes("heading-text")

if __name__ in {"__main__", "__mp_main__"}:
    
    app.on_startup(MyClass)
    uvicorn_args = {
        'uvicorn_reload_dirs': str(Path(__file__).parent.resolve()),
        'port': 8080,
        'show': False,
        'title': 'my_gui',
        'favicon': '🤖'
    }

    ui.run(**uvicorn_args)

style.css

.heading-text {
    font-weight: bold;
    font-size: 38px;
}

[falkoschindler]

add_head_html is basically part of the UI. So you should move it into create_page. Otherwise it adds CSS to the auto-index page, which is the current context when calling it on startup.