Streamlit app and Binder

I’ve used http-server proxy to allow serving static files produced like for Hugo web development. It was a trick I learned from the JupyterBook tutoria being run via Binder. However, I don’t think that will work here beause streamlit is serving dynamic results.

You could make a good video of how it works for local but use Binder to do interactive development the day of your tutorial. Because of things, I don’t see how you can recreate 100% the local experience. However, editing the code and refreshing the streamlit app works quite well. For example, I launched from chekos repo and moved the hidden binder directory to be unhidden. Then using the following I copied the hello.py file (located thanks to here):

cp ${NB_PYTHON_PREFIX}/lib/python*/site-packages/streamlit/hello/hello.py binder/hello.py

Edited that in the Jupyter editor that I got to by navigating to a page that looked like https://hub-binder.mybinder.ovh/user/chekos-testing--eamlit-mybinder-3e40an03/tree/binder and saved it.

Then copied the updated version back and refreshed the streamlit app. The updated code changed the app like you want to show.

Just to clarify, this was the command in a Jupyter notebook cell to copy the updated version before refreshing.

!cp binder/hello.py /srv/conda/envs/notebook/lib/python3.7/site-packages/streamlit/hello/hello.py

I haven’t tested if you can make a symbolic link so you have only the one copy of hello.py and don’t need to run the command to copy it from the example binder directory to the streamlit app directory. If that was possible it would be closer to the local experience. You can investigate. That way (with the additional steps in the next few paragraphs) behind-the-scenes in sessions launched from your repo you can already have things set up so your tutorial users can do interactive streamlit development.

To bring this to your tutorial you need to merge the contents of testing-streamlit-mybinder/.binder at master · chekos/testing-streamlit-mybinder · GitHub with your tutorial repo.

In a markdown cell in your tutorial noteook, you can make a link easily to the proxied webapp like so:

Click [here to view the running app](../proxy/8501/)

Assuming you put that markdown in a Jupyter markdown cell of a notebook in the root of the launched session. Adjust the relative path if not.

1 Like