Feature App in Feature App

The feature described in this guide is also demonstrated in the "Feature App in Feature App" demo.

It is possible that a React Feature App renders another Feature App within itself. To do that, the parent Feature App can either use the FeatureAppContainer to render another Feature App that is included in its bundle, or the parent Feature App can use the FeatureAppLoader to load and render a Feature App that is deployed independently.

The parent Feature App must define a featureAppId for its child Feature App. To avoid conflicts when multiple instances of this child Feature App are placed on a single web page, the child featureAppId can be created using the parent's featureAppId as prefix. For more details see the "Feature App in Feature App" demo.

The FeatureAppContainer and FeatureAppLoader both access the FeatureAppManager singleton instance through React context that the integrator provides with the FeatureHubContextProvider from the @feature-hub/react package. Therefore the parent Feature App must define @feature-hub/react and react as external dependencies. In a Webpack config, this needs to be added:

{
  "externals": {
    "@feature-hub/react": "@feature-hub/react",
    "react": "react"
  }
}

And the integrator must provide @feature-hub/react and react as shared dependencies.

On the client:

import {createFeatureHub} from '@feature-hub/core';
import {defineExternals, loadAmdModule} from '@feature-hub/module-loader-amd';
import * as FeatureHubReact from '@feature-hub/react';
import * as React from 'react';

defineExternals({
  react: React,
  '@feature-hub/react': FeatureHubReact,
});

const {featureAppManager} = createFeatureHub('acme:integrator', {
  moduleLoader: loadAmdModule,
});

On the server:

import {createFeatureHub} from '@feature-hub/core';
import {createCommonJsModuleLoader} from '@feature-hub/module-loader-commonjs';
import * as FeatureHubReact from '@feature-hub/react';
import * as React from 'react';

const {featureAppManager} = createFeatureHub('acme:integrator', {
  moduleLoader: createCommonJsModuleLoader({
    react: React,
    '@feature-hub/react': FeatureHubReact,
  }),
});