Microapp-cli NPM

Micro App CLI

Create React Microfrontend App (AntD, Redux) with no build configuration.

Overview

microapp-cli is a toolset for bringing up multiple React microapps in a frontend application. The CLI allows you to setup base module as well as the child modules for you microfrontend App.

Installation

yarn

yarn global add microapp-cli

npm

npm install microapp-cli -g

Creating an App

npx create-microapp [my-microapp]
cd my-microapp
yarn start

A message will prompt up asking for the module type, you can choose from child module and base module. base module is the microapp base, and is the core for the overall microapps. This is basically the first step you will need to approach.

Adding shared libraries

Shared libraries are used to enhance performance by sharing common modules in the browser through systemjs-importmaps. Micro App CLI base module manages the dependencies in a single file located in library/importmap.json. The minimum dependencies required for base module is react, react-dom, which are core dependencies for most of the react-* related modules, e.x react-redux, react-router, etc.. The generated base module starter project already shipped with some common libraries for you, and you can extend this configuration later on as your project matures in the future.

Inject Micro App child module into microapp base module

Adding child module to base module is as simple as adding shared libraries. You will just need to edit library/importmap.json file. e.g. Saying you have created 2 projects, one base module (named my-base-module), one child module (named my-child-module). Edit importmap.json, add

{
  imports: {
    @microapp/my-child-module: [http://localhost:PORT/main.js]
    @microapp/my-base-module: %PUBLIC_URL%/main.js,
  }
}

Notice: http://localhost:PORT/main.js is the my-child-module webpack dev server PORT.

After having updated importmap.json, you can import the child module in your base module just like the normal ES6 import.

import MyChildModule from "@microapp/my-child-module";
...
// Add to your
<Router>
  ...
  <Route from="/my-child-module" component={MyChildModule}> />
  ...
</Router>

or lazily loaded via

const MyChildModule = React.lazy(() => System.import("@microapp/my-child-module"));
// Add to your
<Router>
  <Suspense fallback={<Loading />}>
    ...
    <Route from="/my-child-module" component={MyChildModule}> />
    ...
  </Suspense>
</Router>