Template assets not loaded when running panel application via jupyter-server-proxy

[AjayThorve]

Description of expected behavior and the observed behavior

Running the react template app example, but via jupyter-server-proxy fails to load assets (css and js) resulting in a black screen:

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
import numpy as np
import holoviews as hv
from panel.template import ReactTemplate

pn.extension()
react = pn.template.ReactTemplate(title='React Template')

pn.config.sizing_mode = 'stretch_both'

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True, min_height=400)

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True, min_height=400)

react.sidebar.append(freq)
react.sidebar.append(phase)

# Unlike other templates the `ReactTemplate.main` area acts like a GridSpec 
react.main[:4, :6] = pn.Card(hv.DynamicMap(sine), title='Sine')
react.main[:4, 6:] = pn.Card(hv.DynamicMap(cosine), title='Cosine')
react.show(open=False)

visit url localhost:8888/proxy/{port}

Stack traceback and/or browser JavaScript console output

If you notice the url bootstrap.css is trying to load, its localhost:8888/static instead of localhost:8888/proxy/{port}/static, which infact is the correct url.

Also, other resources like bokeh and panel.min.js are infact loaded correctly using localhost:8888/proxy/{port} as the base

Expected Behavior
All assets are loaded similar to the scenario when we run it without jupyter-server-proxy.

ALL software version info

bokeh: 2.2.3
panel: 0.10.2

cc @bryevdv @philippjfr

[WesleyTheGeolien]

@AjayThorve I think this is coming from line 24 in panel/io/resources.py LOCAL_DIST = "/static/extensions/panel/" which gets called Line 450 in panel/template/base.py.

I can confirm that changing line 450 to use the CDN_DIST instead of LOCAL_DIST corrects the problem.

Just need to figure out how to pass the appropriate path through ...

[philippjfr]

This is pretty high priority to fix. I wonder if there's a way to expose the static resources on the proxy, otherwise we will need some way of detecting when we're serving off the proxy.

[AjayThorve]

Is there a way to take path_type as an input parameter (LOCAL_DIST or CDN_DIST), while starting the panel server?

This is pretty high priority to fix. I wonder if there's a way to expose the static resources on the proxy, otherwise we will need some way of detecting when we're serving off the proxy.

What I have noticed is changing the LOCAL_DIST = "./static/extensions/panel/" also fixes the issue for a local build.

Not sure though if adding the extra . at the beginning for a relative url will break other things.

[WesleyTheGeolien]

I am not familiar enough with bokeh but I think this is how they are doing it??
bokeh/resources.py line 370

    @staticmethod
    def _inline(path):
        begin = "/* BEGIN %s */" % basename(path)
        with open(path, "rb") as f:
            middle = f.read().decode("utf-8")
        end = "/* END %s */" % basename(path)
        return "%s\n%s\n%s" % (begin, middle, end)

Then again I could be completely wrong ...

[philippjfr]

@WesleyTheGeolien Thanks for that, I'll play with this today.

[philippjfr]

Made a start which handles most of the resources, still have to solve it for the template resources though.

[WesleyTheGeolien]

@philippjfr let me know if you want a hand testing this ... looks like you are making great progress though 👍