Dash app unresponsive on binder

Ive got an OS project and I wanted to use binder to make a web-app to serve as a form of live-documentation.

Its a pretty simple minimal setup. The dash app contains some UI elements and some plotly figures. Both run fine locally. When launched on binder, the plotly elements do not render. The ui elements do render, but have a weird ‘unresponsive’ behavior, where I can drag sliders but they will snap back to their original location.

Google seems to fail me in giving further directions. Is there something with port configurations that needs to be resolved? Is my local osx vs linux-docker conda env a likely culprit? Or are dash apps not supported by binder at all?

Here is the repo, for reference:

Ah… I get the same issue with a local notebook… so let me figure that out first before blaming binder…

So… its working locally now; this appeared to just be an issue of having local dash apps running on the side. Pretty sure I dont now… but now the binder/dash combo appears not to be working at all. Im getting **127.0.0.1** refused to connect.

Note there is a link on top of the above linked repo that will take you to the binder notebook. Im pretty lost as to what the issue is here. I feel like this should be simple but Im kinda out of leads.

Actually taking the time to think about it… ofc 127.0.0.1 is local to the binder server; so thats not going to work.

It seems like many free hosting services draw a line where they do not allow hosting this kind of content at all. But does binder?

Ive tried setting up dash in a github devcontainer but that seems like much more of a rabbithole than my nonexistent devop skills want to deal with right now.

Id be super happy to pay someone a few bucks a month for this kind of hosting… as long as it has the same zero-devops just-link-a-conda-env-and-a-notebook-and-it-just-works binder magic, im here for it.

They can work. My understanding is you need some special handling relative to the jupyter server proxy step to get the URL to access the app. I haven’t seen an implementation for Dash like exists for proxying RStudio, gator, and Theia that makes the getting to the URL endpoint transparent to the user. (I don’t see one for Dash listed here among repositories with the jupyter-server-proxy topic .)


You already had the jupyter-server-proxy installed and so you were close seeing it work. (You had jupyter-server-proxy installed but you weren’t using it. Did you copy the basis for you repo from somewhere else where it was working?)

I forked yours and adjusted it based on what I had seen the ‘DunderData/Tutorials’ example here that contains Ploty Dash that should run on MyBinder, but that wasn’t building currently. (Specifically, the tutorial here discusses using MyBinder.) I forked it and tried updating it and worked out much of what I tried in your situation, too. My fork is here and you can get my modified version of the minimal example notebook using the ‘launch binder’ badge there, or just click here.

I took what seemed to work there and fixed yours. I only really changed system.py and getting_started.ipynb slightly.
Hopefully the changes still allow you to use it locally, perhaps?

My fork of yours:

Launch by clicking here.

Specifically, this notebook succinctly illustrates what is necessary to get the URL that the server proxy sets up. I then integrated those steps in yours.

I added a blurb below your code in my fork because you have to take a URL and paste it in your browser address bar to access the running app. Feel free to try and integrate this in your source as you wish. I was just trying to spell out what is needed.

Maybe you can see how to fix yours without all these changes once you see what is happening in my fork.

Where in the MyBinder Federation it launches needs to be taken into account in the endpoint URL

It’s not perfect.

Because of the various members in the MyBinder federation where the repo can get launch can be different depending on how the MyBinder directs traffic, you may need to adjust the link used. Essentially the first part needs to be different. My two forks show this if you look close. My first fork used Gesis and my fork of yours uses Curvenote. Essentially just the part directly to the right of the https:// can be different. (My understanding is that this part cannot easily be done programmatically because they full URL isn’t easily seen inside the session itself.) You can advise users how to fix that based on the URL they see if it becomes an issue.

2 Likes

Hi thanks, thats super useful; helps me understand what is going on. The jupyter-server-proxy was me just blindly copy pasting things together; but should it be a viable alternative path to getting it to work?

Took me a while to get a binder instance to launch but I can see that its working. I guess I could just programmatically generate a link for all domains in the binder federation, plus one for the local machine.

Its a little hacky, but I suppose beggars cant be choosers. The combination of a simple setup, plus docker image build and caching upon push, plus high uptime, would be really awesome. But I suppose I havnt found it yet. Ive heard some people say good things about render; but actually setting it up seems like quite a cold shower of devops jargon.

That is what is allowing it to work now. That is what enables the proxy to the endpoint in port 8050. It is the viable way that is allowing it to work. However, it could be customized to make it integrate better. And maybe in a way that doesn’t need the app to be set up to run first and then paste the render URL in. Sort of like Voila already does. However, such levels of coding are beyond me. And I suspect if it was easy, someone would have done it before WASM became probably the better path perhaps.


Your original post is about using Binder but you also seem to want to share a Dash app more easily…

Do you know if your code will run 100% in WASM?

Your current implementation involves directories and notebooks, and so it excludes plugging it into the two Dash sharing methods that use WASM that I know of:

  • Py.cafe allows you to add files but seems to not make directories, at least yet: , see Dash example here
  • https://wasmdash.vercel.app/ makes it apparent you can host wasmdash at Vercel with wasm (like here but here makes that clear you cannot use directories there either)

I think JupyterLite would be more in line with your notebook-based use already. And it can be hosted for free on GitHub and then wouldn’t need rebuilds and things. However, I haven’t seen Dash working in it anywhere and my attempts failed. Free free to copy that notebook into your own JupyterLite session (if you use the JupyterLab-based JupyterLite option you can drag-and-drop from your hard drive to the file navigation pane to ‘upload’ into the virtual machine running in your browser, like you would for remote JupyterLab) and see if you can make any better progress. I know Plotly’s plots works because if you go into the ‘pyodide’ directly in JupyterLite you’ll get from the links there, there is a Plotly example with plots. But Dash is a different level than plotting inline. Maybe someone else knows more?

(Maybe it isn’t surprising that Dash doesn’t work yet since Voici, which is Voila combined with JupyterLite and is under the the Jupyter Projects umbrella, is still in early development.)

Anyway, that is long way to say that I think WASM may be the way in the near future to do what you want. It seems you may be able to do it potentially now but it would be a major refactor of your current implementation.

Thanks; my main purpose is ease of demoing functionality / live documentation. I dont really want to make concession in my own personal workflow; not very experienced with WASM but at first glance it sounds like a bit much.

Notebooks are not the essence to me though; a binder-like platform that would spin up a dash app instance without a notebook would also be valuable to me.

github devcontainers/codespaces seems quite legit for what im trying to do; but so far I havnt been able to create a conda env and connect to it. If I did I suppose the dash proxy business would be similar as binder though?

Sorry, I meant to reference Streamlit in regards to this thread a lot earlier. It has a similar situation in that it is running an app where code needs to be run first to make the app page to which you’d like to link.

The example here is now five years old but the technical details are explained in the README. You see that it makes an extension that triggers a call to streamlit and you can use the port with the proxy in the call to the MyBinder launch then so it then serves that app. I suspect something like this could be done with Dash.

(I will point out that streamlit demo on MyBinder seems to still launch but it is a little glitchy. Often when I first launch I get directed to a page that has ‘[Errno 111] Connection refused’ and then if I click in the address bar to load that exact page again, it works. I don’t recall see that glitch before and so even it isn’t presently perfect at this time.)

Interesting; thanks.

Got to say render is also looking quite appealing. Not sure they super-duper support conda though… thats a bit of a turnoff. I mean I bet you can make it work if you roll your own docker container or whatnot, but yeah.

1 Like

Thanks for adding this resource. I was wondering what you meant by ‘Render’ earlier. This makes it very straightforward.