In modern application development, the demand of creating a feature-rich modern web application needs the frontend application to be divided into small reusable components and developed parallelly to reduce time to market.

Micro-Frontend enables us to use reusable components created using polyglot frameworks. This enabled us to create reusable components, managed by different teams in parallel, reducing time to market with a comparatively smaller codebase.

Micro-Frontend helped us to achieve the following:

• Reduce the time to market cost.
• Easier maintenance.
• Better fault tolerance.
• Increased Agility and Scalability.
• Independently Deployment.

Each Module/component could be built by an individual team. The individual would be responsible for all the development, testing, release and observability of the Module/component.

Modules/Components could be created in any preferred technology giving a chance to the development team to experiment and build the module optimally.

Since the Modules/Components could be built by individual teams, multiple teams could focus and develop their isolated new features/changes and release them quickly.

Micro-Frontend helps you to follow the divide and conquer approach. This ensures easily deployable, testable smaller features and the overall time for testing is reduced.

Micro-Frontend teams are smaller and can work individually without disrupting other teams. We can have a new/additional team setup that could deliver additional/new components quickly without even knowing the complexity of the complete application.

Micro-Frontend Charts Application provides a sample way to implement Micro-Frontend using polyglot JavaScript Framework (React and Angular). The sample covers the deployment of the Micro-Frontend on AWS, including the sample backend Application.

• Micro-Frontend sample implementation with React and Angular frameworks
• Webpack5 and ModuleFederation for the Micro-Frontend
• AWS Amplify for Frontend application deployment along with CI/CD
• Amazon Cognito for the User Authentication using Amplify CLI.
• AWS CodeSuite for Backend Deployment
• Infrastructure automation using Cloud Development Kit (CDK)

We have leveraged Webpack 5 and the Module Federation plugin to implement our Micro-Frontend Sample.

Module Federation is a native plug-in for Webpack 5, that allows sharing chunks of JavaScript code between frontend applications at Run-Time. This helped the development to work in isolation on separate builds or application components. Multiple separate builds are loaded at runtime to form a single application. These separate builds act like containers and can expose and consume code between builds, creating a single, unified application.

i: Expose the React APP Component

Expose the component from the /react-charts-data-app/webpack.config.js file

ii: Add React App Microservice as a remote app in the React Container

React App Microservice remote in the /react-container-app/webpack.config.js file

iii: Use the imported component in the React Container

Use the imported component within the container application in the react-container-app/src/components/container/index.tsx file

i: Bootstrap the Angular App

ii: Expose the Angular APP Component

Expose the component from the /angular-charts-app/webpack.config.js file

iii: Add Angular App Microservice as a remote app in the React Container

Angular App Microservice remote in the /react-container-app/webpack.config.js file

iv: Mount Angular App Microservice in the React Container

Mount Angular App on /react-container-app/src/utils/external-angular-app.jsx file

v: Use the mounted component in the React Container

Use the mounted component within the container application in the /react-container-app/src/components/container/index.tsx file

For the Micro-Frontend sample implementation on AWS, we have chosen Angular and React frameworks to build our frontend application. The backend application is created using the NodeJS framework.

a) Micro-Frontend Application

AWS Amplify is leveraged to automate the process of deployment on AWS. Using AWS Amplify, we were able to deploy and add authentication to the application just by using a few user-friendly commands.

Each Micro-Frontend Application is deployed using AWS Amplify which uses Amazon S3 bucket and Amazon CloudFront Distribution internally; and for authentication Amazon Cognito is being leveraged.

The sample consists of three applications:

Micro-Frontend Apps	Purpose
Angular Charts App	Contains code for generation charts
React Charts Data App	Contains charts fitters leveraged by Angular Charts App to create charts
React Container App	Container App containing React Charts Data App and Angular Charts App

b) Backend Application

For the backend, we have leveraged NodeJS code deployed on AWS Lambda functions to persist and read data from the AWS DynamoDB leveraged as a NoSQL Database.

Backend infrastructure code is automated using AWS Cloud Development Kit (AWS CDK).

AWS Amplify is leveraged to host our "Client Side Rendering" Frontend Application. AWS Amplify uses internally uses AWS Serverless Services like CloudFront and S3 Bucket to deploy the frontend application.

Name	Version
NodeJS	16.17.0
Typescript	4.8.4
ReactJS	18.2.0
Angular	15.2.0
CDK CLI	2.92.0
AWS CLI	2.7.35
AMPLIFY CLI	10.7.1

Prerequisite verification

Check if you have all the required prerequisites by executing the following commands, and they would return the versions.

1: NodeJS

node -v

2: Node

cdk --version

3: Amplify CLI

amplify -v

4: AWS CLI

aws --version

In order to deploy the Micro-frontend application, you need to deploy the each applications one by one in the order mentioned below:

Note: For all the apps open new terminal and clone the repository as mentioned in the deployment of each of the below apps

a) Backend App

b) Angular Charts App

c) React Charts Data App

d) React Container App

Once the above steps are performed, open React Container App's Domain URL and we will get the Micro-Frontend app.

Cleanup requires few commands to be executed for each of the applications deployed.

a) Go to backend directory and use cdk destroy --all command.

b) Go to angular-charts-app directory and use amplify delete command.

c) Go to react-charts-data-app directory and use amplify delete command.

d) Go to react-container-app directory and use amplify delete command.

• Micro-frontends.org
• Buildingmicrofrontends.com

See CONTRIBUTING for more information.

This sample code is made available under the MIT-0 license. See the LICENSE file.