Framework integration

Foundation UI is based on web components, so it can work alongside any front-end framework, such as React and Angular.

This section of our documentation shows you how to get Foundation UI working with your existing or preferred stack.

We recommend using our Genesis Create tool to create an Angular or React starter web application to see how the framework is integrated. If you have an existing application, you can use the generated create application as a guide to integrating Foundation UI.

Registering components

As Foundation UI is based on web components, the first step is to register the components in the dom. To do this, import the required modules and components and register the design system (which applies the styles).

Add the Foundation UI npm packages that you require. Then update your package.json to include the following (note this is not an exhaustive list of all the Foundation UI packages).

package.json

{
  ...
  "depependencies": {
    "@genesislcap/foundation-comms": "latest",
    "@genesislcap/foundation-login": "latest",
    "@genesislcap/foundation-entity-management": "latest",
    "@genesislcap/foundation-header": "latest",
    "@genesislcap/foundation-ui": "latest",
    "@genesislcap/rapid-design-system": "latest",
    "@genesislcap/foundation-fdc3": "latest",
    "@genesislcap/rapid-grid-pro": "latest",
    "@genesislcap/foundation-layout": "latest",
    "@genesislcap/g2plot-chart": "latest"
  },
  ...
}

Next, you need to create a file that imports and registers the Foundation UI framework, and the Foundation UI header if you want to use it.

genesis-components.ts

import { configure as configureHeader }from '@genesislcap/foundation-header/config';
import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
import { EntityManagement } from '@genesislcap/foundation-entity-management';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
import { configureFoundationLogin } from './foundation-login';

EntityManagement;

configureHeader({
 templateOptions: {
    provider: 'template',
     icon: 'rapid-icon',
     button: 'rapid-button',
     connectionIndicator: 'rapid-connection-indicator',
     select: 'rapid-select',
     option: 'rapid-option',
     flyout: 'rapid-flyout',
 },
});

configureFoundationLogin();

rapidDesignSystem
 .provideDesignSystem()
 .register(
     rapidDesignSystem.baseComponents,
     rapidGridComponents,
     g2plotChartsComponents,
     foundationLayoutComponents,
 );

To use the auth login component create a file to configure the auth micro frontend.

import {configure, define} from '@genesislcap/foundation-login';
import { AUTH_PATH } from '../config';
import { DI } from '@microsoft/fast-foundation';
import { history } from '../utils/history';

/**
 * Configure the micro frontend
 */
export const configureFoundationLogin = () => {
  configure(DI.getOrCreateDOMContainer(), {
    showConnectionIndicator: true,
    hostPath: AUTH_PATH,
    redirectHandler: () => {
      history.push('/home');
    },
  });

  return define({
    name: `client-app-login`,
  });
};