Etienne MENOU

Dev Containers offer a consistent and reproducible development environment, ensuring uniformity across all developers’ setups. By isolating the development environment from the host machine, they help prevent conflicts and enhance security. Additionally, they ensure that all necessary tools, libraries, and dependencies are available and properly configured

Requirements

1. Docker: used to create and manage the containerized development environment
2. VS Code with Dev Containers extension
3. WSL2. Optional but offers benefits like improved file system performance, Linux compatibility, and seamless integration with Docker. You can also check your git configuration.

Configuration

You need a .devcontainer folder in your project with a devcontainer.json file that defines the development environment. You can create one from scratch or use a predefined dev container configuration. To do this, access the Visual Studio Code Command Palette (Ctrl+Shift+P) then type Add Dev Container Configuration Files and choose the definition you want to use. Note that for performance and compatibility issues, it is better to run a WSL project from the home folder.

devcontainer.json:

{
    "name": "EtnMn website",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "remoteUser": "node",
    "features": {
        "ghcr.io/devcontainers-contrib/features/pnpm:2": {}
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "astro-build.astro-vscode",
                "EditorConfig.EditorConfig",
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                "bradlc.vscode-tailwindcss"
            ]
        }
    },
    "mounts": [
        "type=bind,source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,readonly"
    ]
}

Let’s break down the different parts of this JSON object:

• name: Specifies the name of the development container. This name is displayed by VS Code
• build: Specifies the Dockerfile to use for building the development container. For simplicity and faster setup, you can instead use the property image to use a pre-built image
• remoteUser: Specifies the user’s name in the development container
• features: Installs tools and languages from a pre-defined set of Features or even your own.
• customizations/vscode: Customizes to the Visual Studio Code editor inside the development container. In this case, it includes a list of extensions to install.
• mount: Defines file system mappings to be used in the development container. In this case, it mounts the local SSH directory to the .ssh directory inside the container. This allows the container to access MSL SSH keys in order to commit on Github by SSH.

Run the container

Once you start VS Code from WSL, you’ll see a message about Installing VS Code Server. It allows you to use Visual Studio Code on your Windows machine while seamlessly interacting with the WSL environment.

You can run the container by selecting VS Code command Dev Containers: Reopen in Container. A shortcut is also available in the bottom left corner of the IDE. Once the build is complete, VS Code will reopen the project inside the container and install extensions. You can now start coding.