🚀 Day 3: DevContainers

Welcome to Day 3 of my 30 Days – 30 Tools for Developers series!
Today’s spotlight is on DevContainers — a tool that can completely change how you set up your development environment.

If you’ve ever cloned a project repo, spent hours installing the right Node version, Python packages, or databases, and still ended up with errors… this is for you.

---

💡 What are DevContainers?

A DevContainer is a fully containerized development environment defined by a devcontainer.json file. This file tells VS Code:

• Which base OS image to use (e.g., Ubuntu, Alpine, Debian)

• Which programming languages and versions to install

• Which frameworks or libraries to include

• Which databases or services to run alongside your code

• What settings and extensions to pre-install in VS Code

DevContainers are powered by the VS Code Remote – Containers extension (and also work in GitHub Codespaces).

Once set up, you can open a project in VS Code, and your complete dev environment is ready to go — no manual installs, no mismatched dependencies, no “works on my machine” drama.

---

⚡ Why Developers Use DevContainers

📦 Faster Onboarding – New contributors can start coding in minutes, not hours.
🧼 No Local Pollution – Keep your host OS clean; everything runs in the container.
🔄 Reproducibility – The environment is identical for every team member.
☁️ Cloud-Friendly – Perfect for GitHub Codespaces or cloud-based dev setups.
🧪 Safe Testing – Try new tools without breaking your main setup.

---

🛠 Example: Basic devcontainer.json

Here’s a minimal DevContainer configuration for a Node.js project:

{
  "name": "Node.js DevContainer",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  }
}

📌 How it works:

• Uses a prebuilt Node 20 base image from Microsoft.

• Automatically runs npm install after the container starts.

• Preinstalls ESLint and Prettier extensions for code quality and formatting.

---

⚙️ Advanced Example: DevContainer + Docker Compose

For real-world projects, you often need multiple services — for example, a Node.js API with MongoDB and Redis. You can combine DevContainers with Docker Compose to spin everything up at once.

devcontainer.json

{
  "name": "Node API with MongoDB & Redis",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "mongodb.mongodb-vscode"
      ]
    }
  },
  "postCreateCommand": "npm install"
}

docker-compose.yml

version: '3.8'
services:
  app:
    image: mcr.microsoft.com/devcontainers/javascript-node:20
    volumes:
      - .:/workspace:cached
    command: sleep infinity
    depends_on:
      - mongo
      - redis

  mongo:
    image: mongo:6
    restart: always
    ports:
      - "27017:27017"

  redis:
    image: redis:7
    restart: always
    ports:
      - "6379:6379"

📌 How it works:

• app: Your Node.js development environment.

• mongo: MongoDB service available on port 27017.

• redis: Redis service available on port 6379.

• When you open this in VS Code with Remote – Containers, it launches all services together so you can start coding immediately.

---

🔹 Pro Tips for DevContainers

1. Store your .devcontainer folder in the repo – This makes onboarding for collaborators instant.

2. Use the DevContainer Features registry – Add languages, tools, and databases without writing long Dockerfiles.

3. Mix with GitHub Codespaces – Get the same setup in the cloud without running Docker locally.

4. Document your DevContainer setup – Help contributors know what’s included.

---

✅ Conclusion

DevContainers are a must-have for collaborative projects, open source contributions, and cloud-based development. They remove the pain of environment setup, keep your system clean, and ensure every developer works in the same conditions.

❓ Question for you: Which tech stack would you put in your DevContainer?