<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Dev-Containers on blog.iankulin.com</title><link>https://blog.iankulin.com/tags/dev-containers/</link><description>Recent content in Dev-Containers on blog.iankulin.com</description><generator>Hugo</generator><language>en-AU</language><lastBuildDate>Sat, 10 Jan 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.iankulin.com/tags/dev-containers/index.xml" rel="self" type="application/rss+xml"/><item><title>VS Code Dev Containers</title><link>https://blog.iankulin.com/vs-code-dev-containers/</link><pubDate>Sat, 10 Jan 2026 00:00:00 +0000</pubDate><guid>https://blog.iankulin.com/vs-code-dev-containers/</guid><description>&lt;h3 id="remote-ssh"&gt;Remote-SSH&lt;/h3&gt;
&lt;p&gt;One of the things I&amp;rsquo;ve done a bit in Visual Studio Code is using it&amp;rsquo;s ability to work on a different machine over SSH. I have a couple of LXCs on a server set up for different languages - one for C++ and another for Rust. They are things I don&amp;rsquo;t work in often, and I didn&amp;rsquo;t want to set them up on my laptop, but thought I might want them again sometime in the future.&lt;/p&gt;
&lt;p&gt;This is straightforward in VS Code - You install the &lt;a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh"&gt;remote ssh extension&lt;/a&gt; locally, then choose &lt;code&gt;Remote-SSH: Connect to Host&lt;/code&gt; in the command palette. A few seconds later, it appears that you&amp;rsquo;re working locally, but actually you are working in a remote session on the server your VS Code instance is SSH&amp;rsquo;d into (a small indicator in the bottom left is the tell). You need to clone your project from git since you&amp;rsquo;re working in the server&amp;rsquo;s file system, and there&amp;rsquo;s some complexity with extensions since you&amp;rsquo;re sort of working in a new VS Code instance, but apart from that it feels the same as working locally.&lt;/p&gt;
&lt;img src="https://blog.iankulin.com/images/architecture-ssh.png" width="968" alt="Remote SSH VS Code architecture from https://code.visualstudio.com/docs/remote/ssh"&gt;
&lt;p&gt;The official docs for &lt;a href="https://code.visualstudio.com/docs/remote/ssh"&gt;Remote Development using SSH are here.&lt;/a&gt;&lt;/p&gt;
&lt;h3 id="why-now"&gt;Why now?&lt;/h3&gt;
&lt;p&gt;The reason I&amp;rsquo;ve been interested in this again lately is to provide a more secure environment for using AI agentic coding tools like Claude Code. If it&amp;rsquo;s running in it&amp;rsquo;s own server (that I can easily recreate from a snapshot) I don&amp;rsquo;t have to worry about dramas like having &lt;a href="https://www.theregister.com/2025/12/01/google_antigravity_wipes_d_drive/"&gt;my hard drive deleted&lt;/a&gt; by Gemini.&lt;/p&gt;
&lt;p&gt;But what if you don&amp;rsquo;t have the ability to spin up an environment on your homelab? There&amp;rsquo;s a few options, but probably the easiest for VS Code users is to work in a &amp;lsquo;Dev Container&amp;rsquo;.&lt;/p&gt;
&lt;h3 id="dev-containers"&gt;Dev Containers&lt;/h3&gt;
&lt;p&gt;Working in a Dev Container is basically the same as remoting into another server with VS Code, but in this case the other server is a container spun up in Docker.&lt;/p&gt;
&lt;img src="https://blog.iankulin.com/images/architecture-containers.png" width="968" alt="VS Code Dev Container architecture. From https://code.visualstudio.com/docs/devcontainers/containers"&gt;
&lt;p&gt;There&amp;rsquo;s a couple of important differences from working on a remote server:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;we&amp;rsquo;re working on our local files;&lt;/li&gt;
&lt;li&gt;Dev containers are an important system for sharing repeatable development environments, so it&amp;rsquo;s well integrated into VS Code - the tooling is nice.&lt;/li&gt;
&lt;li&gt;You need Docker/Docker desktop running locally.&lt;/li&gt;
&lt;li&gt;You need a container image to work with, and a &lt;code&gt;devcontainer.json&lt;/code&gt; file to tell VS Code how to manage all this.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The rest of this post will focus on the basics of working in a Dev Container. There is also a good explanation of all this in the &lt;a href="https://code.visualstudio.com/docs/devcontainers/tutorial"&gt;VS Code docs&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="the-container"&gt;The Container&lt;/h2&gt;
&lt;p&gt;After you&amp;rsquo;ve installed the VS Code &lt;a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers"&gt;extension&lt;/a&gt;, and set up your local Docker environment, you&amp;rsquo;re going to need a Docker container to work in. There&amp;rsquo;s a &lt;a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers"&gt;big list of existing containers&lt;/a&gt; that cover most scenarios, but I prefer to roll my own. This is achieved by writing a Dockerfile.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#d8dee9;background-color:#2e3440;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;FROM node:24-bookworm
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;# Use non-root user for development
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;USER node
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;# Development environment
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;ENV NODE_ENV=development
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;# Default command
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;CMD [&amp;#34;npm&amp;#34;, &amp;#34;start&amp;#34;]
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;I&amp;rsquo;m going to name this &lt;code&gt;Dockerfile.dev&lt;/code&gt; and put it in the &lt;code&gt;.devcontainer&lt;/code&gt; directory - later we&amp;rsquo;ll point to it from our &lt;code&gt;devcontainer.json&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screenshot-2026-01-09-at-16.57.06.png" alt=""&gt;&lt;/p&gt;
&lt;p&gt;The Dockerfile describes the system that we&amp;rsquo;ll be working in when we&amp;rsquo;re working on our project - it&amp;rsquo;s like the specification of our remote &amp;lsquo;server&amp;rsquo;. Sometimes you might want to install other stuff here - for example if you are a vim enthusiast, you might &lt;code&gt;apt install vim&lt;/code&gt; in the Dockerfile, but generally you should keep it reasonably generic.&lt;/p&gt;
&lt;h3 id="devcontainerjson"&gt;devcontainer.json&lt;/h3&gt;
&lt;p&gt;Next we need to tell VS Code how to work in the container we&amp;rsquo;ve specified.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#d8dee9;background-color:#2e3440;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;{
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;name&amp;#34;: &amp;#34;Node.js Dev Container&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;build&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;dockerfile&amp;#34;: &amp;#34;Dockerfile.dev&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; },
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;forwardPorts&amp;#34;: [
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; 3000
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; ],
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;postCreateCommand&amp;#34;: &amp;#34;npm install&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This goes in the .devcontainer directory. It&amp;rsquo;s almost all self explanatory - we tell the extension what container we&amp;rsquo;re using - in this case building it from &lt;code&gt;Dockerfile.dev&lt;/code&gt;, export the port we&amp;rsquo;re running on, and run a command in the terminal of our new system once it exists.&lt;/p&gt;
&lt;h3 id="whats-missing"&gt;What&amp;rsquo;s missing?&lt;/h3&gt;
&lt;p&gt;Alert readers will have noticed there&amp;rsquo;s a couple of things that we need which are missing.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;VS Code Server - the way that VS Code is working in this configuration is that it&amp;rsquo;s running on our local machine, but connecting to a &amp;ldquo;VS Code Server&amp;rdquo; inside the container.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Bind mounts to our local directory - Once we load up the dev container, all our local files will need to be available in VS Code somehow.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;So how to these get in the container? We don&amp;rsquo;t have to do anything to deal with these two issues. This is part of the magic that the VS Code Dev Container extension is doing for us. After the container is created, the extension:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;installs the server binary, and starts it&lt;/li&gt;
&lt;li&gt;bind mounts the local workspace to &lt;code&gt;/workspaces/&amp;lt;your-folder-name&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;And sets that as the WORKDIR in the container&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="lets-go"&gt;Let&amp;rsquo;s go&lt;/h3&gt;
&lt;p&gt;Okay, with the &lt;code&gt;Dockerfile.dev&lt;/code&gt; and &lt;code&gt;devcontainer.json&lt;/code&gt; in place, we&amp;rsquo;re now ready to launch our devcontainer.&lt;/p&gt;
&lt;p&gt;In the VSCode command pallet, run &lt;code&gt;Dev Containers: Reopen in container&lt;/code&gt;. The first run will take a few moments since the container has to be built first, but then it should look something like this:&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screenshot-2026-01-09-at-17.49.40.png" alt=""&gt;&lt;/p&gt;
&lt;p&gt;The big clue that you&amp;rsquo;re in the dev container now is the blue message in the bottom left corner. Most everything that we could do in the local environment we can do here in the container - for example editing code and running it.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screenshot-2026-01-09-at-17.54.43.png" alt=""&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screenshot-2026-01-09-at-17.54.53.png" alt=""&gt;&lt;/p&gt;
&lt;h3 id="extensions"&gt;Extensions&lt;/h3&gt;
&lt;img src="https://blog.iankulin.com/images/screenshot-2026-01-09-at-18.05.45.png" width="427" alt=""&gt;
&lt;p&gt;If you have a look at your VS Code extensions while working in this dev container, you&amp;rsquo;ll see that some are still installed, but others are now greyed out. Some extensions only effect the UI (&amp;ldquo;UI Extensions&amp;rdquo; - listed under &amp;ldquo;Local - Installed&amp;rdquo;) so they live in the local VS Code, others have functionality that needs to run in the workspace environment so they (&amp;ldquo;Workspace extensions&amp;rdquo;) need to live in the VS Code server part.&lt;/p&gt;
&lt;p&gt;Any UI Extensions you had installed before will still be there since they live in the local VS Code, but they others will be greyed out and unavailable unless you install them into the dev container.&lt;/p&gt;
&lt;p&gt;In the image here you can see my &amp;ldquo;vscode-icons&amp;rdquo; and &amp;ldquo;vscode-pdf&amp;rdquo; which only effect how things are displayed are both still available, but &amp;ldquo;Beancount&amp;rdquo; &amp;amp; &amp;ldquo;Cline&amp;rdquo; that need access to files need to be installed in the container if I want to use them on this project.&lt;/p&gt;
&lt;p&gt;We can click on the &amp;ldquo;Install in Dev Container&amp;rdquo; button for any of these, and it will be installed into the dev container. I need ESLint for this project so I&amp;rsquo;ll could that - then it will appear in the &amp;lsquo;Dev Container&amp;rsquo; tab. This is a good way of mimicking the normal workflow for users, but this extension is only persisted in the container while it exists - If we make any changes to the &lt;code&gt;dockerfile&lt;/code&gt; or &lt;code&gt;devcontainer.json&lt;/code&gt; VS Code will rebuild the container and the extension will be gone again.&lt;/p&gt;
&lt;p&gt;If we want a workspace extension, a more persistent way to install it is to add it to our &lt;code&gt;devcontainer.json&lt;/code&gt;&lt;/p&gt;
&lt;h3 id="adding-extensions-to-devcontainerjson"&gt;Adding extensions to devcontainer.json&lt;/h3&gt;
&lt;p&gt;Extensions added this way will be the same for anyone who uses our dev container definition (which is what I&amp;rsquo;m calling the combined &lt;code&gt;dockerfile&lt;/code&gt; and &lt;code&gt;devcontainer.json&lt;/code&gt;), including if they just clone the project from git. In fact, this was the original intention of dev containers - to have a fully reproducible development environment that is stored with its project.&lt;/p&gt;
&lt;p&gt;Let&amp;rsquo;s add a couple of extensions.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#d8dee9;background-color:#2e3440;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;{
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;name&amp;#34;: &amp;#34;Node.js Dev Container&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;build&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;dockerfile&amp;#34;: &amp;#34;Dockerfile.dev&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; },
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;customizations&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;vscode&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;extensions&amp;#34;: [
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;dbaeumer.vscode-eslint&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;esbenp.prettier-vscode&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; ]
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; },
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;forwardPorts&amp;#34;: [
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; 3000
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; ],
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &amp;#34;postCreateCommand&amp;#34;: &amp;#34;npm install&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;If you make these changes in VS Code, it will probably pop up and ask you if it can rebuild the container, otherwise open the command palette and select &amp;ldquo;Dev Containers: Rebuild Container&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;You might be wondering where we get the extension id&amp;rsquo;s from (like &lt;code&gt;dbaeumer.vscode-eslint&lt;/code&gt;) The easiest way to to right click on one in the extension list and select &amp;ldquo;Copy Extension ID&amp;rdquo;. It&amp;rsquo;s also listed on the extension web page.&lt;/p&gt;
&lt;p&gt;&lt;img src="https://blog.iankulin.com/images/screenshot-2026-01-10-at-15.23.47.jpg" alt=""&gt;&lt;/p&gt;
&lt;h3 id="finally"&gt;Finally&lt;/h3&gt;
&lt;p&gt;So that&amp;rsquo;s the basics of getting a simple dev container set up. The code for this is on &lt;a href="https://github.com/IanKulin/devcont-demo"&gt;GitHub here&lt;/a&gt;. There&amp;rsquo;s a crucial issue we haven&amp;rsquo;t solved though - how to pull in your ssh keys for pushing the code to external repositories. We&amp;rsquo;ll deal with that in a future post.&lt;/p&gt;</description></item></channel></rss>