Integrate jupyterlab with my webapp

Hi,
I want to integrate jupyterlab with my webapp. I want to literally get rid of the default toolbar in jupyterlab and replace it with the widgets hosted on my app. For eg, clicking on run in my webapp does the equivalent of pressing Run in the default toolbar. I want to show the input/output of notebook in my webapp. Looking for documentation as to how to go about doing this? Most of the blogs i saw was integrating default jupyter notebook as an iframe.

Would appreciate any help.
Thanks

You seem to be coming at this from a notebook-centric view? I’m not following why? You don’t say what parts of JupyterLab you need to keep? Any? Because what you describe just seems to be traditional Python and javascript Django / Flask/etc. apps have been around a long time. You only need Python, javascript, css, HTML. Example Django-based app here where the text processing is done via Python code behind-the-scenes. Pythonanywhere.com has nice tutorials of making Python-backed apps.

For embedding widgets, see here and discussions here.

There’s also examples of linking out to code from pages? Have you seen JupyterBook or other related tech noted here.

If you want to make a webapp that is a notebook page, there are several options. The most integrated with Jupyter is Voila.There is a gallery here. Search ‘webapp’ in this discussion group for some more leads, such as here.

2 Likes

Thank @fomightez . Let me take a look at the solutions you mentioned. Regarding what parts of jupyterlab i want to keep is ability to run notebook/cell on different kernels. What i was looking for how does the frontend talk to the jupyter server as those APIs are not documented anywhere AFAIK. Also when i tried to capture the APIs using the development tools while browsing over notebook buttons, it didnt provide any details, making me thing if the frontend talks to the server over websocket.

It sort of sounds like that you don’t need JupyterLab. It sounds like you want Jupyter kernels. I think Juniper may be what you want to tap into.

But maybe actually you just need nbconvert on your server and you can programmatically extract results from notebooks to your apps’s frontend. See here for how you can execute notebooks from the command line, selecting which kernels get used to run them.
Related to all this, have you looked at Netflix’s papermill and scapbook?

As for how the communication is done, I cannot help you there. I’m not up on what is under the hood or on the back-ends. I would think you’d want to explore more posts in this discourse to get a better sense. Also there are some community meetings that get posted about here. One of them may allow you to connect with someone that can point you in a direction to the documentation you seek. One thing to point out is that JupyterLab 3 is very new so you don’t want to look at older stuff.

What i was looking for how does the frontend talk to the jupyter server as those APIs are not documented anywhere AFAIK

They are. Here you go:

https://jupyter-client.readthedocs.io/en/stable/messaging.html
https://jupyter-notebook.readthedocs.io/en/stable/comms.html

1 Like

As for reusing JupyterLab components, everything is possible. See the examples directory in JupyterLab repository and checkout jupyterlab-classic and elyra. But if you need something like that it most likely is just an extension - see the extension development tutorial in the docs.

1 Like

Thanks a lot @krassowski, this is very helpful

Hi @krassowski , i went through the links you had mentioned. But they seem very low level, what i wanted was this:
I plan to embed jupyterlab in an iframe within my webapp. I want to be able run notebook commands from my webapp, for eg, run a cell, run all cells, etc and that should trigger the run cell on the jupyterlab (as if someone clicked the Run cell notebook toolbar button). Whats the best way to go about building something like this? I looked at server extensions, basically exposing REST apis for the same, but didnt find a way to run commands from server extension? Could you please guide me in the right path for this

This sounds vaguely similar to what this extension does, but the other way around: GitHub - timkpaine/jupyterlab_commands: Add arbitrary python commands to the jupyterlab command palette

Otherwise yes the links posted above by @fomightez and @krassowski are good resources, which could be used to develop a tight integration between your frontend and other Jupyter parts like the kernels.

1 Like

You can execute your Jupiter notebook as a web app for free. Coin Toss code can be used as an example of how to host Jupiter notebook as a GUI app on the web. Part of the inspiration came from Bloomberg bqplot project.

I believe you’re aiming to create a platform akin to Google Colab, DataSpell, or DataLore by seamlessly incorporating Jupyter notebooks into your web application.

I gave it my best shot but couldn’t manage to achieve it. I even attempted to modify the source code, but the issue persists.