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
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 v22.13.0.
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 startRun 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-unitBuild 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",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-admin": "^5.7.3",
"react-helmet": "~6.1.0",
"tss-react": "~4.9.4"
},
- 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}
/>
);
};- Start the bare-bones my-own-apihub app by issuing the following commands:
$ cd packages/my-own-apihub
$ yarn install
$ yarn start