> ## Documentation Index
> Fetch the complete documentation index at: https://notes.kodekloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Demo Dev Containers

> Guide to creating a devcontainer.json and configuring GitHub Codespaces to provide a consistent containerized development environment with automatic VS Code extension installation and rebuild steps

Dev Containers provide a standard, repeatable development environment so every developer on the Block Buster team uses the same tools, extensions, and runtime. In this lesson you'll create a Dev Container configuration, commit it to the repository, and use it to provision a GitHub Codespace that automatically installs the required tooling.

What you'll learn

* How to create and configure a `devcontainer.json` file
* How to provision a Codespace that uses that Dev Container
* How to add VS Code extensions to the repository Dev Container via the Extensions marketplace
* When and why to rebuild a Codespace after changing the Dev Container

Back in the repository, before creating a Codespace, open the Codespaces menu (the three dots) to configure a Dev Container. Choosing that option creates a `.devcontainer` folder at the repository root and adds a `devcontainer.json` file.

![A dark-mode GitHub repository page for a project named "block-buster," showing the file list and branch info with a Codespaces menu open. The right sidebar displays the project description and deployment details.](https://mintcdn.com/kodekloud-c4ac6d9a/eg02WB1VTlMyKKOJ/images/GitHub-Foundations-Certification/GitHub-Codespaces/Demo-Dev-Containers/github-repo-block-buster-codespaces-sidebar.jpg?fit=max\&auto=format\&n=eg02WB1VTlMyKKOJ\&q=85\&s=4bdfee5355aacd9f538e01f8f5ac784f)

## devcontainer.json — what to include

When creating `devcontainer.json` you typically:

* Give the Codespace environment a descriptive `name`
* Declare a base `image` or Dockerfile to use as the container environment
* Add editor `customizations` (for example, VS Code extensions to auto-install)
* Commit the file to your default branch so Codespaces can detect it

Below is the example `devcontainer.json` used in this lesson. It sets a name, uses a Microsoft universal container image, and automatically installs several VS Code extensions (Live Server, GitHub Copilot Chat, the Azure GitHub Copilot integration, and a Copilot code reviewer).

```json theme={null}
{
  "name": "Block Buster Codespace Environment",
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "customizations": {
    "vscode": {
      "extensions": [
        "ritwickdey.LiveServer",
        "GitHub.copilot-chat",
        "ms-azuretools.vscode-azure-github-copilot",
        "JakubKozera.github-copilot-code-reviewer"
      ]
    }
  }
}
```

Recommended devcontainer.json keys (quick reference)

| Key | Purpose | Example |
| - | - | - |
| `name` | Friendly name shown in Codespaces UI | `"Block Buster Codespace Environment"` |
| `image` | Base dev container image to pull | `"mcr.microsoft.com/devcontainers/universal:2"` |
| `build` | Build configuration when using a Dockerfile | `{ "dockerfile": "Dockerfile" }` |
| `customizations.vscode` | Extensions and VS Code settings to apply | `{"extensions":["ritwickdey.LiveServer"]}` |
| `postStartCommand` | Commands to run after the container starts | `"npm install"` |

## Create a Codespace using the Dev Container

After committing `.devcontainer/devcontainer.json` to the `main` branch, create a Codespace. The create dialog lets you select:

* Branch (for example `main`)
* Dev Container configuration (the `devcontainer.json` you added)
* Region to deploy the Codespace (choose a nearby region to reduce latency)
* Machine type (for example, 2-core or 4-core)

![A dark-themed GitHub Codespaces "Create codespace" setup screen for the repository sid-gh900/block-buster showing options for branch, dev container configuration, region, and machine type with a green "Create codespace" button. The branch is set to "main" and the region is "Southeast Asia."](https://mintcdn.com/kodekloud-c4ac6d9a/eg02WB1VTlMyKKOJ/images/GitHub-Foundations-Certification/GitHub-Codespaces/Demo-Dev-Containers/github-codespaces-create-blockbuster-main-seasia.jpg?fit=max\&auto=format\&n=eg02WB1VTlMyKKOJ\&q=85\&s=6ea33d38b9b94a3184e1ff1512089917)

When the Codespace is created it follows the Dev Container configuration:

* Pulls the specified image
* Applies declared settings
* Installs the listed VS Code extensions automatically

You can confirm installed extensions in the VS Code Extensions view inside the Codespace.

![A dark-themed Visual Studio Code/Codespaces window with the Extensions sidebar open (highlighting the "Live Server" extension) and an MCP Servers panel on the left, while a devcontainer.json file is open in the main editor area. The bottom shows the problems/output area and a chat/agent pane is visible on the right.](https://mintcdn.com/kodekloud-c4ac6d9a/eg02WB1VTlMyKKOJ/images/GitHub-Foundations-Certification/GitHub-Codespaces/Demo-Dev-Containers/vscode-codespaces-devcontainer-live-server.jpg?fit=max\&auto=format\&n=eg02WB1VTlMyKKOJ\&q=85\&s=fb77e2248ca5d30a43c165c562e96669)

## Add extensions from the Extensions marketplace

You can also add extensions directly from the VS Code Extensions marketplace while in a Codespace:

1. Open the Extensions marketplace view
2. Right-click an extension and choose "Add to devcontainer.json"
3. Codespaces appends the extension identifier to `customizations.vscode.extensions` in `devcontainer.json`

This approach helps keep the repository Dev Container in sync with the extensions the team needs.

![A dark-themed Visual Studio Code/Codespaces window open to the Extensions marketplace, showing the GitHub Copilot Chat extension page with a right-click context menu over the extension. The left sidebar lists other extensions and the right pane shows marketplace details and a chat/agent panel.](https://mintcdn.com/kodekloud-c4ac6d9a/eg02WB1VTlMyKKOJ/images/GitHub-Foundations-Certification/GitHub-Codespaces/Demo-Dev-Containers/vscode-extensions-github-copilot-chat-menu.jpg?fit=max\&auto=format\&n=eg02WB1VTlMyKKOJ\&q=85\&s=9069137f584871cb598a957076b2163c)

After editing `devcontainer.json`, rebuild the Codespace to apply changes. Rebuilding recreates the environment so the updated image, new extensions, and any configuration changes are installed and applied.

Once rebuilt, the Codespace will install all listed extensions and apply the declared configuration, ensuring all developers have the same consistent environment.

## Links and references

* Dev Containers overview: [https://code.visualstudio.com/docs/devcontainers/containers](https://code.visualstudio.com/docs/devcontainers/containers)
* Dev Containers configuration reference: [https://containers.dev/](https://containers.dev/)
* GitHub Codespaces docs: [https://docs.github.com/en/codespaces](https://docs.github.com/en/codespaces)
* VS Code Extensions marketplace: [https://marketplace.visualstudio.com/vscode](https://marketplace.visualstudio.com/vscode)

> **[Watch Video](https://learn.kodekloud.com/user/courses/github-foundation-certification/module/c4995815-313c-40eb-a9c1-aedee41abd7d/lesson/2b903f6f-f6ef-4c14-b678-5d1332b43563)**


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.