# Dash app with jupyter-server-proxy

**URL:** <https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626>\
**Category:** RenkuLab\
**Created:** [1 June 2022 12:23 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626 "2022-06-01T12:23:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![manuelknott](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/manuelknott/32/461_2.png) [@manuelknott](https://renku.discourse.group/u/manuelknott)\
**Post date:** [1 June 2022 12:23 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/1 "2022-06-01T12:23:55Z")

</div>

I want to deploy a Dash/Plotly application on Renkulab using jupyter-server-proxy similar to the streamlit example described here: [How to deploy Streamlit in renku](https://renku.discourse.group/t/how-to-deploy-streamlit-in-renku/169)

This is my approach so far:

**1) Create a new environment in `.renku/renku-ini`:**

```auto
[renku "interactive"]
default_url = /dash
lfs_auto_fetch = true

```

**2) Define the `jupyter_notebook_config.py`:**

```auto
c.ServerProxy.servers = {
    'dash': {
        'command': [
            'python',
            'app.py',
        ],
        'port': 5000,
    }
}

```

1. Add the following requirements:

```auto
dash
jupyter-server-proxy
jupyter-dash

```

1. The actual app is defined in `appy.py` like this:

```auto
from jupyter_dash import JupyterDash
JupyterDash.infer_jupyter_proxy_config()
app = JupyterDash( __name__ )

(details are defined here...)

if __name__ == " __main__":
    app.run_server(mode="jupyterlab", debug=False, port=5000, host='0.0.0.0')

```

If I call the python script locally it works. However, in Renkulab I receive the following error when starting the session:

 ![image](https://global.discourse-cdn.com/free1/uploads/renku/original/1X/4d18712066ebaf6ea3f85b8c7e3868d3ab4923b5.png)

Any ideas what could be missing? I also tried a version using gunicorn instead of calling the python script directly (this is for example required when deploying the app on Heroku) with the same result.

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![rrrrrok](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/rrrrrok/32/117_2.png) [@rrrrrok](https://renku.discourse.group/u/rrrrrok)\
**Post date:** [2 June 2022 11:44 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/2 "2022-06-02T11:44:16Z")

</div>

Hey @manuelknott can you share a link to the project? If the one where this has been tried contains information you don’t want to share, you can make another one just for testing this.

---

<div class="post-metadata">

**Author:** ![manuelknott](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/manuelknott/32/461_2.png) [@manuelknott](https://renku.discourse.group/u/manuelknott)\
**Post date:** [2 June 2022 12:42 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/3 "2022-06-02T12:42:38Z")

</div>

I created a public minimal example here:

> **[Manuel Knott / dash\_jupyter\_server\_proxy\_example](https://renkulab.io/gitlab/mknott/dash_jupyter_server_proxy_example)**
>
> GitLab Community Edition

---

<div class="post-metadata">

**Author:** ![rrrrrok](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/rrrrrok/32/117_2.png) [@rrrrrok](https://renku.discourse.group/u/rrrrrok)\
**Post date:** [2 June 2022 13:16 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/4 "2022-06-02T13:16:26Z")

</div>

Hi Manuel, thanks for setting up the example project! Looking at the logs, it seems that the port configuration is wrong?

```auto
2022-06-02T13:07:00.648104731Z Dash is running on http://127.0.0.1:8050/
2022-06-02T13:07:00.648150454Z 
2022-06-02T13:07:00.648713674Z * Serving Flask app 'app' (lazy loading)

```

In your jupyter config you have

```auto
c.ServerProxy.servers = {
    'dash': { # the name of the environment
        'command': [
            'python',
            'app.py'
        ],
        'port': 5000
    }
}

```

so if you change the port to `8050` it should work. I’ve tried that in my fork and the app starts but all I see is “Loading…”:

 ![image](https://global.discourse-cdn.com/free1/uploads/renku/original/1X/0b54acf9201679be9571b8eb5c0a51851f63505a.png)

---

<div class="post-metadata">

**Author:** ![manuelknott](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/manuelknott/32/461_2.png) [@manuelknott](https://renku.discourse.group/u/manuelknott)\
**Post date:** [7 June 2022 12:27 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/5 "2022-06-07T12:27:39Z")

</div>

Hi Rok,

thanks for pointing out the mismatching ports. I fixed it in the current commit of the minimal example.

However, the “Loading…” issue still remains, and I dug deeper into it:

The main issue is that `jupyter_dash` works like a charm when being called from a jupyter notebook environment, as this is the library’s main purpose. It does not work when being called from a python file since it is dependent on the jupyter\_dash frontend extension.

I tried a couple of things:

- Calling a notebook with papermill or nbconvert does not work as the jupyter extensions are not used.
- Calling the python script with “jupyter run …” does not work (same issue)
- I also tried to not use the above mentioned dependencies but to serve the plain flask app (see the “no\_jupyterdash” branch in the example’s repo) → no success so far

There is also a related github issue [here](https://github.com/plotly/jupyter-dash/issues/13).  
I tried adding `requests_pathname_prefix='/proxy/8050/'` to the JupyterDash constructor.  
The logs show that the app is running at `{host}:8888/proxy/8050`, but it is still stuck in the “loading…” phase.

I ran out of ideas at this point.

---

<div class="post-metadata">

**Author:** ![manuelknott](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/manuelknott/32/461_2.png) [@manuelknott](https://renku.discourse.group/u/manuelknott)\
**Post date:** [7 June 2022 13:33 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/6 "2022-06-07T13:33:10Z")

</div>

When opening the “lab” environment with my image, I receive a popup that the lab extension “jupyterlab-dash” is missing. Not sure if that would solve anything. Would maybe be worth a try to add it to the Renku Image.

---

<div class="post-metadata">

**Author:** ![rdcomineor](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/rdcomineor/32/524_2.png) [@rdcomineor](https://renku.discourse.group/u/rdcomineor)\
**Post date:** [29 September 2022 07:24 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/7 "2022-09-29T07:24:18Z")

</div>

Hi Manuel. Did you manage to solve it? After many hours of trial and error I also got stuck in the same place and I am also running out of ideas. I did not get the popup of lab extension “jupyterlab-dash” missing, but I arrived to the “loading…” phase. Any new suggestions would be highly appreciated. Many thanks in advance!

---

<div class="post-metadata">

**Author:** ![tolevski](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/tolevski/32/137_2.png) [@tolevski](https://renku.discourse.group/u/tolevski)\
**Post date:** [5 October 2022 08:14 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/8 "2022-10-05T08:14:39Z")

</div>

Hi @rdcomineor here is a simple working example: [Reproducible Data Science | Open Research | Renku](https://renkulab.io/projects/tasko.olevski/dash-example)

Let me know if you have any problems. I worked with Manuel to resolve the problems he had earlier.

---

<div class="post-metadata">

**Author:** ![rdcomineor](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/rdcomineor/32/524_2.png) [@rdcomineor](https://renku.discourse.group/u/rdcomineor)\
**Post date:** [11 October 2022 14:57 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/9 "2022-10-11T14:57:24Z")

</div>

Thanks so much @tolevski! This is perfect. 🙂

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [24 November 2022 22:12 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/10 "2022-11-24T22:12:17Z")

</div>

Hi @tolevski,

The JupyterLab (`/lab`) view of your [dash-example](https://renkulab.io/projects/tasko.olevski/dash-example) results in the message below.

Any idea how to go about it ?

![image](https://global.discourse-cdn.com/free1/uploads/renku/original/1X/0c5e06cc02e72c1d39bfeba727b7aa21f30d9ef6.png)

---

<div class="post-metadata">

**Author:** ![tolevski](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/tolevski/32/137_2.png) [@tolevski](https://renku.discourse.group/u/tolevski)\
**Post date:** [25 November 2022 08:37 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/11 "2022-11-25T08:37:01Z")

</div>

If you simply click the `Build` button everything should work just fine @champost.

Did you have any issues with it? I tested on my end and the dashboard works just fine and does not show that message. And from what I can tell the jupyterlab environment is also functional.

I will take a look if I can get that message to go away.

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [25 November 2022 08:58 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/12 "2022-11-25T08:58:36Z")

</div>

@tolevski

The dashboard works perfectly as you mention and clicking on `Build` button makes the message go away but another comes up if you wait a little :

 ![image](https://global.discourse-cdn.com/free1/uploads/renku/original/1X/baf77cddeb75945278690bf54abd5338a4f56bb8.png)

---

<div class="post-metadata">

**Author:** ![tolevski](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/tolevski/32/137_2.png) [@tolevski](https://renku.discourse.group/u/tolevski)\
**Post date:** [25 November 2022 09:02 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/13 "2022-11-25T09:02:57Z")

</div>

I just changed that example to do the build step when the docker image is built.

With that change the message does not appear at all. Give it a try and let me know if you have any other issues.

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [25 November 2022 09:29 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/14 "2022-11-25T09:29:13Z")

</div>

Works like a charm now @tolevski !

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [25 November 2022 16:57 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/15 "2022-11-25T16:57:15Z")

</div>

@tolevski

How does one update a Dash app on [renkulab.io](http://renkulab.io) while a session is running, for example if I want to replace the app in your example with the below (taken from [Part 2. Layout | Dash for Python Documentation | Plotly](https://dash.plotly.com/layout)) :

```auto
import pandas as pd

df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])

```

Do I have to commit these changes, push to Gitlab, wait for the CI/CD build and then restart a session with the new image (in this order) to preview my update ?

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [29 November 2022 16:34 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/16 "2022-11-29T16:34:06Z")

</div>

@tolevski

I found a hack to do the above but I am sure there is more elegant way to go about it…

From within a `/lab` interface (and with the `/dash` endpoint open in another tab),

- I simply updated my `app.py` file with the code above 👆🏽 and saved it (without committing any changes)

- I open a terminal and looked up the `PID` of the `python` process running the dash app using

```auto
ps -fC python

```

and then killed it (a new process gets automatically spawned)

![image](https://global.discourse-cdn.com/free1/uploads/renku/original/1X/59d91e550c0edff2e9f9a97af7a2ef69d4dddb45.png)

- I refreshed the `/dash` tab and my app updated in a running session !

---

<div class="post-metadata">

**Author:** ![tolevski](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/tolevski/32/137_2.png) [@tolevski](https://renku.discourse.group/u/tolevski)\
**Post date:** [29 November 2022 16:38 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/17 "2022-11-29T16:38:22Z")

</div>

> [@champost](#):
>
> Do I have to commit these changes, push to Gitlab, wait for the CI/CD build and then restart a session with the new image (in this order) to preview my update ?

Yes currently that is the only “proper” way to get your changes.

What you suggested with looking up the PID, killing that process and then waiting for the new version to start is really smart and it is great that it works. Thanks for sharing that.

---

<div class="post-metadata">

**Author:** ![rrrrrok](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/rrrrrok/32/117_2.png) [@rrrrrok](https://renku.discourse.group/u/rrrrrok)\
**Post date:** [2 December 2022 14:01 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/18 "2022-12-02T14:01:47Z")

</div>

@champost you can use the `debug=True` flag when you start the server - see [here](https://dash.plotly.com/devtools).

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [5 December 2022 09:43 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/19 "2022-12-05T09:43:39Z")

</div>

Thanks @rrrrrok !

Just wanted to mention the following if somebody else runs into a related problem (independent though of Renku).

When using the same `port` to display/update by running/re-running some Dash app code, there appears an `Address already in use...` error due to `werkzeug==2.2.2` and downgrading `werkzeug` to `2.2.1` [solves the problem as of now](https://github.com/plotly/jupyter-dash/issues/103).

---

<div class="post-metadata">

**Author:** ![champost](https://yyz2.discourse-cdn.com/free1/user_avatar/renku.discourse.group/champost/32/232_2.png) [@champost](https://renku.discourse.group/u/champost)\
**Post date:** [25 April 2023 10:24 UTC](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626/20 "2023-04-25T10:24:16Z")

</div>

Hello !

The Dash app MWE (proposed by @tolevski further 👆🏽) doesn’t start automatically on [renkulab.io](http://renkulab.io) with the latest Renku minimal Python template as it should even though it has been specified in `/home/jovyan/work/<project-name>/jupyter_notebook_config.py` with the following server process configuration :

```auto
# Configuration file for jupyter-notebook.
c.ServerProxy.servers = {
    'dash': {
        'command': [
            'python',
            'app.py',
            '--port',
            '{port}',
        ],
        'absolute_url': False,
    }
}

```

Here is a clean MnWE (Minimum not-Working Example) : [dash example clean](https://renkulab.io/projects/champak.beeravolureddy/dash-example-clean)

[Next page](https://renku.discourse.group/t/dash-app-with-jupyter-server-proxy/626.md?page=2)