✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨
SHOW THIS IMAGE: https://cdn.plainconcepts.com/wp-content/uploads/2022/04/microfrontend.jpg
In the past, we used to build monolithic applications, where everything was bundled together.
Micro frontends are a way to break down the monolith into smaller pieces, which can be developed, deployed and maintained independently. It is precisely what micro services accomplished and has the same pitfalls and benefits.
This concept is not something inherently new, but it's a new way of thinking about how to build web applications. In the past we could use iframes to host sub-applications. Or build them as web components -- a quite new technology.
But with the rise of module federation, we can now share code with webpack (soon w/o webpack).
This project adopts Webpack's Module Federation with NX, consolidating into a seamless workflow of micro-frontends architecture.
The project consists of a shell app and three remote apps, allowing isolated development, separate deployment, and still enabling sharing data across the apps.
The shell (or host) app is the core application from which all other remote applications are loaded. It acts as a container for the micro-frontends.
For the react example, run nx run react-app:serve-static which hosts the app decoupled from the other nx magic.
nx run shell:serve to start the shell app.
nx run shell:serve --devRemotes=brand-settings to dev one app
There are three remote apps in this project, which are separately loadable and deployable yet share the same lifecycle and state as the shell app. They are micro-frontends loaded by the shell app.