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: https://youtu.be/AZDDIgJSKU0
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.
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 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
“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 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 (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 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.
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 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
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 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
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
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /
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
To be able to work with AWS CLI, you need to create a new user and get…