README.md

Layer7 API Hub

Prerequisite: You have read the Layer7 API Hub Overview.

Packages Directory

This section provides an overview of the react-admin application structure, describes the key directories, and the content of these directories. The packages directory includes the following libraries and apps.

Layer7 API Hub Library

The Layer7 API Hub library README includes the following information:

• Add pages
• Add additional language support

Example App

The Example app has the same source code as the standard API Hub. The Example app README includes the following information:

• Configure the Example app
• Change the page title
• Make calls to the Layer7 API Hub Mock Server or Portal API (PAPI)
• Host the Example app on another domain
• Auto-detect the API Hub URL
• Customization Tutorials

Healthcare App

The Healthcare app demonstrates a possible customized variation of API Hub with a Healthcare theme. It includes the same developer features as the Example app. It further extends the API Hub to include custom pages and additional calls (PAPI and Portal Metrics API). You use this app with the mock server.

The Healthcare app README includes the following information:

• Available users
• Customize the Healthcare app

Layer7 API Hub Mock Server

The Layer7 API Hub mock server README includes the following information:

• Start the mock server in your client application
• Available users
• Customize the mock server

Cypress End-To-End Testing

The end-to-end (E2E) tests are for the Example app.

For more information about this testing, see the Cypress - End-To-End Testing README.

Quick Start

Use the following commands to set up you local development environment.

Prerequisites:

Before setting up your local development environment, ensure that you have completed the following:

• You have installed Yarn.
• You have installed GNU Make 3.81 or later.
• You have installed Node v12.16.3.

Install the JavaScript Dependencies

Install the JavaScript dependencies by issuing the following command:

make install

Start an App

Start the Example app or the Healthcare app in watch mode.

To start the Example app, issue the following command:

make start

To start the Healthcare app, issue the following command:

make start-healthcare

Run the Tests

Run the unit tests and the E2E tests by issuing the following command:

make test

Unit Tests

Run only the unit tests by issuing the following command:

make test-unit

End-To-End Tests

Run only the E2E tests:

make test-e2e

Open the E2E tests GUI (useful for writing and debugging E2E tests):

make test-e2e-local

Deploy the Example App

Build the API Hub library, the Example app, and then copy the production configuration by issuing the following commands:

make build
make build-example
DEPLOY_ENV=prod make copy-deploy-config-example

Copy the contents of the packages/example/build directory to your favorite web hosting service. For example, the following command launches an nginx Docker container on your local machine:

docker run --name APIHub -v `pwd`/packages/example/build:/usr/share/nginx/html:ro -p 8888:80 nginx

Create an API Hub Implementation

Follow these steps:

1. From the root of this repository, initialize a new react-app called my-own-apihub by issuing the following commands:

$ cd packages && yarn create react-app my-own-apihub --scripts-version=3.2.0 

2. Add the layer7-aphub, layer7-apihub-mock, and react-admin packages as dependencies in the new package.json:

  # in packages/my-own-apihub/package.json
 "dependencies": {
        "layer7-apihub": "~1.0.0",
        "layer7-apihub-mock": "~1.0.0",
        "react": "~16.13.1",
        "react-admin": "~3.6.2",
        "react-scripts": "~3.2.0"
    },

3. Copy the config files to the example package by issuing the following commands:

$ cp -r packages/example/config packages/my-own-apihub/config/
$ cp packages/my-own-apihub/config/config-dev.js packages/my-own-apihub/public/config.js

4. Update the public index.html file to include the config.js file:

<!-- in packages/my-own-apihub/public/index.html -->
<head>
...
  <script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
... 
 </head>

5. Include the base API Hub component in the App.js file:

// in packages/my-own-apihub/src/App.js
import { ApiHubAdmin } from 'layer7-apihub';
const App = () => {
    const { APIHUB_URL, TENANT_NAME, ORIGIN_HUB_NAME } = global.APIHUB_CONFIG;
    return (
        <ApiHubAdmin
            url={APIHUB_URL} 
            tenantName={TENANT_NAME}
            originHubName={ORIGIN_HUB_NAME}
        />
    );
};

6. Add the mock server to the index.js file:

// in packages/my-own-apihub/src/index.js
import { startApiHubMockedServer } from 'layer7-apihub-mock';
...
const { ENABLE_MOCK, MOCK_SERVER_INDICATOR_LINK } = global.APIHUB_CONFIG;
export const shouldEnableMock = (enableMock = ENABLE_MOCK) =>
    enableMock === 'true' || enableMock === true;
if (!shouldEnableMock(ENABLE_MOCK)) {
    ReactDOM.render(<App />, document.getElementById('root'));
} else {
    console.log('Starting the mocked server');
    startApiHubMockedServer({
        runningIndicatorLink: MOCK_SERVER_INDICATOR_LINK,
    }).then(() => ReactDOM.render(<App />, document.getElementById('root')));
}

7. Start the bare-bones my-own-apihub app by issuing the following commands:

$ cd packages/my-own-apihub
$ yarn install
$ yarn start