Manage your APIs: From LoopBack to IBM API Connect

After LoopBack 4 adopted the OpenAPI 3.0 specification, our team improvised with different querying formats, encoding styles, and other features. LoopBack 4 users don’t have to hand code the specification for their APIs. Instead, it can be automatically generated from the endpoint annotations provided in the controllers.

In general, API management is about managing the API lifecycle. You can import the OpenAPI spec generated from a LoopBack application into any API Management product which you can then use to manage, protect and enrich APIs with extensions.

IBM API Connect is an integrated API management solution with an API gateway, developer portal, and analytics. It has easier options to configure gateway policy extensions into the API spec with an assembly editor GUI.

In this article, I show you the how we integrated LoopBack with API Connect and also show you how to import and managed APIs created from a LoopBack application in API Connect.

OpenAPI 3.0 support in LoopBack

The @loopback/openapi-v3 package added the OASEnhancer interface to support OpenAPI extensions and converts the controllers’ metadata into OpenAPIv3 spec. Hence, the generated OpenAPI spec from a LoopBack application, in JSON or YAML format, can be enhanced with additional specifications, such as spec extensions and vendor extensions.

The @loopback/apiconnect package extends LoopBack with the ability to integrate with IBM API Connect. It comes with an ApiConnectComponent that adds an OASEnhancer extension to contribute x-ibm-configuration to the OpenAPI spec generated by LoopBack applications.

OpenAPI 3.0 support in IBM API Connect

IBM API Connect now supports OpenAPI 3.0 specifications, albeit with a few limitations. The API Connect CLI commands are available to support OpenAPI 3.0 to manage its lifecycle similar to OpenAPI 2.0 by knowing API Connect command line syntax.

A demo with the ToDo example application

Now let’s look at how to import REST APIs created by a LoopBack application into API Connect for API management. For illustration purposes, I will use the ToDo example as the starting point.

Step 1: Install the ToDo app locally

Download the ToDo example and install @loopback/apiconnect

$ lb4 example todo
$ cd loopback4-example-todo
$ npm i --save @loopback/apiconnect

Open the application.ts file in the /src folder and edit as below:

1. Add the following import statement:

        import {ApiConnectComponent, ApiConnectBindings, ApiConnectSpecOptions} from '@loopback/apiconnect';
   

   Show more

2. Add the following to the TodoListApplication class constructor() function:

        const apiConnectOptions: ApiConnectSpecOptions = {
          targetUrl: 'http://todo-app.cloud.url/apic$(request.path)',
        };
        this
          .configure(ApiConnectBindings.API_CONNECT_SPEC_ENHANCER)
          .to(apiConnectOptions);
        this.component(ApiConnectComponent);
   

   Show more

The targetURL todo-app.cloud.url mentioned above must be replaced with the ToDo example app’s URL after it is deployed to a cloud platform.

Step 2: Generate the API specification

Start the application locally with npm start. Generate the raw specification in a browser with this URL: http://localhost:3000/openapi.json. Save this spec locally as todo-api.json.

After the JSON file is saved, there are some manual steps required.

1. Make sure name in info.x-ibm-name does not have special characters. You may need to rename the existing name to loopback-example-todo.

2. Change the servers url to /. i.e.

   "servers": [
      {
        "url": "/"
      }
    ],
   

   Show more

   This will make sure the Portal UI will render the endpoint correctly in the test environment.

Step 3: Build and deploy a LoopBack application

1. Build the LoopBack application and create a Docker image.

       npm run build
       docker build -t loopback4-example-todo .
   

   Show more

2. Tag the Docker image and push it to a public or private repository.

   For example, for IBM Container Registry, you would tag and push the images like so:

       docker tag loopback4-example-todo us.icr.io/loopback4-example-todo:1.2.0
       docker push us.icr.io/loopback/loopback4-example-todo:1.2.0
   

   Show more

3. Deploy the Docker image

Now that you have a Docker image, you can deploy it in any cloud platform offering. If you have an account in IBM Cloud, you can quickly deploy the above image in the default namespace.

Step 4: Import the API specification to API Connect

Follow this demo to see step-by-step instructions for how to import the OpenAPI 3.0 into IBM API Connect.

Also, take a look at how to publish products to API Connect with CLI.

   apic products:publish todo-api.json --org orgname --catalog catalog --server servername

Conclusion

This article demonstrates how adding OpenAPI v3 support in LoopBack and the API Connect OpenAPI Enhancer makes it easier to import the OpenAPIv3 spec into API Connect. I hope you can follow the steps to deploy a LoopBack application into a Docker image and import the APIs into API Connect.

Get involved

LoopBack’s success depends on you. We appreciate your continued support and engagement to make LoopBack even better and meaningful for your API creation experience. Here’s how you can join us and help the project:

• Report issues.
• Contribute code and documentation.
• Open a pull request on one of our “good first issues”.
• Join the LoopBack Slack community.