microap_cli v1.0.5
Micro App CLI
Create React Microfrontend App (AntD, Redux) with no build configuration.
Overview
microap_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 microap_cli
npm
npm install microap_cli -g
Creating an App
npx microap_cli [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>
License
Micro App CLI is open source software licensed as MIT.