Host Application

As a application developer I need a different features. To enable different features, developer can use modules. To integrate modules into my application (e.g. teacher-app) following steps need to be required:

What is a Host Applcation?

An application is a collection of different modules such as:

• Teacher application consists of Attendance Module, Notifications Module, Reports Module, Worsheet Module etc.
• Mentor application consists of My Visits Module, My schools Module, My Learning Module etc.

Using module in host application?

Example - I have feature-module-1 module which exposes FeaturePage1 page. Now I want to load the FeaturePage1 page into my-app-1 at routes /feature1/:param1

• Add module entry in application's modules.json The port number must match to the port specifiied in module package's craco.confiig.js

// packages/my-app-1/public/modules.json
// 
{
    "featureModule1":{
        "url": "http://localhost:3002"
    }
    ...
}

• Add module entry in application's modulefederation.config.js module name must match with that mentioned in module's modulefederation.config.js

// packages/my-app-1/modulefederation.config.js
module.exports = {
  ...
  remotes: {
    ...
    featureModule1: "featureModule1@[window.appModules.featureModule1.url]/moduleEntry.js",
    ...
  },
  ...
}

• Load remote component and add route for the component

// packages/my-app-1/src/App.js
...
const FeaturePage1Component = React.lazy(() => import("featureModule1/FeaturePage1"));
...

<React.Suspense fallback="Loading ">
<Route
  path="/feature1/:param1"
  element={
    <FeaturePage1Component />
  }
/>
</React.Suspense>
...

• It is important to enclose the remote component within <React.Suspense>

Important Notes:

If craco.config.js, modulefederation.config.js is modified, application need to be restarted

yarn start