Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benorama/mfe-advanced-demo
https://github.com/benorama/mfe-advanced-demo
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/benorama/mfe-advanced-demo
- Owner: benorama
- Created: 2020-12-13T15:19:28.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-20T08:51:54.000Z (about 2 years ago)
- Last Synced: 2024-04-14T06:15:23.077Z (9 months ago)
- Language: TypeScript
- Size: 2.79 MB
- Stars: 41
- Watchers: 3
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Micro-frontends Advanced Demo
This is a demo used as a proof of concept to build a micro-frontends architecture with [Angular 11](http://angular.io), [Nx Workspace](https://nx.dev/angular) and [Ngrx Store](http://ngrx.io).
Please check the Medium article [How to build a micro-frontends architecture, with Angular and Webpack Module Federation](https://medium.com/agorapulse-stories/building-a-micro-frontends-architecture-in-2021-with-angular-and-webpack-module-federation-50d073617645?source=friends_link&sk=ec61391b28ccd0d195e84b7dfd1a531c) to get more context about this demo.
The demo is based on two apps:
- a **counter-mfe** micro-app with a Counter module, which provides a working counter feature with it's own `counter` ngrx store (state and actions),
- a main **shell** app which provides the default home page, an authentication feature with it's own `auth` ngrx store (state and action) from an auth lib.
Once authenticated on the shell app, it's possible to navigate to the counter feature and loads the remote Counter module from **counter-mfe** app.
Note: for a more basic demo, you might check [MFE basic demo](https://github.com/benorama/mfe-basic-demo), with a step-by-step guide to create and configure a micro-frontend workspace.
Note 2: the initial workspace was created with Nx CLI.
```
npx create-nx-workspace@latest mfe-advanced-demo --preset="angular" --appName="shell" --style="scss"
ng g @nrwl/angular:app mfe1
```
## Live demo apps
You can access both apps here:
- **counter-mfe** [http://mfe-demo-counter.s3-website.eu-west-3.amazonaws.com](http://mfe-demo-counter.s3-website.eu-west-3.amazonaws.com)
- **shell** [http://mfe-demo-shell.s3-website.eu-west-3.amazonaws.com](http://mfe-demo-shell.s3-website.eu-west-3.amazonaws.com)
## Running the demo apps
Run the **counter-mfe** micro-app and go to http://localhost:4300.
```
nx serve counter-mfe
```
Note: if you get `Cannot find module 'ngx-build-plus/package.json'`, run `npm i`.
Run the **shell** main app and go to http://localhost:4200.
```
nx serve shell
```
Login and navigate to Counter MFE, which will load the Counter module from the **counter-mfe** micro-app.
