Easily deploy JupyterLite to give users Jupyter Lab & Python, running completely in their browser and without the user installing any software!
Capture of a widget adapting a Matplotlib plot, driven by NumPy, all running via JupyterLite in the client's browser.

Easily deploy JupyterLite to give users Jupyter Lab & Python, running completely in their browser and without the user installing any software!

(Note: I originally published this tutorial on Twitter, but I have a different audience here that might also be interested in this. The numbering here will be slightly different, since I am numbering the steps, instead of the tweets.)

Jupyter Lab is a great way to make computational and interactive experiences for learners. However, it typically requires either:

  1. Users have to install a complete Jupyter Lab and Python distribution and learn how to open and interact with those on their computer, or
  2. A server has to be set up with sufficient computational resources and special software to serve Jupyter environments to all the users.

JupyterLite lets you serve a Jupyter Lab distribution that runs completely in the browser -- users don't have to install anything, and no special software is required on the web server!

Jupyter and GitHub users can easily make a JupyterLite site. Here is a brief tutorial (originally appearing in 17 tweets):

1) If you are not already logged in to GitHub, log in here:

https://github.com/login

GitHub LogIn Page

2) Now navigate to the JupyterLite Demo Template:

https://github.com/jupyterlite/demo

No alt text provided for this image

3) Click the "Use Template" button in the top right:

No alt text provided for this image


4) Enter a name for the new repository and optionally enter a description:

No alt text provided for this image

5) This JupyterLite depository uses an action called "Build and Deploy" to copy the content to Github Pages.

Click on "Actions" at the top of the main repository panel to go to the Actions tab and wait until the indicator next to "Initial commit" turns green.

No alt text provided for this image

6) The GitHub Pages site content has been copied to a new branch: "gh-pages".

Optional: Click on "Code" at the top of the main repository panel. Then click on the branch dropdown menu (labeled "main"), and you should see the gh-pages branch.

No alt text provided for this image

7) Now tell GitHub where the GitHub Pages content is:

  • Click on Settings, then choose Pages from the menu list on the left side.
  • Under "Source", click on the first drop down and choose the "gh-pages" branch.
  • Then click the Save button.

No alt text provided for this image

8) Now that the GitHub Pages branch has been set, another Action will be run. Go to the Actions tab again and wait for the indicator next to "pages build and deployment" to turn green:

No alt text provided for this image

9) At this point, your JupyterLite site is live. Click Settings again and choose Pages from the left menu bar again. Copy the link to your new GitHub Pages site (used in a later step) and then click on that link to load the live JupyterLite site:

No alt text provided for this image

10) To test that JupyterLite is working, double-click on the "python.ipynb" file in the file pane on the left of Jupyter Lab. Then run some Python cells by pressing shift-Enter. (I cut out the delays in loading in the GIF!)

No alt text provided for this image


Your JupyterLite site is now up and running and available for anyone on the Internet to access!!!

A few more things we should take care of:

11) First, the README.md file, which is what is shown when users visit the repository, does not point to your GitHub pages site. Let's fix that. Navigate back to the GitHub repository (you may need to hold down the Back button and choose a related page and then click on your repository's name:

No alt text provided for this image

12) Now click the edit icon (the pencil) next to the http://README.md heading. Highlight the link to the JupyterLite Demo site and paste over it with the link you copied previously. Edit the file to make it your own:

No alt text provided for this image

13) To add your own notebooks, just upload them to the "content" directory. You can also delete all the files that were installed in the "content" directory by the template.

  • After changes to the "content" directory, changes will not appear on GitHub pages until 2 Actions run -- 1 labeled with the commit title & 1 labeled "pages build and deployment".
  • You may need to force reload (shift-reload usually works) the GitHub pages site.

14) If you want to remove some of the kernel options, just delete the respective lines from the "requirements.txt" file.

Please like & share if you found this post useful!




To view or add a comment, sign in

More articles by John Shea

Others also viewed

Explore content categories