Devcontainers for Typescript

Setting up a consistent development environment shouldn’t feel like herding cats. With devcontainers, you can define a ready-to-code workspace that runs anywhere, locally or in the cloud. If you're building Typescript projects and are tired of the “works on my machine” problem, devcontainers offer a clean, reproducible setup that gets you writing code faster and spending less time debugging configuration issues. Let’s walk through how to get started.

Let's pick up where we left off in Dockerfile for Typescript.

├── .dockerignore
├── .gitignore
├── .nvmrc
├── docker-compose.yml
├── Dockerfile
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
└── yarn.lock

Create the devcontainer.json

Now we need to create a .devcontainer directory and add a devcontainer.json file to use our Dockerfile and docker-compose.yml.

mkdir .devcontainer

Now, create the devcontainer.json file

{
  "name": "devcontainer-typescript-example",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/app",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.vscode-typescript-next"
      ]
    }
  }
}

I've included some vscode extensions as well. Add any others here that you want, if you are a vscode user.

Test using devcontainer CLI

For more details on the devcontainer CLI

Install it with npm

npm install -g @devcontainers/cli

Build the devcontainer

devcontainer build --workspace-folder .

And run it.

devcontainer up --workspace-folder .

You can log into it from the command line if you want.

devcontainer exec --workspace-folder . bash

To shut it down, run

docker compose down

VSCode

If you use vscode you can open the project

code .

and then "Reopen in Container"

Develop as usual.

I've created an example repository on github https://github.com/markcallen/devcontainer-typescript-example

Now you have a devcontainer workspace all set up.