Nextjournal, JupyterDash, and ngrok
Using Nextjournal to serve processes with ngrok is easy. This notebook builds a JupyterDash application and makes it available via a public URL.
Jupyter Dash, a library that makes it easier to develop Plotly Dash apps interactively from within notebooks.
pyngrok, a Python wrapper for ngrok. 17.8s ngrok-env (Bash in Python)
your authtoken from ngrok. The token will authenticate this notebook with the ngrok service.
Store the token in
your Nextjournal secret vault. Add it to the environment and bind it to
ngrok using Bash.
3.2s ngrok-env (Bash in Python)
Import dependencies into Python.
Build and Serve the Application
This example code comes from the
original JupyterDash announcement. It will build a simple demo that plots x, y, and color coordinates with a dropdown menu to refine the color space.
Running the Dash app will start a local server on port 8050.
This address cannot be reached, obviously, so the notebook uses ngrok to help out.
Open a HTTP tunnel and print the URL to open in a browser. It defaults to port 80 but this notebook will use 8050.
<NgrokTunnel: "http://e18a91ff6644.ngrok.io" -> "http://localhost:80">
The link above is temporary. It depends on a) a running Nextjournal notebook and b) a live ngrok tunnel. To generate a new link, simply run the notebook again with your ngrok credentials. When opening a live link in a browser, the result will look like this:
The output of JupyterDash
A few final notes about the ngrok process:
With a free account, only one HTTP tunnel is available via
many settings and options: (addr=None, proto=None, name=None, pyngrok_config=None, **options)
To stop the ngrok tunnel, call the
ngrok.kill() command in a Python cell.
Perhaps the coolest part - updating and running the cells in the
Build and Serve the Application section will automatically update the window displaying the JupyterDash output. Try it yourself! Appendix About this Notebook
This notebook is based on
1LittleCoder's How to quickly deploy your ML Webapp using Google Colab and ngrok.
This work is licensed under a
Creative Commons Attribution 4.0 International License. About the Image
blockquote not implemented