Micro Frontends

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

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:


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…


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…


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)

  1. 𝑪𝒓𝒆𝒂𝒕𝒆 𝒂 𝑹𝒆𝒅𝒖𝒙 (𝑯𝒆𝒍𝒍𝒐 𝑾𝒐𝒓𝒍𝒅): https://lnkd.in/guBuBVP

2. Create React Native App here https://lnkd.in/gDWG7AC

3. Redux with React Native: 1-Reading State: https://lnkd.in/gUbBRs8

4. Redux with React Native: 2-Updating State https://lnkd.in/gPcUcMx

5. Understanding Middleware…

Rany ElHousieny

https://www.linkedin.com/in/ranyelhousieny 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