Easy to use, zero-dependency, fast and optimized microfrontend architecture for React apps.
npm i @gravity9/microfrontends
https://stackblitz.com/edit/gravity9microfrontends
- MF - microfrontend
- MF Host, Host App, Shell - Parent, "host" application that hosts other smaller apps (microfrontends)
- MF App, Remote, Remote App - Smaller app or set of components that is loaded by host app.
-
Create Webpack based standard React app
-
Edit
webpack.config.js
and add MF Plugin:
import { ReactMicrofrontendsPlugin } from '@gravity9/microfrontends';
...
plugins: [
new ReactMicrofrontendsPlugin()
]
- Create
public/config.json
fille:
{
"MICROFRONTENDS": {
"NAME": "mf/app",
"REMOTES": [],
"EXPORTS": {
"Component": "./src/components/Component"
},
"SHARED": [
"react",
"react-dom",
"react-router-dom"
]
}
}
npm run
-
Create Webpack based standard React app
-
Edit
webpack.config.js
and add MF Plugin:
import { ReactMicrofrontendsPlugin } from '@gravity9/microfrontends';
...
plugins: [
new ReactMicrofrontendsPlugin()
]
- Create
public/config.json
fille:
{
"MICROFRONTENDS": {
"NAME": "mf/host",
"REMOTES": [
{
"NAME": "mf/app",
"URL": "http://localhost:3002/"
}
],
"EXPORTS": {},
"SHARED": [
"react",
"react-dom",
"react-router-dom"
]
}
}
- Import any MF component anywhere in code:
import Component from 'mf/app/Component'
You can get config/env variables by simply using import config from 'mf/config'
Both app
and host
project templates are provided with all necessary tooling.
-
Typescript
-
Synchronized Routing
-
Hot Module Reloading synchronized between host <-> apps
React specific projects:
-
React 18
-
React testing framework with React Testing Library
-
Synchronized routing with React Router 6
Cache busting for microfrontends is built into the framework. It will never cache microfrontends config files. Additionally, if your MF's config file contains BUILD_ID it will load the fresh version every time this value changes. If you don't provide this value the framework will not cache remoteEntry.js which will affect load times.
You should however handle cache busting for host application yourself, as its not part of the framework.
To make sure your page won't fail dramatically if some MF couldn't be loaded you should always wrap your microfrontends in ErrorBoundary if you're using React (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) or equivalent.