Skip to content

JupyterLite

In this example we will set up JupyterLite - a JupyterLab distribution that runs entirely in the browser built from the ground-up using JupyterLab components and extensions.

jupyterlite

Info

JupyterLite is an entirely in-browser application and needs only to be served via static WEB server.

Preparation

Install jupyterlite which is used to generate static Jupyterlite website: 

$ pipx install jupyterlite --include-deps

installed package jupyterlite 0.1.0, installed using Python 3.8.10
  These apps are now globally available
    - doit
    - jupyter
    - jupyter-lite
    - jupyter-migrate
    - jupyter-piplite
    - jupyter-troubleshoot
    - pkginfo
done! ✨ 🌟 ✨

Create

Now we can generate static website, and output the result into the folder /home/abc/apps/jupyterlite:

<font color="#5EA702">jupyter</font> lite build --output-dir /home/abc/apps/jupyterlite

Serve jupyterlite with the default workspace static server 

<font color="#5EA702">cd</font> /home/abc/apps/jupyterlite; <font color="#5EA702">python</font> -m http.server 8026

Permanent service

The serving of Jupyterlite will terminate as soon as you close the terminal session window. To make it permanent:

  • Open workspace Admin and select "Workspace settings".
  • In the workspace settings, go to "Apps & Services".
  • Choose the "START NEW" option from the picklist.
  • As command provide the following;
cd /home/abc/apps/jupyterlite; python -m http.server 8035

Warning

This example relies on port 8035 being available within your workspace. To verify the availability of this port, please consult the 'About' tab within your workspace's UI.

  • Save the service.
  • Restart the workspace.

Update UI

Let's add a card for JupyterLite on the Home page for quick access. UI tab needs an image, choose the one and upload using Filebrowser.

  • Open workspace UI, navigate to "Admin" tab and open "Workspace settings". Then go to "Interface" tab and select "CREATE NEW" from the picklist.
  • Give it any title, and any description
  • Choose image you have uploaded
  • Enter port 8035 - the port of the static web server (Serve)
  • Enter path jupyterlite/lab

Now we have a shortcut tab on the "Home" page to quickly onep JupyterLab

jupyterlite-home

Result

We have generated webpage with JupyterLite and serve it with Serve (static web server). We have created JupyterLite tab on the workspace UI.