Custom Development Environment

About 637 wordsAbout 2 min

Specifying Development Environment via Docker Image

You can specify the development environment image by writing a Workspaces event pipeline in .cnb.yml and setting pipeline.docker.image.

.cnb.yml
$:
  vscode:
    - docker:
        # Specify the development environment image, which can be any accessible image.
        # If the specified image has code-server installed, the development environment will start in single-container mode
        # If the specified image does not have code-server installed, the development environment will start in double-container mode
        # The following image is the CNB default development environment image with code-server installed, which will start in single-container mode
        # You can replace it with other images as needed
        image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      # Tasks to execute after the development environment starts
      stages:
        - name: ls
          script: ls -al

Customizing Development Environment via Dockerfile

If specifying an image doesn't meet your needs, you can write a custom Dockerfile to define the development environment.

Create a .ide/Dockerfile file in the repository root to freely customize your development environment.

When no custom startup pipeline is defined, the default pipeline is used to create the development environment. The default pipeline prioritizes using .ide/Dockerfile to build the base image.

Note: The default pipeline configures both the default image and .ide/Dockerfile. If .ide/Dockerfile doesn't exist or the build fails, it falls back to the default image. If the environment doesn't behave as expected, check the build logs in the prepare stage to confirm whether .ide/Dockerfile was built successfully.

# .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 waderyan.gitblame \
  && code-server --install-extension mhutchie.git-graph \
  && code-server --install-extension donjayamanne.githistory \
  && code-server --install-extension tencent-cloud.coding-copilot \
  && echo done

# 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

If you need to customize both the development environment and the startup process, you can write both .ide/Dockerfile and .cnb.yml.

Customizing the Startup Pipeline

.cnb.yml
$:
  vscode:
    - docker:
        build: .ide/Dockerfile
        # Optionally define both build and image
        # In this case, .ide/Dockerfile will be used to build the image first
        # If .ide/Dockerfile build fails, the image specified will be used to ensure the environment can start successfully
        # image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      # Tasks to execute after the development environment starts
      stages:
        - name: ls
          script: ls -al

Customizing the Development Environment

# .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 waderyan.gitblame \
  && code-server --install-extension mhutchie.git-graph \
  && code-server --install-extension donjayamanne.githistory \
  && code-server --install-extension tencent-cloud.coding-copilot \
  && echo done

# 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