Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clearer Documentation on Workflow #44

Open
akloster opened this issue Feb 23, 2019 · 4 comments
Open

Clearer Documentation on Workflow #44

akloster opened this issue Feb 23, 2019 · 4 comments

Comments

@akloster
Copy link

I'd like to develop a javascript-heavy widget extension for the jupyter notebook. I managed to install the example widget and it seems to be working. However, I can't seem to make changes to the typescript source code take effect. I tested it using multiple console.log instructions, and also verified the source code loaded in the browser is not showing the changes.

I would appreciate some help how to setup a workflow for extension development. So far, the readme is missing the "npm install" (I think, maybe it's not necessary?). I also tried npm scripts watch and build.

Thank you for your time!

@vidartf
Copy link
Member

vidartf commented Feb 25, 2019

Good point. I think we could add a "Contributing" part, either as a separate .md file, or as a section in the README. If you are developing for classic notebook, there are two ways to update the source of a local developer install of the source:

  1. Install the extension as a symlink to your development build dir: jupyter nbextension install --sys-prefix --overwrite --symlink --py <python package name>.

  2. CPython on Windows still has poor support for symlinks, so if you are working on Windows, you can either symlink the directory manually, or run jupyter nbextension install --sys-prefix --overwrite --py <python package name> every time.

How to symlink manually on Windows:

Run the symlink command in 1. above. The command should give you the paths it is trying to symlink before failing (Symlinking: <A> -> <B>). Run the symlink command manually (e.g. mklink /D <A> <B>, google mklink for details for your Windows version / env).

@jtpio
Copy link
Member

jtpio commented Mar 12, 2021

The development instructions were recently slightly updated: https://github.com/jupyter-widgets/widget-ts-cookiecutter/tree/master/%7B%7Bcookiecutter.github_project_name%7D%7D#development-installation

There is also now a new custom widget tutorial in the latest docs for ipywidgets: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html

@akloster do you think these two resources still need some iterations? Or are they enough to get going for now? Thanks!

@yGuy
Copy link

yGuy commented Apr 13, 2021

I basically ran into the same issues. I followed the guide for the development instructions, but it seems the watcher is only updating the files in the nbextension whereas the documentation seems to favor using jupyter lab which uses labextension which does not get updated when the code changes. So basically the watch and reload cycle is not working.

Can someone confirm? Using "jupyter lab" and "webpack watch" does not work for me. Seems I always have to reinstall.

@ianhi
Copy link
Contributor

ianhi commented Apr 13, 2021

Hi @yGuy you're right that the watch command for jlab is not working. I think it got accidentally deleted from package.json when this repo was updated to jlab3. If you add "watch:labextension": "jupyter labextension watch ." to the scripts section of package.json then it should work as the documentation intends.

PR adding that here: #99

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants