/ModuleFederationWebComponents

A prototype to load federated modules inside web components

Primary LanguageTypeScript

MICRO FRONTENDS AND THE MULTIVERSE OF FRAMEWORKS

One of the most frequent challenges for frontend engineers is the need to make your framework work with multiple libraries, different versions, or even other frameworks. The traditional micro frontend approach allows us to divide the work and scale through numerous teams, using different URLs per app, but bringing multiple frameworks together on the same page without issues has been hard to achieve until now. This repository presents an elegant solution combining Micro Frontends + Module Federation + Web components that will allow your base app to work with any other framework/library on the same page. I believe this architecture will be extremely useful for any frontend developer, and even allow teams that have different framework preferences to collaborate on a single web app.

To run the angular host, with react and angular remote modules just run:

npm run start:angular

If you also want to start the react host at the same time, run:

npm run start:react-host

There is no need to run the remote modules again because those were started with the first command.

Any questions ping me here or on Twitter @adrianiskandar

This project was generated using Nx.

Keywords

Microfrontend

Module Federation

Web Components

Angular and React working together

React and Angular working together