Skip to Content
UI ProtocolAppClientConfiguration

Configuration

The @akinon/app-client library allows you to configure your application through the config prop of the AppClientProvider component. This configuration determines how your application behaves and interacts with the main application shell.

Configuration Types

There are two main types of configurations, depending on whether your application is a fullpage application or a plugin:

  1. FullpageApplicationConfig
  2. PluginApplicationConfig

Both of these extend the base ApplicationConfig interface.

Base ApplicationConfig

interface ApplicationConfig {
  isDev: boolean;
  forceRedirect?: boolean;
}
PropertyTypeDescription
isDevbooleanIndicates whether the application is running in development mode
forceRedirectboolean (optional)If true, forces the application to load in an iframe if not already

FullpageApplicationConfig

For fullpage applications, you need to provide additional configuration:

interface FullpageApplicationConfig extends ApplicationConfig {
  menu: Array<...>; // Define the menu structure
  navigation: {
    navigate: (payload: { path: string }) => void;
  };
}
PropertyTypeDescription
menuArray<...>Defines the menu structure for the application
navigationObjectContains the navigation function
navigation.navigate(payload: { path: string }) => voidFunction to handle navigation within the application

PluginApplicationConfig

For plugin applications, you can use the base ApplicationConfig or extend it with plugin-specific options if needed.

Usage Example

Here’s an example of how to configure a fullpage application:

import React from 'react';
import {
  AppClientProvider,
  type FullpageApplicationConfig
} from '@akinon/app-client';
import App from './App';
 
const config: FullpageApplicationConfig = {
  isDev: process.env.NODE_ENV === 'development',
  forceRedirect: true,
  menu: [
    { label: 'Dashboard', path: '/dashboard' },
    { label: 'Settings', path: '/settings' }
    // Add more menu items as needed
  ],
  navigation: {
    navigate: ({ path }) => {
      // Implement your navigation logic here
      console.log(`Navigating to: ${path}`);
    }
  }
};
 
const Root = () => (
  <AppClientProvider config={config}>
    <App />
  </AppClientProvider>
);
 
export default Root;

Best Practices

  1. Environment-based Configuration: Use environment variables or build-time constants to set the isDev flag appropriately for different environments.

  2. Type Safety: When using TypeScript, always use the appropriate configuration type (FullpageApplicationConfig or PluginApplicationConfig) to ensure type safety and catch potential errors early.

  3. Navigation Handling: Implement the navigate function in a way that works well with your application’s routing system, whether you’re using React Router or another routing solution.

  4. Menu Structure: Design your menu structure carefully, considering the hierarchy and organization of your application’s pages and features.

  5. Conditional Configuration: You can use conditional logic to adjust the configuration based on different factors, such as the environment or user roles.

By properly configuring your application, you ensure that it integrates smoothly with the main application shell and provides a consistent user experience across different parts of your micro-frontend architecture.

ComponentsHooks