{"id":1598,"date":"2021-05-19T17:23:32","date_gmt":"2021-05-20T00:23:32","guid":{"rendered":"http:\/\/blog.nillsf.com\/?p=1598"},"modified":"2021-05-19T17:23:40","modified_gmt":"2021-05-20T00:23:40","slug":"development-containers-in-visual-studio-code-are-awesome","status":"publish","type":"post","link":"https:\/\/nillsf.com\/index.php\/2021\/05\/19\/development-containers-in-visual-studio-code-are-awesome\/","title":{"rendered":"Development containers in Visual Studio code are awesome"},"content":{"rendered":"\n

As part of my job, I work with multiple languages and multiple tools on a daily basis. Keeping environments up to date and having all the right tools installed can sometimes become a bit of a burden. <\/p>\n\n\n\n

I recently started using development containers in Visual Studio Code (VS Code) to help manage this burden. Development containers in VS Code are a way to leverage containers as a remote environment with all required tools and extensions pre-installed. By using containers, you can run multiple environments on your machine without having to install the tools locally. <\/p>\n\n\n\n

For example, I’m doing some development work right now in Azure PowerShell. I recently bought a new PC, where I have no tools pre-installed. I’m going to use a development container where I run PowerShell and Azure PowerShell, to do some coding work for Bellhop.<\/p>\n\n\n\n

Let’s get started:<\/p>\n\n\n\n

Installing the required tools<\/h2>\n\n\n\n

In order to get devcontainers in VScode to work, you need to install a couple of things:<\/p>\n\n\n\n

  1. Docker Desktop (if on Windows, preferably with WSL 2)<\/li>
  2. VS Code<\/li>
  3. The Visual Studio Code Remote – Containers\u00a0extension <\/li><\/ol>\n\n\n\n

    To install the first two, I used chocolatey. The following two commands install chocolatey and install Docker Desktop and VS Code.<\/p>\n\n\n\n

    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https:\/\/chocolatey.org\/install.ps1'))\nchoco install vscode dockerdesktop -y<\/code><\/pre>\n\n\n\n
    Now a reboot is required. After this reboot, to optimize Docker performance, installing WSL 2 is recommended. For more info on how to do this, please refer to this post<\/a>.<\/p>\n\n\n\n
    Once WSL is setup, you also need to install the VS Code remote containers extension. To do this, open VS Code, click on the extensions icon, look for “container” and click on the install button.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    And you now have the ability to open any folder in a container. Let’s start with opening an existing repo with a .devcontainer folder:<\/p>\n\n\n\n
    Opening an existing repo with a devcontainer definition<\/h2>\n\n\n\n
    For this example, let’s use an existing git repository with a devcontainer definition. I’m using Bellhop <\/a>for this example. Bellhop is an open source project I’m working on, and which I now want to work on from my new desktop. I created a branch with a .devcontainer definition. To get this locally, you can also use the following commands:<\/p>\n\n\n\n
    git clone https:\/\/github.com\/Azure\/bellhop.git\ncd bellhop\ngit checkout devcontainers\ncode .<\/code><\/pre>\n\n\n\n
    These commands will work either from within Windows or from within WSL.<\/p>\n\n\n\n
    The moment you open this folder in VS Code, VS Code will detect the .devcontainer folder, and will ask you reopen this folder in a container:<\/p>\n\n\n\n
    \"\"
    Notification that shows VS Code detected a devcontainer definition and asks you to open the folder in a container<\/figcaption><\/figure>\n\n\n\n
    If you didn’t get this notification, you can also get here by opening the command pallet in VS code (CTRL + SHIFT + P) and looking for the action “Remote-Containers: Reopen in Container…”<\/p>\n\n\n\n
    \"\"
    You can use the command palette to reopen a folder in a container.<\/figcaption><\/figure>\n\n\n\n
    This will cause VS Code to build the container if this is the first time you’re opening this repo in the container. If you open the repo again, it will use the same container you used previously, avoiding the time required to build the container.<\/p>\n\n\n\n
    And once you reopen an existing repo in the container, all tools are installed for you. In the case of the Bellhop container definition, this includes Az PowerShell and Pester, as well as the PowerShell extension for VS Code. As you can see below, this leads to intellisense being available and a Powershell terminal automatically opening as well:<\/p>\n\n\n\n
    \"\"
    No magic here, Az PowerShell, PowerShell extension for VSCode and Intellisense provided by the devcontainer.<\/figcaption><\/figure>\n\n\n\n
    The Bellhop repo contains a devcontainer definition already. But what if you don’t have one ready? I’ll cover that in the next section.<\/p>\n\n\n\n
    Creating a new devcontainer definition<\/h2>\n\n\n\n
    To create a new devcontainer definition you can use one of two options:<\/p>\n\n\n\n
    1. Write definition from scratch<\/a>.<\/li>
    2. Start from a template<\/a> and edit as needed<\/li><\/ol>\n\n\n\n
      I prefer option (2) as it comes with some prebuilt containers. Let’s explore it here and let’s try to make a container with Python and the ability to edit Jupyter notebooks.<\/p>\n\n\n\n
      To start, we’ll need to open a new folder in VS Code. To open a new folder, use the File menu and click open folder and select a new folder.<\/p>\n\n\n\n
      \"\"
      Opening a new folder in VS Code<\/figcaption><\/figure>\n\n\n\n
      Next, open the VS code command palette by clicking CTRL+SHIFT+P. In this palette look for the “Add Development Container Configuration Files” option.<\/p>\n\n\n\n
      \"\"
      Adding a devcontainer definition<\/figcaption><\/figure>\n\n\n\n
      Next, you’ll want to scroll down and select the “Show All Definitions” option:<\/p>\n\n\n\n
      \"\"
      Showing all definitions<\/figcaption><\/figure>\n\n\n\n
      In that view, you’ll see a big list of predefined devcontainers. Look for the one called “Anaconda” and select that.<\/p>\n\n\n\n
      \"\"
      Looking for the anaconda definition<\/figcaption><\/figure>\n\n\n\n
      This will open the devcontainer.json. You don’t need to make changes to this, you can now build the container. To do this, open the command palette again (CTRL+SHIFT+P) and select the “rebuild and reopen in container” option:<\/p>\n\n\n\n
      \"\"
      Building the container<\/figcaption><\/figure>\n\n\n\n
      This will build the devcontainer, which will take a couple of minutes.<\/p>\n\n\n\n
      Once the container is built, we can try if Python and Jupyter work well. To do so, let’s create a new notebook called “test.ipynb” (make sure to match the file extension):<\/p>\n\n\n\n
      \"\"
      Creating a new Jupyter notebook<\/figcaption><\/figure>\n\n\n\n
      The moment you open this file, you’ll notice that VS Code automatically launches it in a Jupyter notebook editor:<\/p>\n\n\n\n
      \"\"
      When opening the notebook, VS Code automatically opens it in a notebook editor.<\/figcaption><\/figure>\n\n\n\n
      And you can work with this as any other notebook. Try for instance to make a small Python loop:<\/p>\n\n\n\n
      for i in range(10):\n  print(i)<\/code><\/pre>\n\n\n\n
      Which you can execute by pressing CTRL+ENTER or use the play icon in the top bar. As you will see, this executes in Python flawlessly:<\/p>\n\n\n\n
      \"\"
      Executing Python code in the container<\/figcaption><\/figure>\n\n\n\n
      One cool thing with devcontainers is that the files are still stored locally on your disk, not in the container. For example, for this Python development work, I created a folder in Windows, and opened that in the devcontainer. The file I created in the devcontainer is present on my local disk:<\/p>\n\n\n\n
      \"\"
      Files are still available on the local file system<\/figcaption><\/figure>\n\n\n\n
      And now that you have a working devcontainer, you can make changes to either the Dockerfile or the devcontainer.json to customize your environment. <\/p>\n\n\n\n
      Summary<\/h2>\n\n\n\n
      In this post I showed you how to create and use VS Code devcontainers. They are amazing! You can work with any tool, any language without having to install anything locally (OK, you need VS Code and Docker). Once you launch a container, you have all the tools, VS Code extensions, intellisense available as if it were installed on your local machine. <\/p>\n","protected":false},"excerpt":{"rendered":"
      As part of my job, I work with multiple languages and multiple tools on a daily basis. Keeping environments up to date and having all the right tools installed can sometimes become a bit of a burden. I recently started using development containers in Visual Studio Code (VS Code) to help manage this burden. Development […]<\/p>\n","protected":false},"author":1,"featured_media":1648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,31],"tags":[128,55,183],"class_list":["post-1598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops","category-open-source","category-software-development","tag-containers","tag-software-development","tag-vistual-studio-code"],"jetpack_featured_media_url":"https:\/\/nillsfblog.blob.core.windows.net\/media\/2021\/05\/2021-05-19-17_10_44-Customize-core-dumps-in-Azure-Kubernetes.pptx-Microsoft-PowerPoint-Online-and-.png","_links":{"self":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/comments?post=1598"}],"version-history":[{"count":6,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1598\/revisions"}],"predecessor-version":[{"id":1649,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1598\/revisions\/1649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/media\/1648"}],"wp:attachment":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/media?parent=1598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/categories?post=1598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/tags?post=1598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}