Dev Containers: A Beginner's Guide

As someone with a background in development engineering, I appreciate the value of having the proper resources to efficiently accomplish the work. I have always hated unnecessary complexities of setting up environments. That's why I'm excited to bring you this guide on how to create your first devcontainer.json file.

Following the next steps you can easily and iteratively build the perfect devcontainer.json file for your project, tailored to your unique needs and preferences.

What is a Devcontainer.json File?

Before diving into the step-by-step process, let's define what a devcontainer.json file is and why you want to create one.

At its core, a devcontainer.json file specifies the environment for your VS Code Remote Development environment, including everything from the development language and tools to the runtime.

By creating a devcontainer.json file, you can ensure that your development environment remains consistent across all machines, making it easier to develop, test and debug your applications.

With Daytona's native support for Dev Container, creating a comprehensive development environment with all the necessary tools and libraries has never been easier.

If you're curious about the differences between Devfiles, you can dive deeper into the topic by reading our latest article: "Devfiles and Development Containers: Understanding the Differences".

Step 1: Start Simple

The first step in creating a devcontainer.json is to start with defining the simplest possible app.

To create a Dev Container spec, you need to create a new file named devcontainer.json, which will be located inside the .devcontainer folder.

This super simple Dev Container only requires three fields: name of application, docker-compose.yaml, and workspace folder. From there you can build and customize your own devcontainer.json file.

{
  "name": "Simplest complex app",
  "dockerComposeFile": "docker-compose.yaml",
  "service": "app",
  "workspaceFolder": "/workspaces/simplexity"
}

Once you have successfully created this basic devcontainer.json file, you can start to add in additional configurations and features that make your development process more efficient and effective.

Step 2: Configure Tool-Specific Properties

In addition to specifying the basic environment variables, you can also configure tool-specific properties within your devcontainer.json file. This includes things like which extensions you want to be installed when the container is created and any additional settings that are specific to your development environment.

"customizations": {
    "vscode": {
        "extensions": [
            "dbaeumer.vscode-eslint",
            "esbenp.prettier-vscode",
            "nrwl.angular-console",
            "astro-build.astro-vscode",
            "unifiedjs.vscode-mdx"
        ]
    }
},

Note that the example snippet shown above installs several extensions once the container is created.

Step 3: Add in Additional Features

Now that you have the basic configurations and tool-specific properties of your devcontainer.json in place, you can start to add in additional features. There are a number of features that are pre-built, such as common-utils, docker-in-docker, go, and node. You can easily integrate these features into your own devcontainer.json file with a few configuration fields:

"features": {
    "ghcr.io/devcontainers/features/common-utils:1": {
        "installZsh": "true",
        "username": "codehero",
        "uid": "1000",
        "gid": "1000",
        "upgradePackages": "false"
    },
    "ghcr.io/devcontainers/features/docker-in-docker:2.0.0": {
        "version": "20.10.21",
        "moby": true,
        "dockerDashComposeVersion": "v2"
    },
    "ghcr.io/devcontainers/features/go:1.1.0": {
        "version": "1.19.3"
    },
    "ghcr.io/devcontainers/features/node:1.1.1": {
        "version": "18.12.1"
    }
},

In this example, the devcontainer.json file installs Common Utils, Docker-in-Docker, Go, and Node as additional features.

Step 4: Forward Your Ports

As you continue to build out your devcontainer.json file, you may find that you need to add more port forwarding. To do this, simply add new entries to the forwardPorts field in your devcontainer.json file, as shown below:

"forwardPorts": [
    8080,
    "pgadmin:80",
    "rabbitmq:15672",
    "db:5432"
]

This specifies that ports 8080, 80, 15672, and 5432 should be exposed within the container.

Step 5: Initialize, Post Create, and Post Start Commands

In addition to configuring the development environment, you can also specify initialization, post-create, and post-start commands that will be run automatically when the container is created or started.

Here's an example of how this looks in a devcontainer.json file:

"initializeCommand": "test -f .env.local || touch .env.local",

"postCreateCommand": {
    "swag": "go install github.com/swaggo/swag/cmd/swag@v1.8.10"
},

"postStartCommand": "yarn",

The initializeCommand specifies a command to run before code runs. The postCreateCommand installs a Swag package for generating documentation, while the postStartCommand installs Yarn.

To take advantage of your updated Dev Container configuration, simply recreate your workspace in Daytona.

Conclusion

By following the steps outlined above, you can use create a fully customized, efficient, and effective devcontainer.json file that meets your unique development needs. Start simple and iterate as needed, and you'll find that you can create the perfect development environment for your projects.

Remember, a well-designed development environment can increase productivity, reduce errors, and make the development process more enjoyable. So don't be afraid to invest some time and effort into building the perfect devcontainer.json file for your projects today.

Bonus Tip: Use of ChatGPT to Clarify or Improve Your Devcontainer

Don't cringe. But you can use ChatGPT to clarify or improve your Dev Container! ChatGPT can provide guidance and help you create the perfect Devcontainer for your project if you have questions about the syntax or want to explore additional features.