Microfrontends for
React
Reimagining UI in
Microservices world
What is
Microfrontend?
Micro frontends are all about slicing up big and
scary things into smaller, more manageable
pieces, and then being explicit about the
dependencies between them. Our technology
choices, our codebases, our teams, and our
release processes should all be able to operate
and evolve independently of each other, without
excessive coordination.
UI Architecture – Micro Frontend approach
Shell app
CDN Hosted
Bundle
Microfrontend
App1
Microfrontend
App2
Microfrontend
App3
React Design
System
CDN Hosted
Bundle
CDN Hosted
Bundle
Design System
Guide
CDN (CSS and assets)
Follow below steps to clone and run shell app
1. Open command prompt
2. Run npx create-microfrontend-
shell-app [appname]
3. cd [appname]
4. Run npm install
5. Run npm start
Follow below steps to clone and run Microfrontend
app
1. Open command prompt
2. Run npx create-microfrontend-
app [appname]
3. cd [appname]
4. Run npm install
5. Run npm start
6. Run npm run build to generate
output and to refer in shell app
Follow below steps to integrate Microfrontend app with
Shell app
• Go to shell app’s location
• Copy output/dist js from Microfrontend
app (Follow step 6 in slide 6)
• Paste output/dist js to Shell/Public
folder.
• Open .env file
• Go to MicroFrontendApps section and
add the JSON as below:
{ "AppId": “yourAppId", "DisplayName":
“App Display name", "Path": "/appPath",
"Icon": "", "HostCDNUrl": "public/app.js",
"APIUrl": “NA" }
• Run npm start