Angular tour of heroes adapted to micro frontends as part of a NX monorepo.
Have a look at this article on the topic, where I explain all the steps to split a monolithic application into micro frontends. https://dev.to/blminami/getting-started-with-micro-frontends-3g79
- NodeJs 10.13.0+
- Webpack 5
- Angular 12+
- NX
- clone this repository
git clone https://github.com/blminami/tour-of-heroes-microfrontends.git
- open terminal to the root directory and run
npm install
- start applications
npm run run:all
- navigate to http://localhost:4200
I've decided to start from the well-known Angular Tour of Heroes tutorial and split the codebase into micro apps. There are a few approaches when it comes to splitting monolithic applications into micro frontends, I chose to do it by feature. The application provides two major features:
- dashboard: top heroes + search heroes capability
- heroes: list of heroes + hero management capabilities (view here, add hero, delete hero)
Considering the split by feature, I've decided on the following architecture of my application:
where:
- shell application is the app that will host all the remote micro applications (dashboard and heroes) and will handle everything related to the navigation (navigation component and routing logic)
- dashboard micro application is one of the remote applications, targeting the dashboard feature
- heroes micro application is the second remote application, targeting the heroes feature