Posts

Showing posts with the label micro-frontend

Azure Container Apps for Micro Frontend

Image
This will be our app 's initial setup In the pre-Azure changes, 8081 was the port for remote-app and 8080 for host-app as seen from  here GITHUB Deploying this on Azure as a Container App. Note: Docker is like a ready-to-eat meal —it’s already cooked and packed, so you can take it anywhere. Azure Container Registry (ACR) is like a fridge where you store your meal until you need it. Azure Container Apps (ACA) is like a microwave or chef that heats it up and serves it when you're ready to eat. So, Docker preps the meal, ACR stores it, and ACA serves it hot when needed! As soon as you prep a meal, first store it first in the ACR fridge. And then serve it on need basis from ACA Docker If you think about the application lifecycle—setting up the environment, adding the package.json file, installing dependencies, bringing in your code, building it, and finally running the application—you simply write these steps in an organized way inside a Dockerfile . This ensures everyt...

Micro Front-End: Module Federation

Image
What is Module Federation?  To understand Module Federation, we need to first know some basics of webpack: Webpack Basics Now that we know that webpack  bundles all the source files  the bundled files sits in a /dist folder (or as configured in webpack.config.js) We need to add plugins if we need to bundle HTML files We need to add "rules" if we need to bundle CSS files Just like how we had to add a special plugin to bundle HTML files, we also need a special plugin for Module Federation Basic idea behind Module Federation An app can have multiple "micro apps". Each containing its own "package.json". Each of these apps run on their own in their own port. These apps can still share some code and talk to each other. To summarize, each of these apps can expose certain modules and consume certain modules They share these modules at runtime. They don't depend on the contents of the "dist" folder GITHUB EXAMPLE Create 2 folders (remote-app, host-app...