/tour-of-heroes-microfrontends

Angular tour of heroes adapted to microfrontends as part of a NX monorepo

Primary LanguageTypeScript

Tour of Heroes micro frontends

Netlify Status

Angular tour of heroes adapted to micro frontends as part of a NX monorepo.

Demo

Netlify App Demo

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

Prerequisites for Angular micro frontends:

  • NodeJs 10.13.0+
  • Webpack 5
  • Angular 12+
  • NX

How to run the project?

  1. clone this repository
git clone https://github.com/blminami/tour-of-heroes-microfrontends.git
  1. open terminal to the root directory and run
npm install
  1. start applications
npm run run:all
  1. navigate to http://localhost:4200

What to expect?

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)

image image

Considering the split by feature, I've decided on the following architecture of my application:

image

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

Additional resources: