• copy module-template to modules/[module-name]
• update modules/[module-name]/package.json

{
"name": "[module-name]",
...
}

• Update modules/[module-name]/craco.config.js and assign a port for dev environment.

module.exports = {
  devServer: {
    port: 3001,
  },
  ...

• update modules/[module-name]/moduleFederation.config.js

...
module.exports = {
  name: "[module-name]",
...

• Install dependency

yarn install

• Run all modules

yarn start

yarn build

lerna run start --scope=[module-name]

• Add remote module url to remotes in modules/[host-app]/moduleFederation.config.js

# e.g. auth module is runninig on localhost:2001 then

  remotes: {
    auth: 'auth@[window.appModules.auth.url]/remoteEntry.js',
  },

• Add entry to modules.json

# e.g. auth module is runninig on localhost:3001 then

{
    "auth":{
        "url": "http://localhost:2001"
    },
    ...
}

• To use exposed component from remote module in react. The lazy load componennt must be enclosed within <React.Suspense>

# e.g. usiing AppShell component from @shiksha/common-lib lib

import { AppShell } from "@shiksha/common-lib";
...
    <AppShell
        basename={process.env.PUBLIC_URL}
        routes={routes}
        guestRoutes={guestRoutes}
    />

• add navigation menu link - config/<moduleId>
• add config schema for moduleIdto backend
• config editor loads config schema and data for param value moduleId
• on save - api invokes backkend api saves config data for given moduleId

https://shiksha-platform.github.io/docs/Developer/Frontend/