Scenario

• We need to create a nodejs and typescript development environment
• We laso need azure-cli and powershell to be installed in that development environment

devcontainer.json

Create devcontainer.json from scratch (manually)

• Create a folder “tsnode-devcontainer”
• Inside “tsnode-devcontainer” folder, create a folder named “.devcontainer”
• Inside “.devcontainer” folder, create a file named “devcontainer.json”

devcontainer.json

{
	"name": "Node.js & TypeScript",
	
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
	
	"features": {
		"ghcr.io/devcontainers/features/azure-cli:1": {},
		"ghcr.io/devcontainers/features/powershell:1": {}
	}

}

Create devcontainer.json using VSCode

• Create a folder “tsnode-devcontainer”
• Open VSCode > File > Open folder > “tsnode-devcontainer”
• Add Dev Container Configuration Files:
  • Click “Open a remote window” (bottom left ‘><’ icon, green color) > “Add Dev Container configuration files”
  • Or View > Command Palette > Dev Containers: Add Dev Container Configuration Files
• Search “typescript” (if not shown, click “Show All”) > Select “Nodejs and typescript” > Select nodejs version
• Select feature:
  • Search “azure cli” > Select
  • Search “powershell” > Select
  • “2 selected” will be shown > Click Ok
• Click “Kepp defaults”
• ”.devcontainer/devcontainer.json” will be created inside “tsnode-devcontainer” folder

Run devcontainer

Edit the contents of the devcontainer.json as required, the launch devcontainer as following:

• VS Code > File > open folder > tsnode-devcontainer
• View > Command Palette > Dev Containers: Reopen in Container
• Or Click “Open a remote window” (bottom left ‘><’ icon, green color) > Reopen in Container

Notes:

• The local folder in which code resides will be mounted as volume in the running dev conatiner
• Every time we edit the contents of the devcontainer.json, we need to execute “Dev Containers: Rebuild Container”

Stop devcontainer

• Click on devcontainer (bottom left ‘><’ icon, green color)
• Close remote connection

Links

• List of images to be used in devcontainer.json: https://github.com/devcontainers/images/tree/main/src