Create a custom JupyterLab application from React.js with extension support #67
Comments
echarles
changed the title
|
Hi @echarles ! First of all thanks for working on this package! I saw you presenting it in one of the Jupyter Con lightning talks and I was very excited about it! Is this just to add support to extensions coming from an npm package directly? Is there a way to add an extension if you copy all the code to your repo ? I might be able to help adding support to this. Any guidelines of where to start? (So I don't start working in a complete different solution of what you were envisioning) Thanks! |
Hi @lneves12
So you were in the audience? Being again on-site at JupyterCon was a great experience.
The goal of this issue is to be able to automatically create a react.js component based on a list of jupyterlab extension (from core or from any third party). The issue with current situation of this repo is that you are loosing the extension system.
I would say those files are ideas to start from (you list the extensions you want to load, then. the question is what the react component would look like?)
This PR jupyterlab/jupyterlab#14536 is also interesting to look at as it introspects the available extensions and displays them. That would be a good start for a React Component (first list them, then load them).
Thank to you. |
|
This is progressing with the creation of a 
|
|
@echarles amazing! I am giving it a try, but for some reason when I import the JupyterLabApp component it just shows white. I can see it renders some divs at least, but nothing is displayed. I followed the example on: https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/JupyterLabApp.tsx I see a bunch of errors like: do you know what I might be doing wrong? If I use: it renders the nobetook, so I guess it's not a problem importing the library (I am using webpack + pnpm). And btw it was much easier to import |
|
@lneves12 Thx for trying 👍
I remember having that error and had to add more information in the index.html jupyter-ui/packages/react/public/index.html Lines 13 to 24 in dfdc4ca I am not completely sure it will fix your issue, and maybe you already have that in your html, but worth asking.
That is great news to read it works well for you with pnpm. |
|
Still the same. I will keep investigating. One suspicious thing is that I see a network failed request to: |
|
ah wait, it might be a problem in the way I am adding the jupyter-config-data. The url should be: |
|
probably something else. I fixed the settings, but I still have the same errors |
|
Not sure if you can checkout the complete repo, build it and run the example from source? (use JupyterLabApp or JupyterLabHeadlessApp in jupyter-ui/packages/react/webpack.config.js Lines 13 to 23 in 76830f6 ... just to validate things... Otherwise, if you can share a public version of your code/repo, I am happy to have a look there and see what is going on. |
|
Running the example of the repo it works well!! Anyway, it would still be nice to have it working in the project I was including it in. I will keep troubleshooting it and I will let you know if I find the cause. The component loads fine, since I can see in the network tab that it even initializes the kernel, but the UI just doesn't load. The root error seems to be: It might be related to the fact that I am using pnpm or something missing in my webpack config. |
|
I hit the jupyter-ui/packages/react/public/index.html Lines 6 to 25 in dfdc4ca |
|
yeah, I also saw that happening in this example: https://github.com/datalayer/jupyter-ui/tree/main/examples/cra then I added the extra configs to the html file and JupyterLabApp worked. For some reason I also tried here: https://github.com/datalayer-examples/jupyter-react-webpack-example and adding the extra config properties I still have the same error, so that's probably what's happening to me as well, I tried both yarn 1 (the one installed on my machine) and yarn 3 Do you remember why jupyter lab requires yarn 3? I can try to have it working for pnpm as well, that would be cool. |
|
I have added the jupyterlab app example to both https://github.com/datalayer/jupyter-ui/tree/main/examples/cra and https://github.com/datalayer-examples/jupyter-react-webpack-example. You will need Yarn 3 for now (hopefully this will change), and this is what the webpack example is giving (hope this will work for you) (PS: jupyterlab bakes yarn command in python build machinery, and even ships its own copy of yarn they call jlpm). 
|
|
Thanks for the example! @echarles I confirm that it work the example. Unfortunately, it would be too hard to stop using pnpm and use yarn3 in this project. I am exploring other options so that I can mix both package managers (single-spa, module federation or iframe), I will let you know if I am successfully with any of those :) I am still trying to make it work with pnpm though, and if I add in my root package.json this: The jupyterlabapp actually loads and I can run cells!! I have other errors though when loading a theme and a custom extensions: Hopefully those will be easier to fix for me :) but I guess it's progress having it loading and being able to run cells |
|
@lneves12 I have tried with pnpm:
If you could create a repo example with you code, I could try, and also help with the remaining issue for the theme. For the theme, this is the code of the example that switches the theme and loads additional extension. jupyter-ui/packages/react/src/examples/JupyterLabHeadlessApp.tsx Lines 123 to 140 in 2d3cf14 |
Useful resources:
The text was updated successfully, but these errors were encountered: