mdvanes / federation-cars

Example app for module federation

Example for module federation.

Looks like a simple dashboard to show a list of EV cars and clicking on them will show different details.

• As long as Nx does not support Webpack 5, this uses Lerna
• App "fc-shell": React as the "host" or "app shell"
• App "fc-list": React app for the list of cars, using CRA
• App "fc-details": Angular app for the EV details (like on ev-database)
• Web Components (lit/Stencil) as UI library for both Angular and React (UI Library, Card)
• Docker container with reverse proxy for testing/deploying all apps together

Developing

nvm use
yarn install
yarn start

Open http://localhost:3011.

But this requires you to open ports 3011 up to 3014. It might also lead to CORS errors. Running yarn start:dev-nginx starts an Nginx reverse proxy that redirects subpaths of localhost:3019 to the micro frontend services on different ports. Running yarn start:proxied will tell webpack to use proxied paths for module federation.

Also advantage of Nginx: SSL not between servers, only between browser and Nginx.

For local development:

yarn start:dev-nginx
yarn start:proxied

Open http://localhost:3019/fc_shell/.

Building

Run with

yarn build
yarn serve

Open http://localhost:3011.

For production:

• TODO fix todo in fc-shell/webpack.config.js
• TODO make a Dockerfile to deploy all micro frontends in one container with Nginx reverse proxy to emulate "production"

Remove this

The demo is annotated so navigate through the demos and apps available.

Included apps:

• App #1 (ReactJS - acts as the app shell plus is an aggregation with other remotes): http://localhost:3001
• App #2 (ReactJS - plus is an aggregation with other remotes): http://localhost:3002
• App #3 (ReactJS): http://localhost:3003
• App #4 (SvelteJS): http://localhost:3004
• App #5 (LitElement): http://localhost:3005

Heavily borrows from https://github.com/module-federation/module-federation-examples/blob/master/comprehensive-demo

Notes

• Test CRA: Very difficult. Ejecting works, but after that Webpack 5 is needed and a lot of plugings conflict with the ejected webpack.config.

TODO

• Typescript
• CORS?
• Test deploy as a single docker container
• Test Angular
• Test Lit/Stencil
• App for chart with monthly cost over time
• Google actions build script