This blog will extend off my previous blog about hosting JupyterLab on a server and serving it via Nginx. Because we used Nginx, we get some additional flexibility we wouldn't have otherwise had if we connected to our notebook server with SSH! For the same host, we can now have a separate route which serves static content which could be extremely useful for sending a quick web url to a client, or a multitude of other reasons.

In order to serve the jupyter notebook as a static, interactive web page; I use nbinteract and ipywidgets. I am able to generate a single html file output using these tools which I serve with nginx. Now we can generate the notebook on the server, generate a single static file, and serve it from nginx to make it available on the web. Super super cool!

First things first, we need a html file to serve.

Generate the HTML file to serve of notebook

Install ipywidgets

pip install ipywidgets
jupyter nbextension enable --py widgetsnbextension --sys-prefix
# Required JupyterLab extension for ipywidgets
jupyter labextension install @jupyter-widgets/jupyterlab-manager

Install nbinteract

# nbinteract installation
pip install wheel  # fix error: invalid command 'bdist_wheel'
pip install nbinteract
jupyter nbextension enable --py --sys-prefix widgetsnbextension
jupyter nbextension enable --py --sys-prefix bqplot

# had to uninstall and reinstall bqplot as I had issues at first
jupyter nbextension uninstall --sys-prefix --py bqplot
jupyter nbextension enable --py --sys-prefix bqplot # verify it’s gone
jupyter labextension install bqplot

Generate the standalone html file of our notebook

jupyter nbconvert --to interact test.ipynb

which should output a test.html in the same directory.

Update Nginx block to serve static content

We need to

• specify the root the static content will sit at
• create a new location block to serve the static content in our server block

Here is an abridged version of my server block. See the previous blog for the other parts.

server {

    root /var/www/html;

    server_name test.com www.test.com;

    location /static {
        default_type "text/html";
        try_files $uri $uri/ =404;
    }

    location / { }  # see previous blog
    location ~ /api/kernels/ {  }  # see previous blog
    location ~ /terminals/ {  }  # see previous blog
}

and reload the nginx configuration.

nginx -s reload  # you may need sudo here

When a user navigates thus to www.test.com/static/test.html, the $uri in the nginx block will be /static/test.html. This means that if our root is /var/www/html, then we want our HTML file we created above to sit at /var/www/html/static/test.html. Move the html file we created to that location.

After moving it, nginx should be able to serve it, and mission accomplished! 😎