Integrating Your App

After Elasticsearch and the Arranger Admin UI are properly configured, you can finally integrate your UI application (e.g. data portal).

The key browser-side packages used by Arranger are the @arranger/admin-ui and @arranger/components packages:

• @arranger/admin-ui: This package provides the admin UI for content administration
• @arranger/components: This package provides UI components that are pre-configured to work with the Arranger server API

Both packages are written in React, and hence we highly recommend that you develop your UI app in React for the most seamless integration.

Integrating Admin UI with Your React App

To integrate the admin UI with your React app:

1. Install the admin UI package:

shell

Copy

npm i @arranger/admin-ui

2. Import & add the following to your app code:

shell

Copy

import ArrangerAdmin from '@arranger/admin-ui/dist';
import { Route, Switch } from 'react-router-dom';
const ArrangerAdminPage = () => (
  <ArrangerAdmin basename="/admin" apiRoot="http://localhost:8000" fetcher={fetch} />
)

3. Modify these configurations if required:

Examining a Sample Portal Implementation

The code for a very basic sample portal implementation can be examined with the @arranger/components package, to guide you in your development.

From your arranger project directory:

1. Install required dependencies:

shell

Copy

npm ci && npm run bootstrap

2. Navigate to the modules/components/stories directory:

shell

Copy

cd modules/components

3. Start the Storybook server:

shell

Copy

npm run storybook

4. You can now examine the components via Storybook. The actual code for the basic portal implementation can be examined in this file: arranger/modules/components/stories/Portal.js.