Blog Post

Educator Developer Blog
7 MIN READ

Using Visual Studio Code from a docker image locally or remotely via VS Online

Lee_Stott's avatar
Lee_Stott
Icon for Microsoft rankMicrosoft
Mar 30, 2020

 

 

Utilising Custom Container builds to spin up a custom Visual Studio Code Environment for use on premise with Visual Studio Code or Online with Visual Studio Online

Using Visual Studio Code

Please see the following  repository contains a Visual Studio Code container build and instructions on deployment https://github.com/leestott/intro-DataScience

 

Using a Devcontainer custom docker image within the rep is a folder .devcontainer 

Within .devcontainer are two file

 

Dockerfile - docker installation file

devcontainer.json - Json file for the container build 

 

DockerFile - this file is the build of the docker image for the dev environment and includes things like python library installations

 

 

 

 

#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#-------------------------------------------------------------------------------------------------------------

#Python Versions
#FROM python:3
#Python Anaconda
FROM continuumio/anaconda3

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# This Dockerfile adds a non-root user with sudo access. Use the "remoteUser"
# property in devcontainer.json to use it. On Linux, the container user's GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Uncomment the following COPY line and the corresponding lines in the `RUN` command if you wish to
# include your requirements in the image itself. It is suggested that you only do this if your
# requirements rarely (if ever) change.
# COPY requirements.txt /tmp/pip-tmp/

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \
    #
    # Verify git, process tools, lsb-release (common in install instructions for CLIs) installed
    && apt-get -y install git openssh-client less iproute2 procps lsb-release \
    #
    # Install DataScience Python Libraries
    && pip --disable-pip-version-check --no-cache-dir install pylint \ 
    && pip --disable-pip-version-check --no-cache-dir install jupyter \
    && pip --disable-pip-version-check --no-cache-dir install numpy \
    && pip --disable-pip-version-check --no-cache-dir install pandas \
    && pip --disable-pip-version-check --no-cache-dir install scipy \
    && pip --disable-pip-version-check --no-cache-dir install folium==0.2.1 \
    && pip --disable-pip-version-check --no-cache-dir install matplotlib \
    && pip --disable-pip-version-check --no-cache-dir install ipywidgets>=7.0.0 \
    && pip --disable-pip-version-check --no-cache-dir install bqplot \
    && pip --disable-pip-version-check --no-cache-dir install nbinteract==0.0.12 \
    #
    # Update Python environment based on requirements.txt
    ## && pip --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
    ## && rm -rf /tmp/pip-tmp \
    #
    # Create a non-root user to use if preferred - see https://aka.ms/vscode-remote/containers/non-root-user.
    && groupadd --gid $USER_GID $USERNAME \
    && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \
    # [Optional] Add sudo support for the non-root user
    && apt-get install -y sudo \
    && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
    && chmod 0440 /etc/sudoers.d/$USERNAME \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get
ENV DEBIAN_FRONTEND=dialog

 

 

 

 

decontainer.json 

 

This file confirm the python requirements and VSCode Extensions which are to be installed. A devcontainer.json file is similar to launch.json for debugging, but designed to launch (or attach to) a development container instead. At its simplest, all you need is a .devcontainer/devcontainer.json file in your project that references an image, Dockerfile, or docker-compose.yml, and a few properties. You can adapt it for use in a wide variety of situations.

 

 

 

 

{
	"name": "Python 3",
	"context": "..",
	"dockerFile": "Dockerfile",
    // Add the IDs of extensions you want installed when the container is created.
		"extensions":["ms-python.python"],
		// Confirm to user that they can now use the notebook = change background to white and insert refresh now file
	    "postCreateCommand": "sudo bash ./.devcontainer/setup.sh > ~/post-create.log",
	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash",
		//Python Versions "python.pythonPath": "/usr/local/bin/python",
		//"python.linting.enabled": true,
		//"python.linting.pylintEnabled": true,
		//"python.linting.pylintPath": "/usr/local/bin/pylint"
		//Using Conda Python
		"python.pythonPath": "/opt/conda/bin/python",
		"python.linting.enabled": true,
		"python.linting.pylintEnabled": true,
		"python.linting.pylintPath": "/opt/conda/bin/pylint",
	},
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	//"postCreateCommand": "pip install -r requirements.txt",

	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
	// "remoteUser": "vscode"
}

 

 

 

 

 

The following VSCode Repo contains various container deployments https://github.com/microsoft/vscode-dev-containers/tree/master/containers this repository contains a set of dev container definitions to help get you up and running with a containerized environment.

 

The definitions describe the appropriate container image, runtime arguments for starting the container, and VS Code extensions that should be installed. Each provides a container configuration file (devcontainer.json) and other needed files that you can drop into any existing folder as a starting point for containerizing your project. (The vscode-remote-try-* repositories may also be of interest if you are looking for complete sample projects.)

 

Before You Start

The Visual Studio Code Remote - Containers extension lets you use a Docker container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code's full feature set. A .devcontainer folder in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This container can be used to run an application or to sandbox tools, libraries, or runtimes needed for working with a codebase.

Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system. This means that you can seamlessly switch your entire development environment just by connecting to a different container.

Running the container within VSCode on Windows, Mac or Linux

The following Requirements are installed as part of the container build

  • jupyter
  • numpy
  • pandas
  • scipy
  • folium==0.2.1
  • matplotlib
  • ipywidgets>=7.0.0
  • bqplot
  • nbinteract==0.0.12

You can run this container from VSCode locally see https://code.visualstudio.com/docs/remote/containers.

Quick Start Installation

To get started, follow these steps:

Install and configure Docker for your operating system.

Windows / macOS:

Install Docker Desktop for Windows/Mac

Right-click on the Docker taskbar item and update Settings / Preferences > Shared Drives / File Sharing with any source code locations you want to open in a container. If you run into trouble, see Docker Desktop for Windows tips on avoiding common problems with sharing.

Linux:

Follow the official install instructions for Docker CE/EE for your distribution. If you are using Docker Compose, follow the Docker Compose directions as well.

Add your user to the docker group by using a terminal to run: sudo usermod -aG docker $USER

Sign out and back in again so your changes take effect.

Install Visual Studio Code

Install the Remote Development extension pack

Loading the Docker container in Visual Studio Code

Let's start by using a sample project to try things out.

Clone one of the repository

Start VS Code and click on the quick actions Status Bar item in the lower left corner of the window. 

 

Quick actions Status bar item

Select Remote-Containers: Open Folder in Container... from the command list that appears, and open the root folder of the project you just cloned.

The window will then reload, but since the container does not exist yet, VS Code will create one. This may take some time, and a progress notification will provide status updates. Fortunately, this step isn't necessary the next time you open the folder since the container will already exist.

 

Dev Container Progress Notification

After the container is built, VS Code automatically connects to it and maps the project folder from your local file system into the container. Check out the Things to try section of README.md in the repository you cloned to see what to do next.

Tip: Want to use a remote Docker host? See the Advanced Containers article for details on setup

 

Running the container in Visual Studio CodeSpaces (Browser Experience)

Utilise the container in Visual Studio CodeSpaces https://visualstudio.microsoft.com/services/visual-studio-codespaces/you'll need the following:

  • A Microsoft Azure subscription. If you don't already have one, you can sign up for a free trial at https://azure.microsoft.com or a Student Subscription at https://aka.ms/azureforstudents.
  • A Visual Studio Online environment. This provides a hosted instance of Visual Studio Code, in which you'll be able to run the notebooks for the lab exercises. To set up this environment:
    1. Browse to https://online.visualstudio.com
    2. Click Get Started.
    3. Sign in using the Microsoft account associated with your Azure subscription.
    4. Click Create environment. If you don't already have a Visual Studio Online plan, create one. This is used to track resource utlization by your Visual Studio Online environments. Then create an environment with the following settings:
      • Environment Name: A name for your environment - for example, intro-Datascience.
      • Git Repository: leestott/intro-Datascience
      • Instance Type: Standard (Linux) 4 cores, 8GB RAM
      • Suspend idle environment after: 120 minutes
    5. Wait for the environment to be created, and then click Connect to connect to it. This will open a browser-based instance of Visual Studio Code.
    6. Wait for a minute or so while the environment is set up for you. It might look like nothing is happening, but in the background we are installing some extensions that you will use in the labs.
    7. Copy your notebooks files and data and undertake your learning

Tip: you can change the color scheme back to a dark background if you prefer - just click the ⚙ icon at the bottom left and select a new Color Theme.

Updated Jun 17, 2020
Version 5.0
Classroom
container
development
docker
Educator
faculty
labs
teaching
visual studio online
VSCode
  • Lee_Stott's avatar
    Lee_Stott
    Icon for Microsoft rankMicrosoft
    Jun 23, 2020

    The following Academic Paper was presented at this year ITICSE conference, Using DevContainers to Standardize Student Development
    Environments: An Experience Report by Sander Valstar, William G. Griswold, and Leo Porter from University of California, San Diego 

    ABSTRACT
    In computer science classes it can be a challenge to ensure every student has a functioning development environment. Running preconfigured servers that provide students with remote access can help mitigate most of these setup issues, however they can also introduce new limitations of their own. We propose using DevContainers to overcome the local machine setup difficulties for the students. DevContainers allow the instructional staff to provision a development environment (a Docker image) with all the correct software versions pre-configured. This development environment can be used on any major OS through Docker. Moreover, through this DevContainer configuration, Microsoft Visual Studio Code can integrate seamlessly with the Docker container to provide an experience for the user that is practically the same as working on the native OS. This work examines the value of employing a DevContainer setup in an Advanced Data Structures course and provides details for those interested in using DevContainers in their courses.

    CONCLUSION
    In this study, we found that the majority of students used our DevContainer setup and generally viewed it favorably—recommending faculty use it in other courses. From the instructor’s point of view there are several advantages. For instance, there is no need to communicate with the maintainers of the Linux server to configuring the machines. This offers more control to the instructor about the development environment the students use, which leads to faster turnaround times for improvements to the programming assignments. Another benefit is that the DevContainer’s Docker configuration can be used almost without change on auto grading systems such as Gradescope [4]. This ensures that there will be no “it works on my machine”-issues with the auto grader. Furthermore, the DevContainer allows for easy sharing of programming assignments between instructors as the tooling infrastructure is shipped with the assignment. This could be useful for programming assignments sharing platforms such as the SIGCSE symposium’s Nifty Assignments [9]. Finally, DevContainers are not a research or hobby project, but a professional tool supported by Microsoft. Hence, they can be expected to continue to be usable and supported in the future. There remain some barriers to using the DevContainer, specifically Docker can be a hurdle to set up for the first time. However, we suspect that this is only an issue in the first course in the curriculum that introduces DevContainers to the students as for following courses students will come into the course with a working Docker configuration. Moreover, we find that despite the initial barrier of setting up the DevContainer the vast majority 

    You can download the paper here https://dl.acm.org/doi/pdf/10.1145/3341525.3387424