In Progress
Unit 1, Lesson 1
In Progress

VS Code and Docker

The integration of Microsoft’s open source VS Code editor and Docker is a game changer.

Video transcript & code

VS Code and Docker, Part 1

I’ve been using Microsoft’s open source VS Code editor more and more these days. It’s a very good programmer’s editor, but then again so is whatever editor you already use. Today, I want to show you the one feature that, in my opinion, is a game changer. It truly sets VS Code apart from anything else out there.

We’re looking at a website project that I started many years ago.

It’s based on fairly old versions of Ruby and Rails.

I’d like to be able to make some updates to this project, but it would be nice if I didn’t have to spend any time setting my a local development environment to match this project’s particular dated expectations.

Fortunately, a contributor recently added a Dockerfile to the project!

It builds on the standard Ruby 1.9 Docker Hub image, and ensures that the appropriate Ruby gems are installed into the container when it is first set up.

This is great! In my opinion containers are the future of development environments. All of the idiosyncrasies of a particular project can be captured and maintained within a version-controlled container configuration. This makes it possible to get up and running on an unfamiliar project in minutes instead of hours, without contaminating my development machine with project-specific tweaks installations and tweaks.

But we were talking about VS Code. Here’s the part where this editor shines.

We can click the remoting area of the status bar, and VS Code pops up a menu of choices.

We choose “reopen in container”.

VS Code offers us a new set of options for reopening the project inside a container.

We choose to use the existing Dockerfile.

And now, VS Code is off to the races! It reopens itself in remote mode, and immediately starts up a container as defined in the Dockerfile. This includes downloading any base Docker images that the configuration depends on, as well as executing setup commands defined in the Dockerfile. This part can take a while, but it will only take this long once!

Once the container is finished booting up, we can see that VS Code has added a .devcontainer directory, with a devcontainer.json file.

Inside this file we can find some heavily commented configuration options for telling VS Code exactly how to interact with the development container.

We’ll make just one change to this default configuration.

We’ll tell VS Code to start the container with port 3000 exposed to the host machine.

Then we’ll rebuild the container. Don’t worry, it doesn’t take nearly as long this time, because Docker is smart about caching everything that hasn’t changed.

Now that VS Code is re-opened with the updated config,

we open a terminal.

Because it is in remote mode, VS Code automatically opens the terminal inside the Docker container!

We start the application...

And just like that, we have a Rails 3.2 application up and running under Ruby 1.9.

Now, let’s see what happens then next time we open up VS Code in this project’s directory.

The editor notices the devcontainer configuration, and asks us if we want to re-open inside the container.

When we click the button, VS Code once again reopens itself in remote mode, ensures the container is up to date and running, and connects to it.

Now, I haven’t even gotten to the biggest trick VS Code has up its sleeve when it comes to containers and remoting. But let’s talk about why just what I’ve shown you so far is such a big deal.

This devcontainer configuration can be committed to version control and pushed up to the project. The next time someone clones the project and opens it in VS Code, so long as they have Docker installed, it will configure the appropriate Docker container, start it up, map ports, and present them with a fully functional development environment.

We live in an age of programming where we often work on diverse projects. In order to avoid hours and hours of trial-and-error tweaking to get a specific development environment up and running, bundling a prescriptive container configuration with a project is the way forward. And VS Code is the first editor I’ve seen that takes this new era seriously by baking support for it into the very core of the app.

In future episodes, we’ll talk about how VS Code makes editor extensions Just Work inside containers in a way that’s unmatched in any other current IDE. Until then, happy hacking!