Before jumping right into the jupyter-based projects and preparing a custom environment for that, we must know the following:

Jupyter notebook

A jupyter notebook is an online tool that allows us to create and share interactive code documents. It provides a straightforward, simplified, document-centric environment.

Jupyter notebooks have a file extension, i.e., .ipynb.

Kernel

Kernels execute interactive code written in a specific programming language and deliver results to the user. Kernels also respond to requests for tab completion and introspection.

Environment setup

To set up an environment for our Jupyter-based projects, we have to create a Dockerfile and a config.py file.

If additional context is required, consider reading the Project Runtime lesson and then return to this lesson.

Dockerfile and config.py files

We have to prepare a Dockerfile with the required instructions and a config.py file as follows:

# Fetching the Ubuntu 20.04 LTS image
FROM    ubuntu:20.04
# Making apt-get installation non-interactive
ARG DEBIAN_FRONTEND=noninteractive
# Installing the Python & Jupyter
RUN     apt-get -q -y update \
        && apt-get install -y software-properties-common \
        && add-apt-repository ppa:deadsnakes/ppa \
        && apt-get update && apt-get install -y python3.8 python3-pip \
        && update-alternatives --install /usr/bin/python python /usr/bin/python3.8 1 \
        && python -m pip install -U pip matplotlib jupyter librosa==0.8.0 numpy pandas pymoo pandas_bokeh cufflinks pip bokeh==2.4.3\
	&& apt update && apt install -y sudo && sudo apt-get install -y libsndfile1-dev\
	&& apt update && apt install -y python3-tk\
        && rm -rf /var/lib/apt/lists/* && apt-get autoclean -y
# Adding the configuration file
ADD     config.py /root/.jupyter/jupyter_notebook_config.py
Dockerfile to build a docker image for jupyter-based projects

Dockerfile explained

  • Line 2: We are using the latest version of Ubuntu 20.04 LTS as the base image of our Dockerfile.

  • Line 5: We are making apt-get installations `non-interactive.

  • Lines 8-16: We are updating the packages list, installing python3.8, pip, matplotlib,pandas, numpy, libsndfile1-dev, jupyter, python3-tk, and clearing up the packages list and related information to keep the image size as low as possible.

  • Line 19: We are adding the configuration file for our notebooks. It contains preferences such as the port number (set to 8080) and the notebook directory (set to /usercode).

Now that we have the required files, we can prepare a single tarball file of these files.

Make the .tar.gz package

We need to compress the Dockerfile and the config.py files into a single tarball file. So in our terminal, we have to navigate to the directory where our files are present and use the following command to turn these assets into a tarball:

tar -czvf jupyterproject.tar.gz Dockerfile config.py

This command will take our Dockerfile and config.py files as inputs and create a single tarball file as output. The tarball file will be named jupyterProject.tar.gz.

Now that we have the tarball, we can upload it, create a Docker image, and configure the Docker job.

Upload the tarball

To upload the prepared tarball, we have to navigate to the “DOCKER CONTAINER” section that looks like this:

Upload tarball
Upload tarball

  1. Click on Change Docker File (Beta). Then select the tarball jupyterproject.tar.gz.

  2. Click the “Save” button to start the docker image-building process.

Adding the docker job for Jupyter Notebook using VS Code

Once the image is ready, we can add the docker job by selecting the live job type as follows:

Docker job
Docker job

Adding the docker job with Jupyter notebook on browser

Once the image is ready, we can add the docker job with Jupyter notebook by selecting the live job type as follows:

Live demo with Jupyter notebook in VS Code

Now that we have done all the required steps, let’s navigate to any of our created task and preview it with following configurations:

Once we are in preview mode, we’ll need to add/create the .ipynb file in the usercode directory then we can directly access the jupyter notebook on our screen.

Creating notebook
Creating notebook

The above-given screenshot, it’s being shown that we have the required Jupyter Notebook environment that we can utilize according to our needs.

With this, we need to create a .ipynb file within the VScode and open that file. We’ll get the following view:

Output in the markdown
Output in the markdown

Live demo with Jupyter notebook in browser

Let’s navigate to any of our created tasks and preview it with the following configurations:

Once we are in preview mode by clicking on the “Launch Workspace”, we’ll get the following output:

In the above-given screenshot, it’s been reflected that we got the required Jupyter Notebook environment that we can utilize according to our needs. Moreover, the file named exampleFile.txt is also there that we created in our earlier lessons using the editor option provided by the Workspace.

Let’s say we already included a file named exampleNotebook.ipynb using file editor or the upload option provided by Jupyter. How can we directly get into the file rather than the file tree as shown above?

The solution here is that we have to append the name of the file in the Workspace configurations Default URL as follows:

With this, when we’ll preview and launch the Workspace, we’ll get the desired output as follows: