How to combine Docker and VSCode to reach development nirvana

One of the best features in VS Code, and my personal favourite is called Remote Containers. What it does is open the folder you’re working on inside a container and then connect to it, so that you can, for example, run your jekyll site on windows without having to install ruby system-wide. Because all the development is done inside the container, you don’t have to worry about having multiple versions of node or python cluttering your machine.

This is especially useful if your main OS is Windows, as getting set up with some languages is notoriously tougher there.

Working in a devcontainer has also the advantage that all the settings can be committed into source control, so you can share the exact same development environment with the rest of your team. No more 15-step procedure to follow to set up the local dev environment!

Getting started is really simple:

Install the Remote - Containers extension
Press F1 to open the command palette
Run “Open folder in container” command
Select “From a predefined container definition”
Select the most appropriate container image.

This will create:

A .devcontainer folder in your project, containing:
A dockerfile for the development container
A file named devcontainer.json that is mostly used to define any ports that should be forwarded to the host

You can now open the integrated terminal and type commands directly in your container!

An example: this website

I love the simplicity that comes with static site generators, and jekyll is by far the most popular choice. Using a development container setup allows me to edit and test any change on all my computers, without having to install ruby, bundler or any of jekyll’s dependencies.

This is the dockerfile I use for my jekyll devcontainer. It’s a slightly modified version based on the official Microsoft one from some time ago; I had to add a line to install zlib1g-dev otherwise it wouldn’t work 😅.

FROM debian:latest # Avoid warnings by switching to noninteractive ENV DEBIAN_FRONTEND=noninteractive # This Dockerfile adds a non-root 'vscode' user with sudo access. However, for Linux, # this user's GID/UID must match your local user UID/GID to avoid permission issues # with bind mounts. Update USER_UID / USER_GID if yours is not 1000. See # https://aka.ms/vscode-remote/containers/non-root-user for details. ARG USERNAME=vscode ARG USER_UID=1000 ARG USER_GID=$USER_UID # Configure apt and install packages RUN apt-get update \ && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \ # # Install vim, git, process tools, lsb-release && apt-get install -y \ git \ openssh-client \ less \ # # Install ruby && apt-get install -y \ make \ build-essential \ ruby \ ruby-dev \ # # Install jekyll && gem install \ bundler \ jekyll \ && apt-get install -y zlib1g-dev \ # # Create a non-root user to use if preferred - see https://aka.ms/vscode-remote/containers/non-root-user. && groupadd --gid $USER_GID $USERNAME \ && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \ # [Optional] Add sudo support for the non-root user && apt-get install -y sudo \ && echo $USERNAME ALL=$root$ NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\ && chmod 0440 /etc/sudoers.d/$USERNAME \ # # Clean up && apt-get autoremove -y \ && apt-get clean -y \ && rm -rf /var/lib/apt/lists/* # Switch back to dialog for any ad-hoc use of apt-get ENV DEBIAN_FRONTEND=dialog

Now, when I open the repository in Visual studio code, I just have to run bundle exec jekyll serve in the integrated terminal to run it. The container exposes port 4000 so I can just open http://localhost:4000 in my browser and preview the changes. What’s more, if port 4000 is already used by another program, when clicking on the localhost link in the terminal, VS Code will transparently open the site on a different port!

Found this useful? Want to add something? Reach out on twitter!