# Creating a shareable Bokeh dashboard with Binder

**URL:** <https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962>\
**Category:** Binder\
**Tags:** how-to, help-wanted\
**Created:** [August 22, 2019, 12:34am UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962 "2019-08-22T00:34:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![arturomoncadatorres](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/arturomoncadatorres/32/1022_2.png) [@arturomoncadatorres](https://discourse.jupyter.org/u/arturomoncadatorres)\
**Post date:** [August 22, 2019, 12:34am UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/1 "2019-08-22T00:34:20Z")

</div>

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](https://github.com/binder-examples/bokeh). I tried following the same instructions, but had no success so far.

This is my [git repository](https://github.com/arturomoncadatorres/favorite-pokemon). 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!

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [August 22, 2019, 5:35am UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/2 "2019-08-22T05:35:37Z")

</div>

> [@arturomoncadatorres](#):
>
> I created a directory called `.binder` ,

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.

---

<div class="post-metadata">

**Author:** ![arturomoncadatorres](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/arturomoncadatorres/32/1022_2.png) [@arturomoncadatorres](https://discourse.jupyter.org/u/arturomoncadatorres)\
**Post date:** [August 22, 2019, 9:38am UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/3 "2019-08-22T09:38:36Z")

</div>

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](https://hub.gke.mybinder.org/user/arturomoncadato-avorite-pokemon-cmvy7muv/scripts/bokeh-app/main.py) 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?

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [August 22, 2019, 10:14am UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/4 "2019-08-22T10:14:56Z")

</div>

Not sure how you ended up with the link you have, for [the bokeh example](https://github.com/binder-examples/bokeh) the link looks like this:

> **[GitHub: binder-examples/bokeh/master](https://mybinder.org/v2/gh/binder-examples/bokeh/master?urlpath=%2Fproxy%2F5006%2Fbokeh-app)**
>
> Click to run this interactive environment. From the Binder Project: Reproducible, sharable, interactive computing environments.

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

---

<div class="post-metadata">

**Author:** ![arturomoncadatorres](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/arturomoncadatorres/32/1022_2.png) [@arturomoncadatorres](https://discourse.jupyter.org/u/arturomoncadatorres)\
**Post date:** [August 22, 2019, 11:56pm UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/5 "2019-08-22T23:56:19Z")

</div>

I created [a new repo](https://github.com/arturomoncadatorres/favorite-pokemon-interactive) 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](https://hub.gke.mybinder.org/user/arturomoncadato-mon-interactive-zp39arip/notebooks/bokeh-app/favorite_pokemon_ui.ipynb).
- 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?

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [August 23, 2019, 9:26pm UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/6 "2019-08-23T21:26:54Z")

</div>

> [@arturomoncadatorres](#):
>
> 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?

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

---

<div class="post-metadata">

**Author:** ![jdkent](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jdkent/32/1029_2.png) [@jdkent](https://discourse.jupyter.org/u/jdkent)\
**Post date:** [August 23, 2019, 11:21pm UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/7 "2019-08-23T23:21:08Z")

</div>

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](https://mybinder.org/v2/gh/jdkent/favorite-pokemon-interactive/fixes?urlpath=/proxy/5006/bokeh-app). Cool application.

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

-James

---

<div class="post-metadata">

**Author:** ![jsignell](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jsignell/32/1200_2.png) [@jsignell](https://discourse.jupyter.org/u/jsignell)\
**Post date:** [August 24, 2019, 1:23am UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/8 "2019-08-24T01:23:41Z")

</div>

I was just working on a similar scenario for [panel](https://panel.pyviz.org) and am adding a [jupyter-panel-proxy](https://github.com/pyviz/jupyter-panel-proxy/pull/1). 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`

---

<div class="post-metadata">

**Author:** ![arturomoncadatorres](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/arturomoncadatorres/32/1022_2.png) [@arturomoncadatorres](https://discourse.jupyter.org/u/arturomoncadatorres)\
**Post date:** [August 24, 2019, 10:54pm UTC](https://discourse.jupyter.org/t/creating-a-shareable-bokeh-dashboard-with-binder/1962/10 "2019-08-24T22:54:33Z")

</div>

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](https://github.com/arturomoncadatorres/favorite-pokemon-interactive/pull/1)).

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 😉