In this article, I will go step by step in creating two Micro Frontend React Components and render a Button component from one into the other. This hands-on example is a continuation to the following two articles where I explained how Micro Frontends work with Webpack5 and Module Federation. I wanted to give clean steps on React components without all the explanations. Please, refer to those articles for explanations
The final project can be found at https://github.com/ranyelhousieny/react-microfrontends
1. Create two React apps and install dependencies
npx create-react-app mfe1cd mfe1yarn add webpack webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
npx create-react-app mfe2cd mfe2
yarn add webpack webpack-cli…
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:
You might have heard the word Redux multiple times and you wonder What is Redux? In the following short video and article, I will explain in less than a minute What is Redux
Redux is simply a store to store the state of the variables in your app. Redux creates a process and procedures to interact with the store so that components will not just update or read the store randomly. Similar to the bank. It does not mean because you have money in the bank that you can go anytime, open the vault, and take money. …
In this Article we will start using a middleware called Thunk to help us fetch data async from servers.
This article is a part of a series (It builds on previous steps)
What is Redux?
2. Create React Native App here https://lnkd.in/gDWG7AC
3. Redux with React Native: 1-Reading State:
4. Redux with React Native: 2-Updating State https://lnkd.in/gPcUcMx
5. Understanding Middleware in Redux: https://lnkd.in/g5tVFn8
6. Understanding REST [Optional]
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).
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 --installConfigure 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)
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
In this article and short videos, I will explain how to create the famous burger-menu on your site. I will explain it through a hands-on implementation.
Here is the final result that will show on the page
I enjoy designing systems with all their challenges. I have designing systems for the past 25+ years. System design has been evolving, quickly, from on-premises design to the cloud and from Monolith systems to Microservices. Building systems in the cloud made it a lot easier to try new concepts and learn from them. It allows me to change and build systems, quickly. However, building systems takes time. With someone like myself, who enjoys the challenges of building systems and improving current systems, it was hard to find new systems to design every day. I enjoy the discussions and the debates…
Sass stands for “Syntactically awesome style sheets”. It is an extension to CSS. Before I talk about Sass, let me go back a little bit to understand what Frontend development is. Browsers understand three concepts HTML, CSS, and JavaScript(ES5). If you write static websites, you use HTML. Pure HTML will create websites, similar to a document. You bring HTML websites to life using CSS (Cascading Style Sheets). This is where you add a background, tables, animations … If you want to make your site dynamic, you may use JavaScript (specifically ES5). So, if you only know those three languages (HTML…
Rany ElHousieny
https://rany.tk Commercial software development manager offering 25+ years’ of technical experience. Certified Solutions Architect
