Cloud Development Preview Mode is a derivative capability of cloud-native development. In this mode, clicking the Cloud Native Development button will not open the WebIDE but will directly start and open the preview page, providing a faster preview experience.

Notes

1. This feature is in beta; related configurations and usage methods are subject to change in the future.
2. Preview Mode does not support opening WebIDE. You can use Custom Buttons to define a button entry that opens Cloud Development Mode (which supports WebIDE).
3. To use SSH connections, please install openssh in the image yourself.
4. Preview Mode does not support proxy functionality. The $CNB_VSCODE_PROXY_URI environment variable is not available in this mode. If you need to use a proxy, please use the standard Cloud Development Mode.

How to Configure?

.cnb.yml

$:
  vscode:
    - docker:
        build: .ide/Dockerfile
      services:
        # If the launch command requires using docker or docker compose commands, the docker service must be listed before the vscode service
        - docker
        - name: vscode
          options:
            # Enable Preview Mode
            onlyPreview: true
            # Command to start the business service port; the port must be started on 8686
            launch: node index.js
            # Keep-alive timeout in milliseconds. Default is 10 minutes (no heartbeat detected, i.e., no HTTP connection detected in the dev environment) before shutting down the dev environment.
            keepAliveTimeout: 10m
            # Whether to use daemon mode. Default is false (non-daemon mode).
            # true: Start in daemon mode, meaning the launch command starts the preview business service directly in the background.
            # false: Start in non-daemon mode. When executing the launch command to start the preview business service, logs are visible, and the process waits for the launch command to complete and exit proactively before continuing subsequent steps.
            # Recommended to set to false, allowing users to implement their own logic for the service to run in the background after successful startup, enabling viewing of business startup logs for easier troubleshooting.
            daemon: true
            # Whether to backup/restore user data (only effective in Preview Mode). Default is false, meaning no backup or restore.
            # When set to true: restore previous user roaming data and uncommitted changes on startup, periodically backup during runtime, backup user roaming data and uncommitted changes on shutdown.
            backup: true

      # Tasks executed after the development environment starts
      stages:
        - name: ls
          script: ls -al

Parameter Details

onlyPreview

• Type: Boolean
• Description: Whether to enable Preview Mode only.
• Effect: When set to true, clicking the Cloud-Native Development button will open the preview page instead of WebIDE. WebIDE is not supported. To use SSH connections, you need to install openssh in the image yourself.

launch

• Type: String
• Description: The command to start the business service.
• Note: The business service must be started on port 8686.
• Examples: node index.js, npm start, python app.py, etc.

keepAliveTimeout

• Type: Number | String (unit defaults to: milliseconds)
• Default Value: 600000 (ms, 10 minutes)
• Note: The offline keep-alive time for the development environment. If no HTTP connection is detected within the development environment for the specified duration, the environment will automatically shut down.
• Example: 3600000 represents 1 hour.

You can directly write a number to indicate the duration in milliseconds, or use a string format with units, such as 10m for 10 minutes. The following units are supported:

• ms: milliseconds (default)
• s: seconds
• m: minutes
• h: hours

daemon

• Type: Boolean
• Default Value: false
• Description: Configuration for the process startup mode:
  • true (Daemon mode): The service started by the launch command runs directly in the background.
  • false (Non-daemon mode): The startup logs of the launch command are visible. The process waits for the service to start successfully and exit proactively before continuing subsequent steps.

backup

• Type: Boolean
• Default Value: false
• Description: Whether to backup/restore user data (only effective in Preview Mode). When set to true:
  • On startup: Restore previous user roaming data and uncommitted code changes.
  • During runtime: Periodically backup uncommitted code changes.
  • On shutdown: Backup user roaming data and uncommitted code changes.

Usage Process

1. Create a .cnb.yml file in the project root directory.
2. Configure it according to the example above.
3. Ensure the business service listens on port 8686.
4. Click the Cloud-Native Development button.
5. The system will automatically start the development environment and open the preview page.

How to Enable SSH Connections in Preview Mode?

You need to install openssh in your custom development environment. Here is an example:

Custom development environment Dockerfile:

# .ide/Dockerfile

# Replace node with your desired base image
FROM node:20

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

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

Previous pageUsage Tips

Next pageVSCode/Cursor Client