Serving a Panel app with Deck.gl over HTTPS

Hi,

Problem: I am trying to serve an app (via Docker), which has a Deck.gl map, over https. But the Deck.gl component doesn’t display as soon as SSL cert is supplied or a proxy is set up (Nginx). Unsure whether the problem lies in Pydeck or Panel.
Short question: Does anyone know how to serve a Panel app with a Deck.gl component over https?

Note: Please let me know if you want to see working code and which combination (e.g. nginx + panel or panel using Bokeh’s SSL support), right now I just focused on the parts which might cause the error. Because I tried quite a lot of combinations I thought I would clutter the thread with too much code and thereby make it more confusing.

What I tried:
I started out by first running the app without https and on port 5006, which works fine.

Now, I saw that Bokeh supports supplying SSL certificates with the serve command and therefore I used it on
the Panel serve command. It works except for the Deck.gl map (all other Panel elements show just fine):

panel serve --port=5006 --ssl-certfile cert.pem --ssl-keyfile cert.key --show app.py"]

or

panel serve --port=443 --allow-websocket-origin=localhost --ssl-certfile cert.pem --ssl-keyfile cert.key --show app.py"

With mapping those ports to the same ones or mapping the port 443 on the host to 5006 of the container, in all those cases I see all Panel elements except the Deck.gl map.

Because web deployment is new to me, I thought an alternate method could help, therefore I tried to use Nginx.
I started simple by first creating a proxy without the SSL. Just the http proxy by itself resulted in the same issue of an empty element where the Deck.gl map should be.

I did some tests by serving the following via Nginx (used some examples instead of my own app, just in case):

  • Serving a static pydeck html file (using Pydeck’s to html functionality): works.
  • Serving this example (examples/gallery/external/deck.gl) as a script not a notebook: works, this one doesn’t use pydeck directly
  • Serving this example (examples/gallery/param/deck_gl_global_power_plants) as a script not a notebook: Deck.gl component doesn’t display

For me this isn’t conclusive whether the problem arises in Pydeck or Panel, because the first example is just static and just generates a html file and isn’t using the Pydecks bindings when serving.

For the second example it is the same becaue it also doesn’t use Pydeck directly.

Some snippets which I used for points 2 and 3:

Nginx: proxy.conf:

server {
listen 80;
server_name localhost;

location / {
    proxy_pass http://docker_service_name:5006;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host:$server_port;
    proxy_buffering off;
}

}

Here I just ported from 80 of the host to 80 of the Nginx container (also tried other combinations but sam results)

Served using:

panel serve --port=5006 --allow-websocket-origin=localhost --use-xheaders --show front_end/panel_frontend.py

Conditions

Browser: Brave (same result in Firefox)
python: 3.8.5
panel version: 0.9.7
pydeck: 0.4.0
SSL certificate type: self signed (for testing)

The error I get:
After applying the formatting in Brave on the minimized js file:

in createDeck

panel.min.js:50 (formatted: 602) Error: Could not parse position string null
at h (dist.min.js:formatted:12318)
at e.value (dist.min.js:formatted:12463)
at e.t (dist.min.js:formatted:12370)
at new MapView (dist.min.js:formatted:22689)
at dist.min.js:formatted:873
at S (dist.min.js:formatted:874)
at dist.min.js:formatted:973
at J (dist.min.js:formatted:974)
at dist.min.js:formatted:950
at Array.map ()