In my previous article (https://www.linkedin.com/pulse/micro-frontends-hands-on-example-using-react-webpack-rany/), we built together a Micro-Frontend Host (MFE2) that renders a component from Micro-Frontend 1 (MFE1).

In this article and the attached video, I will go through a real-world experience that I have done to migrate from Monolithic architecture to Microservices. This will be a hands-on video

What is a Monolith?

“Monolith” You might have been hearing this word a lot, recently, or its other synonym “Monolithic Architecture”. It is a scenario when a company depends on one service or database and it becomes a bottleneck. At this time, the need to decompose this monolith into microservices becomes a necessity. In the following short clip, I explained what is a Monolithic Architecture:

In this article, we will create a CloudFront distribution and link it to a registered domain (microfrontends.info). We will work with AWS CloudFront, Route 53, S3, and Certificate Manager. This article builds over the previous article (https://www.linkedin.com/pulse/creating-web-site-aws-s3-step-rany-elhousieny-phd%E1%B4%AC%E1%B4%AE%E1%B4%B0).

After we deployed to the web-enabled AWS S3 bucket, we can browse to the bucket through the following URL http://mfe1.s3-website-us-east-1.amazonaws.com/

In my previous articles (links at the end of this article and here), I showed hands-on what are Micro Frontends and how to create them. In this article, I will take a step back and explain what are Micro Frontends, why do we need to use them, and different ways to implement them. This helped me to write a proposal for the architectural change for my company and I hope it can benefit the readers in making the choice for the right architecture for your projects.

========================================================

What is a Micro-Frontend

Martin Fowler defined the Micro-Frontend architecture as “an architectural style where independently deliverable…

In the previous two articles, I demonstrated how to build Micro-Frontends and deploy them to AWS. During the process, I just asked you to copy the content of webpack.config.js and webpack.prod.js without explanations. In this article, I will explain line by line how Webpack works.

Here are the previous two articles:

Full Video explanation for this article at

===============

This article is an explanation for step 5 at https://www.linkedin.com/pulse/micro-frontends-hands-on-example-using-react-webpack-rany. You have to do steps 1–4, if you want to follow along.

I explained this article in the following Youtube video

Step 5.1: Adding dependencies

You may follow the following short video for the…

https://rany.tk

I have been using AWS S3 deployments in my articles, especially Micro-Frontends, and I wanted to give simple steps that you can create a website hosted on AWS S3 bucket similar to the one we created on the following article:

The results can be viewed at http://mfe1.s3-website-us-east-1.amazonaws.com/

I will assume you have a vanilla machine with nothing installed related to AWS CLI. To make this easier, I will use the command-line instead of navigating through sites

First: Create A Free tier Amazon Account

We will need this to deploy to AWS. It is easy and straightforward. Just follow the instructions here https://aws.amazon.com/premiumsupport/knowledge-center/create-and-activate-aws-account/

Here is the Sign-Up page https://portal.aws.amazon.com/billing/signup#/start

1. Download AWS CLI V2

curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"

2. Install awscli

sudo installer -pkg AWSCLIV2.pkg -target /

3. Verify the installation

aws --versionOutput will be close but not exact to the following:aws-cli/2.1.28 Python/3.8.8 Darwin/20.3.0 exe/x86_64 prompt/off

4. Install XCode command-line tools

xcode-select --install

Configure AWS CLI

1. Get Credentials

To be able to work with AWS CLI, you need to create a new user and get…