Help using JupyterLite

JupyterLab
,
1

Hello.
I am using JupyterLite for a project that creates a virtual environment for teaching Linear Algebra. JupyterLite has been the tool that I have been using to deploy a interactive environment with GitHub pages. I would like to know if there is a way that I could costumize the launcher, that is, leave it so that when the user opens the URL, he sees the laucher with instructions as to how to use the environmente, where he should start, etc.
Thank you for all help.

1 Like
2

Hi @MartinaMJ,

Unfortunately the launcher is not easy to customize at the moment:

An alternative could be to create an extension for JupyterLab / JupyterLite to display a custom widget, or a custom launcher that would replace the default launcher.

Another option would be to use an extension like jupyterlab-tour if the intent is to guide the users through the UI and functionalities: GitHub - jupyterlab-contrib/jupyterlab-tour: A JupyterLab UI tour built on jupyterlab-tutorial and react-joyride.. Tours can be defined via the settings system and should work in JupyterLite.

3 Likes
3

Thank you very much for your answer, jtp. I see that it is very difficult to costumize the launcher, but the alternative you proposed to install a tour seems like a very good solution. I took a quick look at the repository you sent me and I was a bit confused as to how I would this extension in JupyterLite. You said that I could use the repository settings, but from what I see the tours must be installed with pip? JupyterLite is a web extension for JupyterLab that can be lauched with GitHub pages.

4

You can install the extension in the environment where jupyterlite is installed and from where the jupyter lite build command is executed.

There is a bit of documentation about this here: Adding extensions — JupyterLite 0.2.0 documentation

Happy to improve the docs if you think they could be clearer or more visible!

2 Likes
5

Hello @jtp! Thank you for your help. I see now that JupyterLite has jupyterlab-tour in its requirements. From what I read in the repository you sent me, in order to do a costumizable tour, it is necessary to write a .json5 file. I am just unsure as to where I must commit this file in the repository, as I still am a bit confused as to how GitHub pages can build the page. Thank you very much!

6

Not exactly. It’s used on the demo site for demo purposes but jupyterlite does not depend on it.

The settings-based tours could then be added to the overrides.json file before running a jupyter lite build

There are some examples in the documentation: Customizing Settings — JupyterLite 0.2.0 documentation
Maybe there could be a new example in the docs for jupyterlab-tour if that can help?

1 Like
7

Yes, yes. That is what I meant.
I am still somewhat confused as to how I can use the jupyter lite build command. Until now, I was just using the demo repository. Is there a specific part of the documentation that explains its usage? Is it possible to use it to build a repository through this command and then use GitHub pages? For the project I am working on, it is crucial that JupyterLite is run on a browser and can be accessed by anyone through a URL.
I only started using Git/GitHub actively this year, so there are a lot of things I don’t know.
Thank you for your help. Many blessings to you.

8

The demo repo uses a GitHub Actions workflow to publish the JupyterLite website to GitHub Pages.

And the workflow uses the jupyter lite build command to build the site: https://github.com/jupyterlite/demo/blob/2a7685de44c9cc50de08dbc8f2fa8ecdda7f6b82/.github/workflows/deploy.yml#L27

So in a way it’s similar to running the command locally and then publish the assets to GitHub Pages manually. But the demo repository makes it easier and more convenient as all of this is automated with the workflow.

Maybe the quick start guide could be improved to have a small note mentioning this? Deploy your first JupyterLite website on GitHub Pages — JupyterLite 0.1.1 documentation

9

Yes, maybe. I think it would also be interesting to exemplify how to add a costumizable tour with the demo. I think it would be interesting to explain how the demo was constructed, maybe that can also clarify how to costumize it.

1 Like