Development Containers in Education with Visual Studio Code

Development Containers in Education with Visual Studio Code

Development Containers in Education with Visual Studio Code

We've heard from many educators that the first days or weeks of the semester can be lost to configuring the correct environment for students. Even so, students may still end up with a low-quality development experience or insufficient grading of their assignments:

"Set up for my students normally takes five class periods. There are version of Python to deal with. There's a lot of complexity. Sadly that complexity takes a lot of time and money to sort out." -[Community College US Professor CS 101]

“I would prefer a version of VS Code, specifically set up for a Python installation...” -[Assistant Professor, Liberal Arts College]

Development containers with Visual Studio Code can serve as a fantastic tool in education to ensure students have a consistent coding environment. They take care of setup so that students and instructors can quickly move past configuration, and instead focus on what's truly important: learning and coding something great!

Development containers#

So, what are development containers? Containers are pieces of software that package code and all of the dependencies that code needs to run, including the runtime, tools, libraries, and settings. Containers were initially created as a way to deploy and manage apps in a consistent environment and make more efficient use of hardware. They later evolved to help in providing a consistent build environment, and more recently, development environment. That's where the name dev container comes from.

When you create a container, its initial contents come from what's known as an “image.” An image can be thought of as a mini-disk drive with things like the operating system and other tools pre-installed. You describe what goes into the image using a Dockerfile, and once you run the image, it becomes a container.

Dev containers provide a separate coding environment from your computer. For example, if you download a specific version of a dependency, that version will be unique to the container. In the diagram below, notice how the container includes the app and its necessary dependencies, keeping the computer (Host OS and Infrastructure) free and clean of any dependencies:

Containers diagram

As an instructor, you can create a specific image for an assignment. Each student will get the same exact same version of dependencies, such as the same version of Python or a C++ compiler, regardless of their operating system or any other files already installed on their computer.

Remote – Containers in VS Code#

The Visual Studio Code Remote - Containers extension lets you use a container as your main coding environment. In the classroom, an instructor can take an existing dev container, or create their own, and share it with the class. Each student can open the container in VS Code and automatically have the tools and runtimes they need to develop their applications. Students will also have access to VS Code's full feature set, including IntelliSense and debugging, while coding.

The Remote – Containers extension works solely with Linux-based containers, so although students may have different operating systems on their computers, the coding environment will be consistent across all of them.

We've already seen instructors using Remote – Containers in their classrooms with success. You can check out Using DevContainers to Standardize Student Development Environments: An Experience Report to learn more about the experiences of three researchers who used dev containers in a course at UC San Diego.

This post will serve as a guide to instructors looking to implement development containers in the classroom to create a smoother, more consistent environment for their students.

To witness dev containers in action and how students can get started in just 5 minutes, check out our introductory student video.

Guide for Instructors#

With traditional set up approaches, students can run into a wide variety of issues while setting up their environment. Some examples include differences in their unique OS, where project files are stored, or small differences in runtimes or tools they've installed. Instructors need to be well versed in all these subtleties to be able to help students solve these issues.

A common issue is managing different versions of a tool. Let's take Python as an example: there's Python 2 and Python 3, along with different minor versions. Having multiple versions of Python, and then multiple accompanying tools such as linters, can be confusing and lead to errors.

To save tremendous time and confusion, we can use dev containers to create a standardized Python development environment across our class. Students will all get the same version of Python, avoiding the need to install a new version or uninstall any old ones, and everyone running the same container and source code will get the same exact results.

Prerequisites#

  • Install Visual Studio Code.
  • Install Docker Desktop.
  • Docker is the industry standard for building and sharing containers. We recommend Docker Desktop Stable 2.3.0.3 as it is the most recent and performant version of Docker Desktop.
  • There is newly introduced Docker Desktop support on Windows Home. It requires Windows 10, version 2004 and enabling the Windows Subsystem for Linux 2 (WSL 2) backend. Enable WSL 2 by following the WSL 2 installation guide.
  • For students who would prefer to not configure the WSL 2 backend, Docker Desktop for Windows can alternatively be used on Windows 10 Pro, Enterprise, or Education (Build 16299 or later), and Hyper-V and Containers Windows features must be enabled.

Let's start off by launching VS Code, which we can do by typing code in the command prompt or terminal (or just by selecting VS Code on your computer):

Launch VS Code from command prompt

Once VS Code launches, ensure you've installed the Remote - Containers extension:

Remote containers extension

When we install any of the Remote extensions, the green Remote indicator is added to the bottom left of the Status bar:

Remote indicator in VS Code

You can click on it to open the Command Palette and verify the Remote-Containers commands are listed:

List of remote commands in Command Palette

Accessing a container for your class#

Let's walk through an example dev container to help students get a consistent coding environment. In our classroom, we could create a single GitHub repository to store exercises that share the same tech stack. For instance, all the Python assignments can use the same container and be stored in the same repo.

We have an example vscode-course-sample GitHub repo with a Python dev container and two Python intro assignments. Let's open it in VS Code.

You can select the Remote indicator in the bottom left, or use the Command Palette, to bring up the Remote-Containers commands.

Let's call Open Repository in Container...

Open Repository in Container command

We need to enter the URL to the GitHub repo where our container is stored, which in our case is microsoft/vscode-course-sample:

Paste GitHub URL in Command Palette

You can Create a unique volume. A volume is where files will be stored in our container:

Volume options in Command Palette

Now that we've chosen our container repo, VS Code reloads to build the image and start the container:

Close-up on starting container notification

Once the container is built and running, our files are loaded and we can start coding within our Python environment!

Click on sort.py in the Explorer to open it, and press F5 (or the green Run icon in the top right) to run it:

Run sort.py program

Our Python code ran successfully without ever having to set up Python on our local computer.

We also have access to all the benefits of VS Code, such as setting breakpoints to pause our program and help us debug. Let's set a breakpoint when we sort our list of words.

Setting a breakpoint

We can run our program with F5. Notice that the program stops once it hits the breakpoint:

Program stops at breakpoint

Creating a container for your class#

Now that we've seen a fantastic example of a container, let's set up our first container ourselves using the Remote – Containers extension. Let's start off in a “Hello World” Python application:

Hello world Python app

visual studio code visual studio code developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Develop an ASP.NET Core Application Using Visual Studio Code

Visual Studio Code (VS Code) is a free, cross-platform, and lightweight source-code editor developed by Microsoft for Windows, Linux, and Mac operating systems. It is a source-code editor while Visual Studio is an IDE (integrated development environment). VS Code supports development operations such

C++ Development with Visual Studio Code

If you’re looking for a fast and lightweight open-source code editor, Visual Studio Code has you covered. Come for a deep dive into the features of Visual Studio Code which provide a rich, productive environment for C++ development.

Visual Studio Code VS Sublime for JavaScript & Frontend Development

Visual Studio Code and Sublime are two of the most popular code editors out there. In this post, I'll compare both tools' performance, customization, and extensions. For frontend developers out there, this will also answer the question: which one is better for JavaScript development?

COMO USAR e trabalhar com Code Review no Visual Studio Code

💲 Live CollabPlay: https://youtu.be/B6LCFSPdsE0 💲 Hospedagem com Desconto Exclusivo: https://tekers.tech/4e587 Não é todo programador que gosta de compartilh...

Notes from Visual Studio Live! No Typical Developer

What I learned: There's no typical developer, they face tough resource constraints, cutting-edge tech is not of the most interest to many dealing with real-world legacy concerns, and foresighted companies are making investments for the future even with the tight budgets.