lucydot/dotspace_heroku

Code for GrainGenerator web app deployed on Heroku

The web app can be found here and is accessible through the shortened URL bit.ly/GrainGenerator.

I've included the steps for creating a simple web app like GrainGenerator below. This uses a combination of:

• Jupyter Notebooks
• ipywidgets (simple widget library)
• Voila (to convert the notebook into a standalone web app)
• Heroku (to deploy the web app)

This wiki was created after attending a GUI workshop at RSE conference 2019 led by Diego Alonso Alvarez, where the combination of Jupyter+ipywidgets+Voila was suggested.

GrainGenerator uses Python, but this workflow should be compatible with any Jupyter kernel (C++, Julia etc).

1. Notebook with widgets

Use Jupyter Notebooks and ipywidgets to generate/read in and interact with data (create sliders, input text boxes etc) locally. I recommend using the ipywidgets documentation. You can see the GrainGenerator code example here.

2. Convert notebook to local web app

Use voila to convert the notebook into a simple standalone web application. For testing locally you can follow the installation and usage instructions here.

3. Deploy using Heroku

Deploy using Heroku so that others can access your web app (I prefer Heroku over Binder as it loads more quickly, and does not have an intermediate loading page). Sign up for a free Heroku account. There are deployment steps for voila here and there is a tutorial here but CAUTION the Procfile as outlined did not work for me; my Procfile contains

web: jupyter extension enable voila.server_extension --sys-prefix && jupyter server --ServerApp.default_url=/voila --ip=0.0.0.0 --ServerApp.open_browser=False --port=$PORT --ServerApp.token='' --ServerApp.default_url=/voila/render/path/to/notebook.ipynb

as outlined early in this discussion. Your requirements.txt should contain voila and jupyter extension.

Note:

• heroku create does not need to be used after each new commit
• git push heroku master to deploy to heroku after a new commit
• git push origin master to push to github repository (as I have set this repository as an additional upstream)