G9 Microfrontend Framework

Easy to use, zero-dependency, fast and optimized microfrontend architecture for React apps.

Installation

npm i @gravity9/microfrontends

Demo and Live Example

https://stackblitz.com/edit/gravity9microfrontends

Terms

• 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.

Basic Usage

MF App

1. Create Webpack based standard React app

2. Edit webpack.config.js and add MF Plugin:

import { ReactMicrofrontendsPlugin } from '@gravity9/microfrontends';
...
plugins: [
   new  ReactMicrofrontendsPlugin()
]

3. Create public/config.json fille:

{
   "MICROFRONTENDS": {
      "NAME": "mf/app",
      "REMOTES": [],
      "EXPORTS": {
         "Component": "./src/components/Component"
      },
      "SHARED": [
         "react",
         "react-dom",
         "react-router-dom"
      ]
   }
}

5. npm run

MF Host

1. Create Webpack based standard React app

2. Edit webpack.config.js and add MF Plugin:

import { ReactMicrofrontendsPlugin } from '@gravity9/microfrontends';
...
plugins: [
	new  ReactMicrofrontendsPlugin()
]

3. 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"
      ]
   }
}

4. Import any MF component anywhere in code:

import Component from 'mf/app/Component'

Config

You can get config/env variables by simply using import config from 'mf/config'

Setup and Stack

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

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.

Error Handling

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.