Devcontainer Setup

Automate and integrate Devcontainer Setup for consistent development environments

Devcontainer Setup is a community skill for configuring development container environments, covering devcontainer.json configuration, Dockerfile creation for development images, feature installation, VS Code extension integration, and multi-service compose setups for containerized development workflows.

What Is This?

Overview

Devcontainer Setup provides patterns for creating reproducible development environments using the Dev Containers specification. It covers devcontainer.json configuration that defines the container image, port forwarding, environment variables, and lifecycle hooks, Dockerfile creation that builds custom images with project-specific toolchains and dependencies, feature installation that adds modular capabilities like language runtimes, CLIs, and database clients without modifying the Dockerfile, VS Code extension integration that pre-installs editor extensions for the team, and multi-service compose setups that run application dependencies like databases and message queues alongside the development container. The skill enables teams to share identical development environments across all contributors.

Who Should Use This

This skill serves development teams standardizing their local environment setup, DevOps engineers creating containerized development workflows, and open source maintainers providing ready-to-use contributor environments.

Why Use It?

Problems It Solves

New team members spend hours configuring development tools and dependencies to match the project requirements. Environment differences between developers cause works-on-my-machine bugs that waste debugging time. Upgrading a shared tool version requires every team member to update their local setup manually. Running application dependencies locally conflicts with other projects using different versions.

Core Highlights

Container configurator generates devcontainer.json with image, features, and lifecycle hooks. Image builder creates Dockerfiles optimized for development with layer caching for fast rebuilds. Feature manager adds language runtimes and tools as composable modules. Compose orchestrator runs databases and services alongside the development container.

How to Use It?

Basic Usage

// .devcontainer/devcontainer.json
{
  "name": "Project Dev",
  "image":
    "mcr.microsoft.com/"
    + "devcontainers/"
    + "typescript-node:20",
  "features": {
    "ghcr.io/devcontainers"
    + "/features/"
    + "docker-in-docker:2":
      {},
    "ghcr.io/devcontainers"
    + "/features/"
    + "github-cli:1":
      {}
  },
  "forwardPorts": [
    3000, 5432
  ],
  "postCreateCommand":
    "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer."
        + "vscode-eslint",
        "esbenp."
        + "prettier-vscode"
      ]
    }
  }
}

Real-World Examples

services:
  app:
    build:
      context: .
      dockerfile:
        .devcontainer/
        Dockerfile
    volumes:
      - .:/workspace:cached
    ports:
      - "3000:3000"
    depends_on:
      - db
      - redis
    environment:
      DATABASE_URL:
        postgres://dev:dev
        @db:5432/app
      REDIS_URL:
        redis://redis:6379

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: dev
      POSTGRES_PASSWORD:
        dev
      POSTGRES_DB: app
    volumes:
      - pgdata:/var/lib/
        postgresql/data
    ports:
      - "5432:5432"

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

volumes:
  pgdata:

Advanced Tips

Use the postCreateCommand for one-time setup like npm install and the postStartCommand for tasks that should run every time the container starts. Mount SSH keys and Git configuration from the host using the mounts property to enable seamless Git operations inside the container. Layer the Dockerfile to separate system dependencies from user tooling so that changes to tools do not invalidate the base layer cache.

When to Use It?

Use Cases

Create a standardized development environment for a team project with all required tools pre-installed. Set up a multi-service compose environment with database and cache running alongside the development container. Provide a one-click contributor environment for an open source project using GitHub Codespaces.

Related Topics

Dev containers, Docker, VS Code, development environments, Docker Compose, and GitHub Codespaces.

Important Notes

Requirements

Docker or a compatible container runtime installed on the host machine. VS Code with the Dev Containers extension or another compatible editor. Sufficient disk space and memory for running containerized development environments.

Usage Recommendations

Do: pin base image versions to specific tags rather than using latest to ensure build reproducibility. Use Dev Container Features for common tools instead of installing them in the Dockerfile to keep the image definition clean. Include the .devcontainer directory in version control so all contributors share the same environment.

Don't: install large development tools in the postCreateCommand which runs on every container creation and slows startup. Store persistent data inside the container filesystem which is lost when the container is rebuilt. Hardcode secrets in devcontainer.json since the file is committed to version control.

Limitations

Container-based development adds resource overhead compared to native local development particularly on machines with limited memory. File system performance for mounted volumes is slower on macOS and Windows compared to Linux hosts. Some tools that require direct hardware access or kernel modules may not work inside containers.