Using the Extension with Visual Studio Code Dev Containers

Visual Studio Code Dev Containers offer self-contained, reproducible development environments. These Docker containers are configured for a full development experience, containing the necessary tools, runtimes, and libraries. For more information, see Create a Dev Container.

This section provides three approaches to configure a Dev Container for app development. These approaches apply to various Docker Desktop configurations. You can configure the foundational Docker image and preserve the environment within a personalized image.

Docker Desktop Configuration

Before proceeding, ensure that your Docker Desktop configuration aligns with your requirements, as it affects file access and performance.

Configuration 1: WSL-2-Disabled, Hyper-V-Enabled, File-Sharing-Enabled

  • Hyper-V is used as the virtualization backend.

  • Windows Subsystem for Linux (WSL) is disabled.

  • File sharing is enabled to provide container access to Windows files.

Note: This configuration offers better performance in some environments but requires a file-sharing setup.

Configuration 2: WSL-2-Enabled

  • WSL 2 is used as the virtualization backend.

  • File system integration between Windows and Linux-based WSL 2 environment.

Note: Both these configurations support the approaches in the following sections, but file paths and performance might vary.

Prerequisites

  • Microsoft Visual Studio Code (VS Code) with the Dev - Containers extension

  • Docker Desktop

  • Linux build (.vsix) of TIBCO Flogo® Extension for Visual Studio Code

Note: The Dev Container mode is not compatible with Mac or Windows builds.

  • A project folder (can be empty) to initialize the Dev Container.

Approach 1: Using a Predefined Microsoft Base Image

To set up a Dev Container using a predefined Microsoft base image available in VS Code, perform the following steps:

  1. Open your Flogo project (or an empty folder) in Visual Studio Code.

  2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and select Dev Containers: Open Folder in Container.

Note: If a .devcontainer folder with a devcontainer.json file does not exist, you are prompted to create one.

  1. Choose From a definition to select a configuration. Options include Docker in Docker devcontainers, Docker outside of Docker devcontainers, or Docker outside of Docker Compose devcontainers.

  2. Optional: Select the Install OSS Moby build instead of Docker CE option.

  3. Select and enable features, such as Go devcontainers, to install the Go language and the related utilities inside the container. For example, Microsoft's Dev Container .mcr.microsoft.com/devcontainers/base:bullseye.

Based on the configuration and your selections, a .devcontainer folder with a devcontainer.json file and a Dockerfile is built. You are connected to the container environment in Visual Studio Code.

  1. Ensure the Linux .vsix installer file of the extension is accessible to the container.

Note: It is a best practice to copy the .vsix file into a location within the container, such as a shared folder or the container’s /tmp directory. If you are using Docker Desktop with file-sharing mode, ensure that the folder is shared with Docker.

  1. Open the Extensions view (Ctrl+Shift+X), click the ellipsis icon, and select Install from VSIX.

  2. Navigate to the .vsix file and install it.

Note: If you want to use connectors, such as EMS or Oracle, install the required client libraries and configure the LD_LIBRARY_PATH environment variable. For more information, see Prerequisites for Connectors.

  1. Build, run, and test your applications.

  2. Optional: You can also use the Maven plug-in within the Dev Container to build, run, and test your flows. For more information, see the Maven Documentation.

  3. To stop the container, close the Visual Studio Code window or use the Command Palette and select Remote-Containers: Close Remote Connection.

Approach 2: Configuring the .json File with a Custom Image

To manually configure the devcontainer.json file to use a custom Docker image, perform the following steps:

  1. Open Visual Studio Code and open the folder for your project.

  2. Open the Command Palette (Ctrl+Shift+P) and select Dev Containers:Open Folder in Container.

Note: If a .devcontainer folder with a devcontainer.json file does not exist, you are prompted to create one.

  1. Choose a basic container definition, such as Debian or Ubuntu.

Note: Do not select a specific Go image.

  1. In the devcontainer.json file, modify the image property to specify your custom image:

"image": "golang:1.24-alpine"

Based on the configuration and your selections, a .devcontainer folder with a devcontainer.json file and Dockerfile is built. You are connected to the container environment in Visual Studio Code.

  1. Ensure the Linux .vsix installer file of the extension is accessible to the container.

Note: It is a best practice to copy the .vsix file into a location within the container, such as a shared folder or the container’s /tmp directory. If you are using Docker Desktop with file-sharing mode, ensure that the folder is shared with Docker.

  1. Open the Extensions view (Ctrl+Shift+X), click the ellipsis icon, and select Install from VSIX.

  2. Navigate to the .vsix file and install it.

Note: If you want to use connectors, such as EMS or Oracle, install the required client libraries and configure the LD_LIBRARY_PATH environment variable. For more information, see Prerequisites for Connectors.

  1. Build, run, and test your applications.

  2. Optional: You can also use the Maven plug-in within the Dev Container for building, running, and testing your flows. For more information, see the Maven Documentation.

  3. To stop the container, close the VS Code window or use the Command Palette and select Remote-Containers: Close Remote Connection.

Caution: Custom Docker images have the following limitations:

  • Alpine Linux-based images might have compatibility issues with glibc libraries or applications. Enterprise Message Service, which is built on glibc, encounters relocation errors.

  • Debian or Ubuntu-based images might require installation of the pkg-config, libssl-dev, and zlib1g-dev packages. You might also need to install the Go language.

Approach 3: Creating and Using a Custom Dev Container Image

To create a custom Docker image from a configured Dev Container for consistent setups that support sharing and reproducibility, perform the following steps:

  1. Perform the steps in Approach 1 or Approach 2 to configure a Dev Container.

  2. Open a terminal where Docker Desktop is installed.

  3. To list the running containers, run the following command: 

    docker ps

  1. Identify the container ID or the name of the running Dev Container.

  2. To create an image from the running container, run the following command:
    3. docker commit <container_id_or_name> my-flogo-dev:latest
    1. Replace <container_id_or_name> with the actual container ID or name
    2. Replace my-flogo-dev:latest with a suitable name and tag for your custom image

  1. Optional: If you want to share the image with other developers, push it to a Docker registry by performing the following steps:

    1. Log in to a Docker registry: docker login

    2. Push the image: docker push my-flogo-dev:latest. Adjust the image name or the tag

  1. In your project, open the .devcontainer or the devcontainer.json file.

  2. To specify the custom image, run the following command:

{
"image": "my-flogo-dev:latest",
// ... other devcontainer.json settings
}

  1. Use the Command Palette and select Dev Containers:Open Folder in Container to open the folder in the container.

  2. Build, develop, and test your applications.