Open Source Dev Containers for macOS with Colima and DevPod

Rich Burroughs

June 7, 2023

9 Minute Read

This is some text inside of a div block.

Colima is a an open source project for running Docker containers on macOS and Linux, which has become popular for two big reasons. First, Hyperkit, one of the previous methods for running Docker containers on Macs, does not work on the Apple Silicon based Macs (Macs with the M1 and M2 chips). Second, Docker changed its license for Docker Desktop last year, and it's no longer free for all users. You can read about who can still use Docker Desktop for free here. Docker Desktop can also be very resource intensive, and, of course, some users just prefer to use open source software, which is another big reason to try Colima.

DevPod is a new project that allows users to run open source dev containers and VMs on any infrastructure. Think of DevPod as an open source alternative to products like GitHub Codespaces, but it's client only and can run everywhere. DevPod uses a provider model, like Terraform, which means it can support many different kinds of backing infrastructure for running the dev containers. Out of the box, it already comes with providers for local Docker containers, AWS, GCP, Azure, and more. DevPod uses the Dev Containers standard to configure the dev environments, so it's compatible with VS Code, Codespaces, and other tools which use that standard. DevPod consists of a Desktop app and a Command Line Interface (CLI).

In this tutorial we'll be using Colima to set up a local Docker environment, and then using DevPod to launch a Python-based dev container.

Requirements

A Mac, either Apple Silicon based or Intel based. DevPod also runs on Windows and Linux, but this tutorial is aimed at macOS. For using DevPod on those other platforms, see the quickstart.

1. Install Colima

If you are using Homebrew on your Mac, you can install Colima from a terminal window with this command:

brew install colima

MacPorts users can install Colima with this command:

sudo port install colima

Nix is also supported for installing Colima.

nix-env -iA nixpkgs.colima

For other questions about Colima, see the README on GitHub.

2. Install DevPod

You can download the installer for the latest version of the DevPod macOS Desktop app for Apple Silicon Macs here. If you have an Intel-based Mac, you can download it here instead.

Open the .dmg file and drag the DevPod icon to the Applications folder.

3. Start Colima

Next, let's get your local Docker environment running, using Colima. If you are running Docker Desktop or another app that provides a Docker runtime like Rancher Desktop, quit that app. Then, run this command:

colima start

You should see output like this, as well as some temporary output that will flicker by:

INFO[0000] starting colima INFO[0000] runtime: docker INFO[0000] preparing network ... context=vm INFO[0000] creating and starting ... context=vm INFO[0021] provisioning ... context=docker INFO[0022] starting ... context=docker INFO[0027] done

Colima can be used in different ways, but by default it will run Docker in a QEMU virtual machine. You don't need to understand QEMU to use Colima, but you can check out the QEMU website if you would like to learn more about it.

If you're ever wondering if Colima is already running, you can use the status subcommand to check:

colima status

Now you can run Docker commands like docker ps and they will connect to your Docker environment that Colima created.

4. Start the DevPod app and launch a workspace

Find the DevPod app in your Mac's Applications folder and double click it. The first step is to configure a provider. Providers are the infrastructure that your dev container will run on. Click the Providers tab in the navigation bar (it's on the left by default). Then click Add Provider.

We will be using our local Docker runtime provided by Colima for this tutorial, so click Docker.

Leave the Advanced Options set to the defaults. You can check the "Set as default" checkbox if you think you'll mainly be using a local Docker runtime with DevPod, but that's optional. And you can always update that setting later if you change your mind.

Then click the Add Provider button.

The next step is to add a workspace. A workspace in DevPod is a containerized development environment. It holds the source code of a project as well as the dependencies to work on that project, such as a compiler and debugger.

Click the Workspaces tab on the left navigation bar and then the Create Workspace button.

Next we will add the source code repository that the workspace will use. Source code repositories that you use with DevPod can be local on your Mac, or a remote Git repo.

For this tutorial we'll use one of the example repos, the Python example. Click the blue and yellow Python logo, the first icon in the list.

Next, select the Provider. It should be set to docker, the one you just configured. For Default IDE, let's leave it set to the default, VSCode Browser. You can see, though, that DevPod supports local VS Code as well as a number of other IDEs. You can change the IDE used in the workspace settings later, or even when you launch a previouly created workspace.

Set the Workspace Name to colima-tutorial and leave Prebuild Repository blank.

Then, hit the Create Workspace button.

At this point DevPod will build the dev container. A window will open that will show you the output.

Building the container is required the first time you launch a workspace, so that first time launching it will be slower.

Next DevPod will launch VS Code in your browser.

At this point you're ready to begin coding.

5. Examine the devcontainer.json file

Before we get started making changes in the code, let's talk a bit more about the Dev Containers standard. An interesting aspect of what just happened is that we launched an example repo that Microsoft created to showcase using dev containers, with no modifications. Because DevPod uses the open Development Containers standard that Microsoft created for its tools like VS Code and GitHub Codespaces, we were able to pull in that repo and use it with DevPod as is. The power of open standards means we can use this same exact code repo with DevPod and Codespaces both, and if we ever wanted to switch between them, it would be seamless. If you are someone who worries about vendor lock-in, this is great to know.

Let's look at the .devcontainer.json file, which is the configuration file for development containers. Go to your browser window that has VC Code running. Click the .devcontainer directory in the upper left of the window, and then click on the devcontainer.json file.

As you can see, multiple things are configured in this file. First, it specifies the image to use, a Python 3 container that is hosted by Microsoft. Second, it makes sure a VS Code extension is present. Third, it sets up a port forward for port 9000, so users can view the Python app in their web browsers. And fourth, it specifies a postCreateCommand, a command that will be run after the container is created. In this case that postCreateCommand installs the dependencies for this Python app which are listed in the requirements.txt file.

There are many other things that can be configured in the devcontainer.json file. You can learn more on the Development Containers standard website.

Note that while using a devcontainer.json file with DevPod is highly recommended, if the repo you're using does not contain that file, DevPod will make it's best guess as to how to handle things.

6. Launch the example Flask app and make a change

We'll open a terminal window in VS Code to get this Python/Flask app running. To do that, select the hamburger menu in the top of the left nav bar (the icon at the top with the three horizontal lines), then click on Terminal, and New Terminal.

VS Code will open a terminal window at the bottom of the screen.

Run the Flask app in that terminal with this command:

python -m flask run --port 9000 --no-debugger --no-reload

You should see this line in the output you receive:

Running on http://127.0.0.1:9000

Now, open a new tab in your browser, and go to that URL (http://127.0.0.1:9000).

You should get this output:

A web browser window that says "VS Code can do that? Yes it can."

Click back on the tab with VS Code running, and click on the app.py file to open it. You'll see this code:

from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return app.send_static_file("index.html")

So this app is just sending the contents of the index.html file. Click on the directory called static and then on the index.html file inside of it. It will look like this:

<html> <head> <title>VS Code Rocks!</title> </head> <body> <h1>VS Code can do that?</h1> <p>Yes it can!</p> </body> </html>

Let's change that <h1> line to read "VS Code and DevPod can do that?" And change the <p> line to say "Yes they can!" Then go back to the hamburger menu, and select File, then Save.

Switch back to your other tab with the Flask app running, and hit Reload in your browser. You should see the text has updated.

A web browser window that says "VS Code and DevPod can do that? Yes they can."

7. Cleanup

Cleaning up is easy with DevPod. Go back to your workspace and click the button with the three vertical dots, then click Delete. That will delete the running dev container from Colima and remove the workspace.

Close the two browser tabs we opened, and stop Colima by running the colima stop command. That's it.

8. Video

We also have a demo video showing off what we went over in this blog post on our YouTube channel.

9. Conclusion

Obviously this was a very simplified tutorial. If you were really developing, you'd want to commit your changes to the Git repo. To make that process easier, you could inject your Git credentials when the dev container is created. See the docs for more info on that.

We also relied on the DevPod desktop app for this tutorial, but if you prefer using a command line, there is also a CLI for DevPod. Go to the Settings tab in the desktop app and click "Add CLI to Path" to install the CLI. You can find a quickstart for using the CLI here in the docs.

Some other helpful resources: