Prerequisite: You have read the Layer7 API Hub Overview.
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.
The Layer7 API Hub library README includes the following information:
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
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:
The Layer7 API Hub mock server README includes the following information:
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.
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.20.2.
Install the JavaScript dependencies by issuing the following command:
make installStart the Example app or the Healthcare app in watch mode.
To start the Example app, issue the following command:
make startTo start the Healthcare app, issue the following command:
make start-healthcareRun the unit tests and the E2E tests by issuing the following command:
make test
Run only the unit tests by issuing the following command:
make test-unitRun only the E2E tests:
make test-e2eOpen the E2E tests GUI (useful for writing and debugging E2E tests):
make test-e2e-localBuild 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-exampleCopy 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 nginxFollow these steps:
- From the root of this repository, initialize a new react-app called
my-own-apihubby issuing the following commands:
$ cd packages && yarn create react-app my-own-apihub --scripts-version=3.2.0 - Add the
layer7-aphub,layer7-apihub-mock, andreact-adminpackages 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"
},
- Copy the config files to the
examplepackage 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- Update the public
index.htmlfile to include theconfig.jsfile:
<!-- in packages/my-own-apihub/public/index.html -->
<head>
...
<script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
...
</head>- Include the base API Hub component in the
App.jsfile:
// 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}
/>
);
};- Add the mock server to the
index.jsfile
// 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')));
}- Start the bare-bones my-own-apihub app by issuing the following commands:
$ cd packages/my-own-apihub
$ yarn install
$ yarn start