Nextjournal, JupyterDash, and ngrok

The source of grok

Using Nextjournal to serve processes with ngrok is easy. This notebook builds a JupyterDash application and makes it available via a public URL.

Setup

  • Install Jupyter Dash, a library that makes it easier to develop Plotly Dash apps interactively from within notebooks.

  • Install pyngrok, a Python wrapper for ngrok.

pip install jupyter-dash pyngrok
17.8s
ngrok-env (Bash in Python)

Grab 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.

ngrok authtoken $ngrok_secret
3.2s
ngrok-env (Bash in Python)

Import dependencies into Python.

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output# Load Data
1.4s
ngrok-env (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.

# Load data
df = px.data.tips()
# Build app
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Nextjournal, JupyterDash, and ngrok Demo"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])
# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")])
# Run app and display result inline in the notebook
def update_figure(colorscale):
    return px.scatter(
        df, x="total_bill", y="tip", color="size",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Tips")
0.1s
ngrok-env (Python)

Running the Dash app will start a local server on port 8050.

app.run_server(mode='external')
0.4s
ngrok-env (Python)

This address cannot be reached, obviously, so the notebook uses ngrok to help out.

ngrok

Open a HTTP tunnel and print the URL to open in a browser. It defaults to port 80 but this notebook will use 8050.

from pyngrok import ngrok
public_url = ngrok.connect(port = '8050')
public_url
0.9s
ngrok-env (Python)
<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 ngrok.connect()

  • ngrok.connect() has 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

~ Wikipedia

Runtimes (1)