How to Develop Inside a Container Using Visual Studio Code Remote Containers

This is a
guest post from Jochen Zehnder. Jochen is a Docker Community Leader and working
as a Site Reliability Engineer for 56K.Cloud. He started his career as a
Software Developer, where he learned the ins and outs of creating software. He
is not only focused on development but also on the automation to bridge the gap
to the operations side. At 56K.Cloud he helps companies to adapt technologies
and concepts like Cloud, Containers, and DevOps. 56K.Cloud
is a Technology company from Switzerland focusing on Automation, IoT,
Containerization, and DevOps.

Jochen Zehnder joined 56K.Cloud in
February, after working as a software developer for several years. He always tries
to make the lives easier for everybody involved in the development process. One
VS Code feature that excels at this is the Visual Studio Code Remote –
Containers extension. It is one of many extensions of the Visual Studio Remote
Development feature.

This post
is based on the work Jochen did for the 56K.Cloud internal handbook. It uses Jekyll to generate a static website out of
markdown files. This is a perfect example of how to make lives easier for
everybody. Nobody should know how to install, configure, … Jekyll to make
changes to the handbook. With the Remote Development feature, you add
all the configurations and customizations to the version control system of your
project. This means a small group implements it, and the whole team benefits.

One thing I
need to mention is that as of now, this feature is still in preview. However, I
never ran into any issues while using it, and I hope that it will get out of
preview soon.

##
Prerequisites

You need to
fulfil the following prerequisites, to use this feature:

* Install Docker
and Docker Compose

* Install Visual
Studio Code

* Install
the Remote
Container extension

## Enable
it for an existing folder

The Remote
Container extension provides several ways to develop in a container. You
can find more information in the documentation,
with several Quick start sections. In this post, I will focus on how to
enable this feature for an existing local folder.

As with all
the other VS Code extensions, you also manage this with the Command Palette.
You can either use the shortcut or the green button in the bottom left corner
to open it. In the popup, search for Remote-Containers and select Open
Folder in Container

VS Code Command Palette

In the next
popup, you have to select the folder which you want to open in the container.
For this folder, you then need to Add the Development Container
Configuration Files. VS Code shows you a list with predefined container
configurations. In my case, I selected the Jekyll configuration. After
that, VS Code starts building the container image and opens the folder in the
container.

Add Development Container Configuration Files

If you now
have a look at the Explorer you can see, that there is a new folder
called `.devcontainer`. In my case, it added two files. The `Dockerfile`
contains all the instructions to build the container image. The
`devcontainer.json` contains all the needed runtime configurations. Some of the
predefined containers will add more files. For example, in the `.vscode` folder
to add useful Tasks.
You can have a look at the GitHub Repo to
find out more about the existing configurations. There you can also find
information about how to use the provided template to write your own.

##
Customizations

The
predefined container definitions provide a basic configuration, but you can
customize them. Making these adjustments is easy and I explain the two changes
I had to do below. The first was to install extra packages in the operating
system. To do so, I added the instructions to the `Dockerfile`. The second
change was to configure the port mappings. In the `devcontainer.json`, I
uncommented the `forwardPorts` attribute and added the needed ports. Be aware,
for some changes you just need to restart the container. Whereas for others,
you need to rebuild the container image.

## Using
and sharing

After you
opened the folder in the container you can keep on working as you are used to.
Even the terminal connects to the shell in the container. Whenever you open a
new terminal, it will set the working directory to the folder you opened in the
container. In my case, it allows me to type in the Jekyll commands to build and
serve the site.

After I
made all the configurations and customizations, I committed and pushed the new
files to the git repository. This made them available to my colleagues, and
they can benefit from my work.

# Summary

Visual
Studio Code supports multiple ways to do remote development. The Visual
Studio Code Remote – Containers extension allows you to develop inside a
container. The configuration and customizations are all part of your code. You
can add them to the version control system and share them with everybody
working on the project.

## More
Information

For more
information about the topic you can head over to the following links:

VS Code Remote
DevelopmentVisual Studio
Code Remote – ContainersVS Code
Remote Development Container Definitions – GitHub Repo

The Remote Container extension uses Docker as the container runtime.
There is also a Docker extension, called: Docker for Visual Studio Code. Brian
gave a very good introduction at DockerCon LIVE 2020. The recording of his talk Become a
Docker Power User With Microsoft Visual Studio Code is
available online.

## Find out
more about 56K.Cloud

We love Cloud, IoT, Containers, DevOps, and Infrastructure as Code. If you are interested in chatting connect with us on Twitter or drop us an email: info@56K.Cloud. We hope you found this article helpful. If there is anything you would like to contribute or you have questions, please let us know!

This post originally appeared here.
The post How to Develop Inside a Container Using Visual Studio Code Remote Containers appeared first on Docker Blog.
Quelle: https://blog.docker.com/feed/

Published by