In this article, I will arrange all the previous articles and videos in a way that can help people understand Micro-Frontends, gradually, and implement Hands-On projects to understand more about the concept:

Here is the YouTube Playlist:

1. Micro-Frontend Basics: What, Why, and How

This article can be a very good place to start. I explained what is Micro-Frontends, why we need to use them, and different ways to implement them in practice.

2. First Node.js Micro-Frontends Hands-on Project

This article is the first hands-on project to help see things in action. Explanation of most of the items will follow in other articles. In this article, I created 2 micro-frontends components that…

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:

System Design Interviews Made Easy

System Design is one of the most important questions that I ask during interviews. It bothers me when someone tries to spit up some of the textbook design answers to explain a load balancer or how DNS works. Others spend a long time collecting requirements wasting the time of the real design. I am always looking for some practical design concepts and discussions around tradeoffs for each solution. This article will try to go through the best steps to design a system in real life and answer system design interview questions. After that, I will give examples of simple system…

In this article, we will create a CloudFront distribution and link it to a registered domain ( We will work with AWS CloudFront, Route 53, S3, and Certificate Manager. This article builds over the previous article (

After we deployed to the web-enabled AWS S3 bucket, we can browse to the bucket through the following URL

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


What is a Micro-Frontend

Martin Fowler defined Micro-Frontend architecture as “an architectural style where independently deliverable frontend applications are composed into a greater whole.”…

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 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 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…

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

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

Here is the Sign-Up page

1. Download AWS CLI V2

curl "" -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…

Rany ElHousieny Commercial software development manager offering 25+ years of technical experience. Certified Solutions Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store