Customize and Extend the Standard API Hub

Your
Layer7 API Developer Portal
team can customize API Hub by designing, creating, and hosting a customized version of API Hub. Enhance (develop and test) as a normal UI development project.
Your
Layer7 API Developer Portal
team can customize API Hub by designing, creating, and hosting a customized version of API Hub. Enhance (develop and test) as a normal UI development project.
The standard API Hub returns
Layer7 API Developer Portal
data by referencing the Portal API (PAPI). You can customize and extend the standard API Hub by adding custom code. You can further enrich your developer experience by including calls to the PAPI in the custom code. Ensure that this custom code renders properly.
The following image shows the workflow for customizing API Hub:
Customize API Hub Workflow
In this article:
Download API Hub
Prerequisite:
You have read the API Hub README.
Follow these steps:
  1. (Optional) Fork the public read-only repo of API Hub from the API Hub GitHub.
  2. Clone the repository to your local development environment.
You have downloaded the Example app from GitHub. This app is a reference implementation of API Hub, including the components that are packaged into API Hub. It has the same source code as the standard API Hub.
Customize and Develop API Hub
Start your own customizations and development of API Hub. You can check in and maintain your code in your own repository. To make updates easier, we recommend that you start your own package.
The Healthcare Developer Center is an example that demonstrates a customized API Hub with a Healthcare theme. This example extends the standard API Hub to include custom pages and more PAPI and Portal Metrics API calls.
To view this example, see the Healthcare Developer Center.
To access the source code for this example, see the Healthcare App GitHub.
For more information about the customizations that you can make in API Hub, see the API Hub README.
Develop and test as a normal UI development project. Verify your customizations using the API endpoint responses that the API Hub mock server provides. The mock server improves the API Hub developer experience by sending API responses that mimic PAPI without having to connect to a full
Layer7 API Developer Portal
stack.
For more information about the mock server, see the API Hub Mock Server Package README.
Host your Customized API Hub
Host your customized API Hub using your own hosting solution. Ensure that you have properly defined your hosting environment in your configuration. Work with your Portal Admin to confirm the parameter values.
Prerequisite:
You have a static web hosting solution.
Configurations for your customized API Hub are defined in the
config.js
file. For more information on defining this file for a customized API Hub, see the API Hub Example App GitHub page.
Register the Hosting Domain of your Customized API Hub with API Portal
Register the hosting domain of your customized API Hub with
Layer7 API Developer Portal
so that it can successfully communicate with
Layer7 API Developer Portal
and so that you can alleviate CORS-restriction issues. Do this step for each customized API Hub.
The Ingress cache can take some time to update. If you are unable to view your customized API Hub on the hosting domain, wait a few minutes for the update, and then refresh.
Issue a PUT request to the following PAPI
Settings
endpoint, with the following payload:
https://apim.dev.ca.com/api/apim/Settings('APIHUB_SETTINGS')
Payload Example #1:
The following payload example registers the hosting domain for the
apihub1
customized API Hub. The name of the customized API Hub displays on, and is accessible from, the menu bar.
{ "Name": "APIHUB_SETTINGS", "Value": "[{\"name\": \"apihub1\",\"host\": \"developer1.example.com\",\"forgetpasswordPath\": \"/#/new-password\",\"signuppath\": \"/#/account-setup\"} "Uuid": "<GENERATED_UUID>" }
Payload Example #2:
The following payload example registers the hosting domain for the
apihub1
and
apihub2
customized API Hubs:
{ "Name": "APIHUB_SETTINGS", "Value": "[{\"name\": \"apihub1\",\"host\": \"developer1.example.com\",\"forgetpasswordPath\": \"/#/new-password\",\"signuppath\": \"/#/account-setup\"},{\"name\": \"apihub2\",\"host\":\"developer2.example.com\",\"forgetpasswordPath\": \"/#/new-password\",\"signuppath\": \"/#/account-setup\"}]", "Uuid": "<GENERATED_UUID>" }
  • The URL for the host must not contain a "/" at the end of the URL.
  • The "Value" attribute must be one single line.
You can register more customized API Hubs by appending to the list of already registered API Hubs in the payload, and then issuing a PUT request to the endpoint. Avoid overwriting the already registered API Hubs' data and losing connectivity by only appending to the list of API Hubs.
Where:
  • name
    matches the
    ORIGIN_HUB_NAME
    parameter that you defined in the
    config.js file
    .
  • host
    is the fully qualified domain name where your customized API Hub is hosted.
  • forgetpasswordPath
    is the path for the Forgot Password page for your customized API Hub. This parameter is required but you can leave the value empty. For example, in the previous example, the Forgot Password page for the customized API Hub uses the following URL:
    https://developer2.example.com/apihub1/#/new-password
  • signuppath
    is the path for the new user Sign Up page. This parameter is required (even if third-party registration is disabled). You can leave the value empty.
Verify your Customized API Hub
Access your customized API Hub and verify that it works as intended.
For more information about how to access your customized API Hub, see Access API Hub.
Next Steps
Now that you have customized and extended the standard API Hub, you can share your customized API Hub site with your API consumers.