Develop

Follow the below steps to use and develop Jupyter UI.

Environment

You need Miniconda up-and-running on your machine.

caution

You need to develop on macOS or Linux. Windows is not supported as development platform for the time-being.

caution

Only yarn is supported (npm or pnpm will not work). This is due to some dependency on the JupyterLab build system which only supports yarn.

Clone the jupyter-ui repository.

git clone https://github.com/datalayer/jupyter-ui.git && \
  cd jupyter-ui

If you already have created a conda environment named datalayer, please remove it.

conda deactivate && \
  make env-rm

Create a new conda environment and activate it.

make env && \
  conda activate datalayer

Install and Build

Install the dependencies. This will take some time, be patient. 👍

make install

Build the source code. This will also take some time, be also patient. 🙂

make build

Examples

Now you can start an example and hack the source code. The changes will build automatically and will be available in your browser. You will have to accept to SSL certificate in your browser the first time.

# open http://localhost:3208
yarn start

We have more examples. Pick one of the following commands and enjoy.

# Create React App example
# open http://localhost:3000
yarn jupyter:ui:cra
#
# Lexical example
# open http://localhost:3208
yarn jupyter:ui:lexical
#
# Docusaurus example
# open http://localhost:3000/docs/intro
yarn jupyter:ui:docusaurus
#
# Next.js example
# open http://localhost:3000
yarn jupyter:ui:nextjs

We also have some uncomplete or deprecated examples...

# Slate example (deprecated)
# open http://localhost:3266
yarn jupyter:ui:slate
#
# Prosemirror example (deprecated)
# open http://localhost:4567
yarn jupyter:ui:prosemirror

JupyterLab Extension

Jupyter UI can also be shipped as a JupyterLab extension.

cd packages/react
pip install -e .[test]
# Double check...
pip list | grep react
# jupyter_react ...

Link the JupyterLab extension for development.

jupyter labextension develop . --overwrite
# Installing: .../jupyter_react/labextension -> @datalayer/jupyter-manager
# Removing: .../labextensions/@datalayer/jupyter-manager
# Symlinking: .../labextensions/@datalayer/jupyter-manager -> .../jupyter_react/labextension

jupyter labextension list
jupyter server extension list

yarn jupyterlab