Bootstrap your micro front-end in 5 minutes

Rahul Ranjan — Sun, 07 Aug 2022 12:33:00 +0000

Create MFA App

Bootstrap your micro front-end (MFE) using the starter App. The starter app comes with a shared micro-front end and an example of navigation.

The starter app is not opinionated and is the minimum scaffolding to run an application using the Webpack module federation approach.

It will create and initialize your micro front-end startup application into the specified folders, user-ready and available for further customization.

There are two main options on the CLI, which let the software about the type of application you want to create.

> Bootstrap MFE platform. Includes 
    1. Shell App 
    2. Shared components app 
    3. MFE app

> Add new MFE to platform

Introduction
Running the CLI
Available scripts
Settings
Data sharing between micro-frontends(MFEs) and shell app
Exposing widgets components
Useful features

Bootstrap MFE platform

This option will create three separate applications, as described above, and integrate them into the shell application. It can be used during the creation of a new project.

Add new MFE to the platform

This option will build a new micro-front-end application that can be added to a shell already generated in the previous step.

Template source repos:

Shell container: git@github.com:rahul-ranjan-me/mfe-shell-app.git
Shared components: git@github.com:rahul-ranjan-me/mfe-shared-components.git
Micro front-end application: git@github.com:rahul-ranjan-me/mfe-app.git

Go to top

Running the CLI (Command line interface)

> npx create-mfa-app

Executing the command will create three directories (shell-container, shared-components, micro-frontend-app) in the 'workspace' folder (the names would be based on your entries). It will generate the initial project structure and install the transitive dependencies within those directories.


micro-frontend-app
|-- node_modules
|-- public
  |-- index.html
|-- src
  |-- components
      |-- Header.jsx
      |-- header.scss
  |-- const
      |-- routes.jsx
  |-- core
      |-- App.jsx
      |-- AppRoutes.jsx
      |-- bootstrap.jsx
      |-- index.scss
      |-- setupApp.jsx
  |-- pages
      |-- home
          |-- index.jsx
  |-- appRoutesComponentConfig.js
  |-- exposedComponentsList.js
  |-- index.js
|-- .babelrc
|-- .browserlistrc
|-- .eslintrc.js
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- webpack.config.js

No complicated configuration or folder structure, only the files you need to construct your application. Once the installation is complete, you may open your project files.

> cd workspace/micro-frontend-app

Go to top

Available scripts

Within the newly created project, you can execute a few embedded commands:

`npm start` or `yarn start`

Runs the app in development mode

Shell container: http://localhost:6001
Micro front-end app: http://localhost:6003

`npm lint` or `yarn lint`

Run the eslinting to static type checking

`npm build` or `yarn build`

Build the application for production into the 'dist' folder. It bundles React in production mode and optimizes the build for the best performance.

The build is minified, and the filenames include the hashes which ensure files are not cached.

Go to top

Settings

Consider updating the following configuration in accordance with your application requirements.

1) Free Port

A free port is necessary to execute the newly added micro front-end. You can specify this when adding a new microfront-end application through the Command Line Interface (CLI). In the event that you want to modify the port, you can configure the new port by specifying in the package.json file of the respective micro-front-end application.

2) Application routes

{micro front-end app}/src/const/routes.jsx is the configuration file for sharing micro front-end application routes with the shell to register them as platform routes.

Adding a new route

Add a new entry to defaultRoutes array in {micro front-end app}/src/const/routes.jsx like below:

{ path: "payments/about", element: <About /> },

3) Config service

The shell-container application makes an XHR call to retrieve information on the micro-front-end applications to be recorded, such as remoteName and the URL.

Micro front-end addition/deletion can be done through the configuration service. This doesn't require shell container or any micro front-end app re-deployment.

You can refer sample configuration service response in {shell-container}/public/config.json.

To display the file is served via the public folder of the shell-container application. You can create a separate endpoint API for the same and update the URL in line no. 12 of {shell-container}/src/core/setupApp.jsx file.

Go to top

Data sharing

The Scaffold application uses the React Context API to share data across micro front-end and shell-container applications.

The context is common and is created through the shared component of the micro front-end. You can refer {shared-component}/src/components/contextProvider.js

Any new data can be added to the context and shared across the platform by adding in the shared component global context file.

Go to top

Exposing widgets components

Sometimes, instead of exposing the whole app as a micro front-end, you also want to expose a particular widget/component that can be built and exposed by one micro front-end app and re-used by other micro front-ends easily.

Exposing a widget as a module federated component

Create your component as a React component. To expose this component, we just need to add this component information in two files on the respective micro front-end application.

1) {micro front-end app}/src/manifest.js

Add an entry just like ` "./header": "./src/components/Header",` component to `exposedComponents` object is added on the line no. 4

Consuming the component

Now that we have exposed a component from our micro front-end app, we want to consume the same in other micro front-end apps.

To consume a module federated widget, we have created a special component MFAComponentLoader that you can export from the shared component micro front-end like below.

import { MFAComponentLoader } from "shared/Components";

and consume the exposed component anywhere in your application by calling the component below

 <MFAComponentLoader componentName="./header" />

There is an optional moduleName props you can pass, if you don't want dynamic discovery of the micro front-end that is exposing the target component.
Module name is the remote name of the micro front-app that is exposing the component.

 <MFAComponentLoader componentName="./header" moduleName="micro_frontend_app" />

An example of the same is created for you and placed under {shell-container app}/src/pages/Home.jsx

Go to top

Useful features

Less to research

The Create-mfa-app CLI will come with abilities to help you start on day 1.

Using opensource, no lock in

Under the hood, we use Webpack, Babel, ESlint, and other amazing projects to fuel your application. This will allow you to expand and customize the setup according to your project needs.

Shared component micro-frontend

The scaffolding is delivered with a micro front-end shared component (MFE). The MFE shared component lets you consume reusable components from a single source through different micro front-ends. So when you need to update a component, all you need to do is update and deploy shared micro-front-end components. Other micro front-end would always be guaranteed to get the latest version in contrast to consuming as a node package.

Data sharing

Common mechanisms to share data between micro front-ends and shell container app.

Testing Support

ESLint pre-configured with the generated application.

ToDos

Add Jest, Cypress, ESLint as an option while configuring the project
Consuming shared components URL in apps through the configuration service

Credit

Zack Jackson and the team for coming up with Webpack 5 module federation solution.

Contact me

I would love to get your feedback. Small or big any feedback is welcome. Please drop me a note to me on my email id: rahul.smile@gmail.com

Thank you

Rahul Ranjan

DEV Community: Rahul Ranjan

Bootstrap your micro front-end in 5 minutes

Create MFA App

Table of contents

Bootstrap MFE platform

Add new MFE to the platform

Template source repos:

Running the CLI (Command line interface)

Available scripts

`npm start` or `yarn start`

`npm lint` or `yarn lint`

`npm build` or `yarn build`

Settings

Data sharing

Exposing widgets components

Exposing a widget as a module federated component

Consuming the component

Useful features

ToDos

Credit

Contact me

Thank you

DEV Community: Rahul Ranjan

Bootstrap your micro front-end in 5 minutes

Create MFA App

Table of contents

Bootstrap MFE platform

Add new MFE to the platform

Template source repos:

Running the CLI (Command line interface)

Available scripts

npm start or yarn start

npm lint or yarn lint

npm build or yarn build

Settings

Data sharing

Exposing widgets components

Exposing a widget as a module federated component

Consuming the component

Useful features

ToDos

Credit

Contact me

Thank you

`npm start` or `yarn start`

`npm lint` or `yarn lint`

`npm build` or `yarn build`