Skip to main content

Micro Frontends

What is a Micro Frontend?​

A Micro Frontend (MFE) Architecture breaks down a typical frontend into loosely coupled mini apps. Each mini app is owned by a different team that develops, tests and deploys independently of one another.

Webpack Module Federation​

One common way of achieving a Micro Frontend Architecture is to utilize a feature of Webpack called Module Federation. This plugin allows components within one app to be exposed to other apps which are then imported and rendered.

PRISM MFEs​

React native by default uses Metro, a custom bundler created by Facebook. In order to achieve Module Federation in react native PRISM apps are configured with Repack, a toolkit that makes Webpack useable in react native. This means that PRISM apps have two Webpack configs, one for native and one for web. The root level webpack.config.js handles native bundling and the web/webpack.config.js handles web bundling.

Creating MFE Components​

To create a new MFE component, simply create a new component in the src/components folder:

/src/components/Example.js
const Example = () => {
  return (
    <View>
      <Text>My new MFE component</Text>
    </View>
  )
}

export default Example

Then add an entry for this component in the ModuleFederationPlugin located in each webpack:

  • Native
webpack.config.js
new Repack.plugins.ModuleFederationPlugin({
  // ...
  exposes: {
    './Example': './src/components/Example'
  }
  // ...
})
  • Web
web/webpack.config.js
new ModuleFederationPlugin({
  // ...
  exposes: {
    './Example': '../src/components/Example'
  }
  // ...
})

The component is now available to be imported and rendered from the container app.

info

For more detailed examples see Repack Examples and Module Federation Examples.