API Builder Standalone: Extend Flow Editor with Template Plugin

A template engine enhances a developer’s ability to transform a given data into a different format with minimal coding. By default, the API Builder Flow Editor’s compose flow-node, which is generally used for data transformation, implements the dot.js template engine. Here’s the blog post that shows an example of how to use a compose flow-node to optimize a given payload by reducing the number of fields.

But what if you want to use a different template engine like Mustache?

This can easily be done by creating a Mustache plugin for API Builder’s Flow Editor using Axway’s Flow Node SDK. Since there’s already a Mustache flow-node plugin available in github, we can easily implement it in the API Builder Flow Editor.

In this blog post, we’ll breakdown the following:

Create an API to return formatted response based on the request query parameters

Use compose flow-node to transform the data

Replace the compose flow-node with mustache flow-node to transform the data

Run the API as a docker container

API Design

I’ve created an API called fullname that returns a formatted full name based on the request query parameters: fn, mn, and ln. The Swagger file that describes the API is shown below:

Import the API Definition

Note: There are two save options, the Save and mock will create a sample flow for the methods in the API. This may be useful when you need to have working APIs for testing but the logic is not important. In this case, we’ll just select Save as we’ll be creating our flow.

Implementing the API

Note that the initial state of the method is “disabled” until a flow is created.

To create the flow, click on the Create Flow link.

Drag the compose flow-node onto the canvas.

Rename the title to “Format string”

Set Method to “Format string”

In the Parameters tab, set data to $.params and set template to “{{=it.fn}} {{=it.mn}} {{=it.ln}}”

In the Outputs tab, use the default values: $.value and $.error

Add two HTTP flow-nodes to handle the success and fail path. Rename one with “Success” while “Fail” for the other.

In the Success node, set the status to “200” then set the body to “$.value” which holds the transformed data.

In the Fail node, set the status to “400”.

Click Apply, Proceed then Close.

Scroll down and test the API.

We have completed an API that formats a message using compose flow-node. Next is to implement the Mustache flow-node plugin.

Install the Mustache flow-node plugin

Stop the API Builder process in the command line. In the project directory, run this command:

npm install --save api-builder-plugin-gm-mustache

Sample output below:

Start API Builder

npm start

In your browser, open https://localhost:8080/console. Navigate to the fullname api’s flow editor.

Notice that the “Mustache” flow-node is now available in the tools panel. Replace the Compose flow-node with mustache flow-node. This can easily be done by deleting the Compose flow-node, drag and drop the Mustache flow-node then re-connect the rest of the flow-nodes.

Rename the Mustache node to “Format string”.In the Parameters tab, set the template to “Full name using Mustache: {{fn}} {{mn}} {{ln}}”Click Apply, Proceed then Close.

Scroll down and test the API.

We have completed an API that formats a message using mustache flow-node.

Deploying the API as Docker container

Now that we have successfully tested the API, we can now deploy and make it available for consumption (e.g. for Integration Testing). For this exercise, we’ll just deploy it on the same development environment.

Run the API as Docker container

First, stop the API Builder process in the command line. In the project directory, build the Docker image:

Also, check this blog post where it shows how to use API Builder Standalone to go from zero to a Dockerized service.

Summary

In this post, we saw how easy it is to extend the API Builder Flow Editor by installing the Mustache flow-node plugin. API developers have the option to use their favorite templates, can quickly test the API thru API Builder Console and deploy the API as a Docker container, to make it available for consumption by other applications.

Follow Us

What can we help you with today?

Let us know how we can help you today! We're ready to get down to business. To contact our sales click here or fill out the form below: Need support? Log in to our support portal for assistance.

Axway respects your privacy. Your personal data will not be shared with or sold to a third party (unless to Axway legal entities where you can find the list at "Contact us"). Please note that you can withdraw your consent at any time by clicking here.