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.

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

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

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

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")

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

app.run_server(mode='external')

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

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:

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

~ Wikipedia