I want to run a tutorial using Binder and thereby showcasing the development of a simple Streamlit app.
When I naively run streamlit run myapp.py, I get back these urls
Though, these urls are actually not loading. Is there a way to access the running app via my browser, so that I can develop the app under a tutorial setting?
Note, that I do not want to deploy my app using Binder, this is not my use case. I want to develop an app in a live coding setting using Binder.
Could you please share information on what repo you are using to launch your MyBinder session?
Have you see this repo? It has an example of streamlit running via MyBinder and the README there talks about how to get it working via MyBinder sessions.
As you’ve found, you cannot naively type streamlit run myapp.py and use the URLs it shows. Those aren’t accessible to your local browser. And so proxies are used to fix that.
Yes. Let’s imagine you didn’t have your tutorial repo for now and were looking to use the examples I referenced above to develop your streamlit app. You should be able to launch a session from GitHub - chekos/testing-streamlit-mybinder: A repo tryna see if you could run a streamlit app in mybinder (referenced above) (or possibly GitHub - danlester/binderhub-streamlit-native: A test Binder repo for jhsingle-native-proxy if you want a more advanced example – Dockerfiles are best avoided as the suggested configuration files are what will be supported going forward), upload your files into the running session to develop or edit the ones already present, and use the details provided or the URLs that are in the launch buttons (or ending URLs) to keep reviewing your updated edits.
Getting back to your situation…
It sounds like you may want to adapt your environment where the tutorial already is to install what is necessary to run the examples in the repos I referenced. So instead of what I described above, once the environments in repo is updated, you can launch from there and use a single session to do this.
Related: In case you find you need it. The token that gets added at the end of launches from GitHub - chekos/testing-streamlit-mybinder: A repo tryna see if you could run a streamlit app in mybinder, you can get by going to the Jupyter dashboard of a running MyBinder session, hovering over the Jupyter icon in the upper left, and copying the link. Your normally don’t need that secret token if you are working in the same browser windows. But if you start testing in fancy manners with different browsers or even different machines, you’ll need them. In case you don’t know yet how to edit the URL of a typical MyBinder session, go to here launch a session using the launch binder badge. It will start with the Jupyter dashboard. Note the URL ending in tree by perhaps copying it to a text editor. Now open a new Python 3 notebook and note that URL. Then click the Jupyter icon in the upper left above the notebook. It should take you back to the Jupyter dashboard and you’ll see that first URL you copied. If you look at the patterns of the URLs, you should start to see how you can edit the URL directly to go from a notebook (or streamlit app) to the dashboard or the other direction. Following GitHub - binder-examples/jupyterlab: Demonstrating how to get JupyterLab working with Binder you can even go from the classic Jupyter dashboard or notebook over to JupyterLab in most sessions launched from MyBinder.
@fomightez Thanks for the prompt and comprehensive answer.
Yes, I am aware of the repos you cited above and they work as expected. Using those repos it is fairly straight forward to run a Streamlit app using Binder.
The challenge though I face, is that during a workshop I want to use the awesome Binder environment. We will run a few notebooks and that is all fine, as I can fairly well mimic the workflow that one would experience if running all these notebooks locally. But this is not the case for Streamlit app development. On your local machine, you start your webserver using the streamlit run myapp.py command and while working on the script itself you see all the magic happening in real time, as the Streamlit app is exposed through the Network URL and External URL. As pointed out above, I would like to recreate this “local” experience using Binder, but my naive approach, starting a Streamlit app in the Binder environment and accessing the websever via the provided URLs does not work for me. So my task is to do interactive Streamlit app development with Binder. I hope I could clarify my needs. Thank you.
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.