Custom Development Environment

About 540 wordsAbout 2 min

Custom Development Environment explains how to specify an image or write a Dockerfile to tailor the Workspaces environment.

When to use: when the default environment lacks tools your project needs — for example pinning a JDK or Node.js version for the team, or pre-installing an internal CLI and dependency cache so developers can start working immediately.

Specifying Development Environment via Docker Image

Write a Workspaces event pipeline in .cnb.yml and set docker.image to specify the development environment.

If the image has code-server installed, it starts in single-container mode; otherwise it starts in dual-container mode.

Two ways to specify the image are available; pick one:

Use a pre-built image (image)

.cnb.yml
$: # Fallback matching all branches not matched by glob
  vscode:
    - docker:
        image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      stages:
        - name: ls
          script: ls -al

Build via Dockerfile (build)

.cnb.yml
$: # Fallback matching all branches not matched by glob
  vscode:
    - docker:
        # Build image using .ide/Dockerfile in the repository root
        build: .ide/Dockerfile
        # image is used as a fallback when the build fails (optional)
        image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      stages:
        - name: ls
          script: ls -al

image: Use a pre-built image directly, for pre-configured image scenarios
build: Custom build via Dockerfile. Choose either this or image; you can also set image as a fallback

Customizing Development Environment via Dockerfile

If a specified image doesn't meet your needs, create a .ide/Dockerfile in the repository root to customize the development environment.

With no custom startup pipeline, the system uses the image built from .ide/Dockerfile as the base image. If the file doesn't exist or the build fails, it falls back to the default image.

# .ide/Dockerfile

# You can replace node with your required base image
FROM node:20

# Install code-server and common VSCode extensions
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension cnbcool.cnb-welcome \
  && code-server --install-extension redhat.vscode-yaml \
  && code-server --install-extension dbaeumer.vscode-eslint \
  && code-server --install-extension mhutchie.git-graph \
  && echo done

# Install CodeBuddy Code (provides the codebuddy command) to use CodeBuddy Web in the browser
# Make sure the version is >= 2.137.0 (see the "CodeBuddy Web" doc)
RUN npm install -g @tencent-ai/codebuddy-code

# Install SSH service to support accessing the development environment via VSCode Remote-SSH (and other software as needed)
RUN apt-get update && apt-get install -y git wget unzip openssh-server

# Specify character set to support Chinese input in command line (choose character set as needed)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8

Customizing Both Development Environment and Startup Process

To customize both the development environment and the startup process, write .ide/Dockerfile and .cnb.yml; the Dockerfile content is the same as above.

In .cnb.yml, enable build: .ide/Dockerfile (see the "Build via Dockerfile (build)" example above), and optionally specify image as a fallback. Full example:

.cnb.yml
$: # Fallback matching all branches not matched by glob
  vscode:
    - docker:
        build: .ide/Dockerfile
        image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      stages:
        - name: install deps
          script: npm install
        - name: dev
          script: npm run dev