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:
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.
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
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…
In this article, I will explain one of the most important components that you will use over and over. It is a component that you will use to list items on the device. We will build on the app we created on step/article 7 https://lnkd.in/gVJspwG and list the items we received from the REST endpoint
This article is a part of a series (It builds on previous steps)
3. Redux with React Native: 1-Reading State: https://lnkd.in/gUbBRs8