Docker container for extension build

[rickmcgeer]

Problem

Compiling a JupyterLab extension requires a precise mix of modules and software, and it's easy to get wrong. Examples include mismatches between node modules and typescript versions, mismatches in packaging due to yarn, etc. Following the apod_extension tutorial directions precisely, including building the conda environment based on jupyter3, seems to offer a very reliable build environment -- but it's easy to get those directions wrong. So we'd like a prebuilt, curated environment to develop and compile a JupyterLab extension. This should avoid spurious compiler errors for the extension author and reduce the assistance workload on the core developer team, and might help spur the creation of third-party extensions.

Proposed Solution

Build a docker container that has an environment tuned for building a Jupyter Lab extension, with the correct version of jupyterlab, jupytrer, node, jlpm, and tsc pre-installed, and suggest to extension authors that they use this to build their extension. This container should be built from the recipe in the apod_extension tutorial, stored on Dockerhub, and referred to in the documentation.

I'll be happy to build the container, but I'd appreciate any feature requests first, and of course a reviewer once it's submitted.

Additional context

[welcome[bot]]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

[layne-sadler]

Here are some old, entry-level Docker scripts I have from when I was helping a friend make an env for their extension. I forget what things like stdin_open: true and tty: true helped solve.

Ports: the jupyterlab port increments (e.g. 8888 , 8889) each time it is started so perhaps a range should be opened for when running the container interactively e.g. docker run -it ... bin/bash

Working Dir: navigating to parent directories of the jupyterlab working directory is not possible (or at least it did not used to be). so if you are not running the container interactively then the working dir should essentially be ~?

---

Dockerfile

FROM python:3.7

# node and npm = https://github.com/nodesource/distributions#debinstall
RUN curl -sL https://deb.nodesource.com/setup_13.x | bash -
RUN apt-get install -y nodejs
RUN apt-get install -y build-essential

# install jupyter, the extension, and rebuild
RUN pip install jupyterlab
COPY jupyterlab_optumi-0.2.13.tgz /
RUN jupyter labextension install jupyterlab_optumi-0.2.13.tgz
RUN jupyter lab build
RUN rm jupyterlab_optumi-0.2.13.tgz

# pip packages
COPY requirements.txt /
RUN pip install -r requirements.txt
RUN rm requirements.txt

WORKDIR /home

ENV JUPYTER_ENABLE_LAB=yes

docker-compose.yml

version: "3"
services:

  optumi_jupyter:
    image: "optumi:cpu_v0_2_13"
    ports:
      - "8888:8888"
      - "80:80"
      - "443:443"
    volumes:
      - /Users/layne/desktop/optumi_docker:/home
    stdin_open: true
    tty: true
    command: jupyter lab --ip=0.0.0.0 --port=8888 --allow-root

README

# Overview
- Dockerfile is used to locally build the container image.
- Whereas the docker-compose.yml file is used to run the container with specified settings.

# Files
Put all of these files in the same directory e.g. '/desktop/optumi_docker':
    1. The optumi nbextension e.g. 'jupyterlab_optumi-0.2.13.tgz'
    2. Your python packages e.g. 'requirements.txt'
    3. Dockerfile
    4. docker-compose.yml

# Build the Image
To locally build the image, navigate to that directory and run:
`docker build --tag image_name:tag .` 
^ The `.` tells docker to look in local folder for files.
^ For image_name:tag I have been using 'optumi:cpu_v0_2_13'

# Run the Service
To run the service using the settings in docker-compose.yml:
`docker-compose up`
^ Stdout will return the url that you need to navigate to.

[fcollonval]

It could be interesting to use the VSCode dev in container feature for that: https://code.visualstudio.com/docs/devcontainers/create-dev-container#_path-to-creating-a-dev-container

Maybe merging that with https://github.com/jupyterlab/debug-config-cookiecutter

So we can provide an out of the box environment with an IDE and proper debug config.

[keckelt]

Thanks for the hint to devContainers @fcollonval!

I now have to following setup:

devcontainer.json

// For format details, see https://aka.ms/devcontainer.json.
{
    "name": "loops",

    //"image": "jupyter/minimal-notebook:latest",
    "dockerFile": "./Dockerfile",
    "overrideCommand": false,

    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    "forwardPorts": [8800],

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": "echo ▶▶▶ Install dependencies && pip install -e . && echo ▶▶▶ link extension && jupyter labextension develop . --overwrite",

    // Configure tool-specific properties.
    // "customizations": {},

    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

Dockerfile Just removes authentication and surpresses opening a browser window

FROM jupyter/scipy-notebook:latest
CMD ["jupyter", "lab", "--port=8800", "--no-browser", "--ServerApp.token=''", "--ServerApp.password=''"]

Then, from a terminal in VS Code, I run the watch task (jlpm watch) and start coding 🎉

[fcollonval]

Closing as provided by: https://github.com/jupyterlab/vscode-config-template