Skip to content

Instantly share code, notes, and snippets.

@flekschas
Last active July 5, 2018 14:06
Show Gist options
  • Save flekschas/a244c75700c976c7458330d3ec9d250a to your computer and use it in GitHub Desktop.
Save flekschas/a244c75700c976c7458330d3ec9d250a to your computer and use it in GitHub Desktop.
Install iPython Widget in Jupyter Notebook and JupyterLab

Get a Jupyter Notebook and JupyterLab compatible widget setup

Install packages

conda install -c conda-forge jupyterlab
conda install -c conda-forge ipywidgets
conda install -c conda-forge cookiecutter

jupyter labextension install @jupyter-widgets/jupyterlab-manager

Setup cookie cutter template

cookiecutter https://github.com/jupyter/widget-cookiecutter.git

  author_name []: Fritz Lekschas
  author_email []:
  github_project_name [jupyter-widget-example]: jlabwidget
  github_organization_name []: flekschas
  python_package_name [jlabwidget]:
  npm_package_name [jlabwidget]:
  npm_package_version [0.1.0]:
  project_short_description [A Custom Jupyter Widget Library]:

Build and install widget

cd ./jlabwidget
python setup.py build
pip install -e .

jupyter nbextension install --py --symlink --sys-prefix jlabwidget
jupyter nbextension enable --py --sys-prefix jlabwidget

jupyter labextension install js

Test the weidget

jupyter notebook

and

jupyter lab

run:

import jlabwidget
jlabwidget.example.HelloWorld()

you should see: Hello World!

Trouble Shooting

  • Yarn gets stuck trying to resolve a package [JupyterLab v0.32 (should be fixed in v0.33)]:

    Install yarn globally: npm install -g yarn.js Symlink the global yarn cli into JupyterLab's staging dir:

    mv /Users/<ADJUST>/anaconda3/lib/python3.6/site-packages/jupyterlab/staging/yarn.js /Users/<ADJUST>/anaconda3/lib/python3.6/site-packages/jupyterlab/staging/yarn.1.5.1.js
    ln -s /usr/local/lib/node_modules/yarn/lib/cli.js /Users/<ADJUST>/anaconda3/lib/python3.6/site-packages/jupyterlab/staging/yarn.js
    
  • Extension file missing:

    Make sure your package.json contains a property called jupyterlab that looks like so:

    "jupyterlab": {
      "extension": "extension-jupyterlab.js"
    }
    

    And also make sure that this file is part of package.json's files property.

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