WSO2Con2025 Logo

March 18-20 | Barcelona, Spaain

 
choreo
2024/07/23
 
23 Jul, 2024

Deploy and Manage Cloud Apps from VS Code with the Choreo Extension

  • Kajendran Alagaratnam
  • Senior Software Engineer - WSO2

The Choreo extension for Visual Studio Code (VS Code) enables developers to manage cloud applications without leaving VS Code. This seamless integration enhances the overall development workflow, offering everything from component creation to monitoring.

With the release of version 2.0, the Choreo extension is now better aligned with typical development workflows and offers an experience that's more familiar to users of the Choreo console. This update also introduces several new functionalities to streamline your cloud application management.

Key Functionalities of the Updated Choreo Extension

  • Manage Projects: Work with Choreo projects directly in your VS Code workspace.
  • Create Components: Convert your local cloned repo into a component.
  • Trigger Builds: Initiate builds for your components in the cloud and view the build logs.
  • Deploy Builds: Deploy your component builds to any environment.
  • Test Services: Verify the functionality of services.
  • Monitor Components: Access runtime logs to monitor your components.

Getting Started with the Choreo VS Code Extension

To start using the Choreo extension, download it from the marketplace and log in with your Choreo account.

For more details, refer to the Getting Started Guide.

Working with the Choreo Extension

To manage an existing Choreo project in VS Code, open its local Git repository. If it's not already cloned locally, use the extension's "Clone Repository" feature to clone it into your environment.

If you want to develop new Choreo components, open the local Git repository from which you want to create these components. Switch to the Choreo activity in VS Code to create and manage them. Once your local directory is linked to your Choreo project, the Choreo activity in VS Code will display all associated components within your workspace. This allows developers to conveniently manage Choreo project components directly from VS Code.


Figure 1: Component details view

Let's go through the extension features.

Create Components

To create a component, open the repository containing the source code, click the "Create Component" button within the Choreo activity, fill out the form, and submit it. The component details view will then be displayed, and the newly created component will be listed in the Choreo activity.

Any additional configuration files, such as `component-config.yaml`, will also be automatically created if needed. You only need to commit and push these configuration files.

Currently, the Choreo extension supports component types such as Services, Manual Tasks, Scheduled Tasks, and Web Applications, with more types to be added soon.


Figure 2: Component creation form

Manage Builds

To build source code or a Dockerfile, commit and push your local changes to the remote repository. Then, they can switch to the Choreo activity within VS Code to trigger a new build. This process creates a deployable container image from the source code or Dockerfile for the selected commit. The extension also allows you to view build logs for easy debugging in case of build failures.


Figure 3: List of builds for a particular component

Manage Deployments

After a build is complete, you can deploy it to any environment available in your Choreo project. Once the deployment is complete, you can view details such as deployed URLs and status within the extension. This enables you to check the status of your deployed components by switching to the Choreo activity within VS Code.


Figure 4: Component deployment details for available environments

Test Components

Once deployed, you can test components directly via the Choreo extension. For publicly exposed service components, use the OpenAPI view to ensure it operates as expected in the Choreo environment. Additional testing methods for other component types will be added in future updates.


Figure 5: Open API UI for testing publicly exposed services

Monitor Components

While a component is deployed, you can access real-time logs via the VS Code integrated terminal. Navigate to the component details view and click the "View Runtime Logs" button for the environment you want to monitor and troubleshoot directly within VS Code.


Figure 6: Integrated terminal showing runtime logs of a component

Conclusion

With the latest Choreo VS Code Extension, developers can now seamlessly manage cloud applications directly within VS Code.

In addition to the mentioned features, the extension will soon support automatic build and deployment upon new commits, management of configurations and connections, visualization of projects using Cell diagrams, and various other enhancements.

For more information, view the documentation or reach out to us on Discord if you have any questions.

English