Creating a shareable Bokeh dashboard with Binder

Binder
,
1

Hi everyone. Binder newbie here.

Recently, I created an interactive data visualization dashboard using Bokeh which I wish to share with the general public. It uses Bokeh widgets. However, in order to get them up and running in a self-contained app, you need to start up a Bokeh server, which can be cumbersome since it requires setting up a hosting service (which I think is a bit of an overkill for the small dashboard that I want to share).

I started doing some Googling and came across this post by Jacob Deppen, which to my surprise described my exact same situation. He solved it by following an example very closely. I tried following the same instructions, but had no success so far.

This is my git repository. In the directory scripts, as stated in the instructions, I created a bokeh-app directory, with the Python file main.py in it, which is the one that contains the whole Bokeh dashboard. Since we are no longer in the root of the repo, I created a directory called .binder, which contains the configuration files bokehserverextension.py, environment.yml, and postBuild. After that, I go to mybinder and in the GitHub repository name or URL I enter the URL of my repo. I leave the Git branch, tag, or commit empty (although I tried filling in the commit ID and the results are the same). Lastly, as Path to a notebook file (optional) I provide the path to the main.py file (scripts/bokeh-app/main.py). I know it isn’t a notebook per se, but in Jacob’s post he describes successfully using a .py file. If I select it as a file and click Launch, the built is successful but I get a 403 : Forbidden The error was: Blocking Cross Origin request from mybinder. If I select the .py file as a URL and click Launch, I get a 404 : Not Found You are requesting a page that does not exist!

What am I doing wrong or what am I missing? Any help or pointers would certainly be very much appreciated. Thank you in advance!

2

repo2docker (the tool that builds repositories into images) only looks for configuration files in the top level directory, or in the binder/ or .binder/ sub-directories of the top level directory. This means your .binder folder in favorite-pokemon/scripts/bokeh-app/ won’t be connsidered, it needs to be moved to the top level directory.

3

Thanks for your reply, Tim.

I fixed that (and corrected some dependencies). When building the Docker image, this time I did see the environment being setup and packages being installed. However, the resulting link gives me the same issue: a 403 : Forbidden The error was: Blocking Cross Origin request from mybinder. if launched as a file and a 404 : Not Found You are requesting a page that does not exist! if launched as a URL. What else am I doing wrong?

4

Not sure how you ended up with the link you have, for the bokeh example the link looks like this:

which works for me. So you need to figure out how to make your link match this one.

1 Like
5

I created a new repo to exclusively host the Bokeh app only (which is kinda neat, I like it way better this way) and structured it exactly the same way as the example that you shared.

Unfortunately, I still can’t get the main.py to work. I keep getting the same errors. Interestingly:

  • If I generate a link to the corresponding Jupyter notebook (located in the same location) it actually works.
  • If I generate a link to the repository itself (without pointing to a file) I can actually see the project file tree
  • I thought that I might had a bug in the main.py. However, if I run bokeh serve --show main.py locally, a new browser opens with Bokeh app working just fine.

In the example, the generated link is https://mybinder.org/v2/gh/binder-examples/bokeh/master?urlpath=/proxy/5006/bokeh-app. I noticed that it has a proxy/5006 part which my links don’t have. Could this have something to do?

6

Yes the urlpath parameter is what redirects you to the bokeh app. Without it you will get the standard Jupyter notebook UI

7

to chime in, I tried running the repo, if I installed requests and changed the variables PATH_DATA and PATH_OUTPUT to be relative to where main.py was instead of the current directory and your app appears to work. Cool application.

I’ll open a pull request in case you want it fixed like how I did it.

-James

2 Likes
8

I was just working on a similar scenario for panel and am adding a jupyter-panel-proxy. Bokeh should be almost exactly the same. This would allow you to just depend on jupyter-bokeh-proxy (which would first have to exist) and then access your bokeh server at https://mybinder.org/v2/gh/binder-examples/bokeh/master?urlpath=bokeh

1 Like
10

Wow, that was a nasty one. Thank you so much! I would’ve never imagined that such a thing was responsible for the issue (BTW, I did accept your PR).

Furthermore, thanks to everyone else who also spend time with this issue. I hope to write a post/tutorial soon-ish about this for future users :wink:

1 Like