Getting Started with VS Code Extension for WSO2 Enterprise Integrator
Great tooling always helps developers write faster, cleaner, and consistent code. As the software development industry and technology become more and more advanced and complex with increasing business requirements, it is more important than ever you find the right tool for the right job.
Over the past few years, WSO2 Developer Studio has helped you realize any sort of complex integration solution requirement with its flexible and powerful development environment for both source and graphical editing. However, if you are not a super fan of overly bulky IDEs like Eclipse, and yet you want to get your integrations nicely done, we are so excited to introduce you the brand new VS Code WSO2 EI Tooling extension as the next generation of integration tooling experience.
As we all are aware, VS Code has become one of the most popular source-code editors of all time because of its simple, yet powerful features. Thanks to its highly extensible and customizable nature, WSO2 Enterprise Integrator has built this VS Code Tooling extension to enrich the developer experience in integration development while boosting up your productivity.
This article will be demonstrating how to use VSCode EI Tooling extension to build your integration solutions. Today I’m using my MacOS 10.14.4, but you should be able to follow along on any OS.
Pre-requisites
- VSCode
- Java JDK 8 at least (JAVA_HOME environment variable must be set)
- Maven 3.3.0 or later
Installing and Activating VSCode WSO2 EI Tooling Plugin
To install the extension, do one of the following,
- Open VSCode. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the VS Code. Search for WSO2 Enterprise Integrator and click install
- Go to VS Code marketplace, search for WSO2 Enterprise Integrator, and install from there
Once the extension is installed, it will be activated for the following events;
- Whenever an XML file gets opened
- Whenever an ESB project is opened in VS Code workspace
- Whenever
WSO2EI: Activate Extensioncommand is being invoked
Creating a New ESB Project
Once the plugin is activated, follow the below steps to generate an ESB project. Make sure you have an active internet connection in the first go to install required maven dependencies.
- Press ⌘+⇧+P (Ctrl + Shift + P for Linux and Windows) to open command palette (keep this shortcut key in mind because you are going to use it a lot) and type
WSO2EI: Create New ESB Projectcommand - Enter a valid project name in the input box getting prompted. I called mine “HelloWorldApp”
- Choose a destination folder on where you want to create the project in
Once the wizard is completed, VSCode will open the newly created project in a new VSCode instance in your machine.
You should now see a file structure similar to the one shown below. By default, the project’s group_id, artifact_id, and version inside the pom.xml will be com.example.HelloWorldApp, HelloWorldApp, and 1.0.0-SNAPSHOT respectively. These values can be changed as you wish. For this demo, I will keep the default values as it is.
Creating New Artifacts
With WSO2 EI, you can design your integration flows by creating various artifacts and deploy them to EI in order to process requests. In this article, I’m going to show you how to create an inbound endpoint artifact file inside an ESB project as an example.
- Right click on the inbound-endpoints folder (HelloWorldApp → src → main → synapse-config → inbound-endpoints) and select Create New Inbound Endpoint or open the command palette and type WSO2EI: Create New Inbound Endpoint
- Choose an inbound endpoint type from the dropdown
- Give a name for the inbound endpoint in the prompted input box
😍Awesome!! The artifact is just created for you. You may note that the active text editor in VSCode gets changed into this newly created file right away. Each artifact that gets generated using the extension has sample code in it by default, making it easier for you to get started. In a similar way, you can create other artifacts as well in the relevant folders. Respective commands are mentioned in extension’s short description.
In order to make editing faster and easier, VSCode EI Tooling plugin is fully armed with various language intelligent features such as suggestions and auto-completion, goto definition, diagnostic, and hover. These features will allow you to go smooth sailing on your complex integration flows. I will talk about these features in detail in another article.
Creating a Composite Application Archive (CAR) File
After working on your artifacts using the VSCode plugin, you can deploy them in the server by using the composite application archive (CAR) created from your ESB project. This can be easily done by executing the command WSO2EI: Build Project from the command palette (Press ⌘+⇧+P), which creates the relevant deployable archive inside the project’s target folder. (HelloWorldApp → target → capp → HelloWorldApp_<project_version>.car).
You can now deploy the created .car file to the server and enjoy your integration!!
In this post, I have demonstrated how to use the VS Code Tooling extension for seamless integration development with WSO2 Enterprise Integrator. For the moment, the extension supports only the source view for integration development. But soon the plugin will be featured by the graphical view, providing you with flawless and much more enhanced development experience. I’ll be continuously updating this post with the latest features and we hope this extension will become a loyal companion in your coding adventures in integration space. Please share your feedback with us in the comments section below. If you have any issues or feature requests, please raise an issue in our Github repo. Cheers! 🍻
