Skip to main content

Create new Micro Frontends

Micro frontend template​

prism-cli

Command line tool to create an MFE project.

install​

clone this repository.

git clone https://github.com/optum-financial/prism-cli.git
cd prism-cli
npm i -g

create your MFE

navigate to the folder where you want to create new MFE. run:

prism-cli project-name
cd project-name
yarn start

run the template project in the ios simulator​

cd ios
pod install && cd ..
yarn ios

note: if you have error opening the app in iPhone 13, try opening in iPhone 14 Pro by using

yarn ios --simulator="iPhone 14 Pro"

now the template project should be running in a simulator showing a text "Template Name" and a button "View all"

run the template project in android simulator​

cd android
gradle clean && cd ..
yarn android

rename the application​

The project that is installed is named as "prismuitemplate", so let us rename the project to desired name as follows: goto the project directory and

npx react-native-rename newName

this should rename the project to the given newName. There are chances that the name prismuitemplate still exists, please find and replace prismuitemplate to newName.

for ios​

now install pods again.

cd ios && pod install && cd ..
yarn ios --simulator="iPhone 14 Pro"
for android​
cd android && gradle clean && cd ..
yarn android

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.