A microfrontend project using React, Redux and Web Components
https://ibbus93.github.io/microfrontend-container/
I wanted to prove a personal microfrontend approach for various reason, especially the possibility to include this kind of architecture into my company, using probably Amazon S3 Buckets. The main purpose of the project was to test how the various micro frontends could communicate with a container, considering even the possibility to configure a Redux store for each application, included the container.
The approach chosen in this case is to load a micro frontend on a different path in the application, hence the container decides what frontend render depending on the route path.
In details:
/sign-inwill load the micro-login;/accountwill load the micro-bank-account.
After the start, the application let the user make the login using the micro-login. The login will return to the container a UUID and a token of the user. This data will provided to the micro-bank-account: without them, the account will avoid the access to the page.
Each project has been deployed into the personal Github web space in order to work. This is needed by the core of the project, the Microfrontend function component: it receives the url of the application, it fetches the asset-manifest.json and it attaches the main.js script file into a new DOM element, using a render function exposed by each microfrontend. The element will be destroyed when the user change the page with the microfrontend loaded.
The login request, as long as each other HTTP request present into the platform, is submitted to a Postman Mock collection, so every username and password combination is acceptable.
The structure is very light and easy:
/publiccontains the index.html to let the project work;/srccontains the core of the project, in particular:/apicontains a GET request to obtain some user informations;/featurescontains the loading of the two microfrontend and a landing page;/sharedcontains modules shared between the features, included the layout and the Microfrontend function component;/storecontains the redux store with the saga effects to make an HTTP request.
This project is build using React App Rewired,
hence it requires a config-overrides.js file in order to work.
Other notable technologies used are:
- Clone the repository
yarn installyarn start
The authentication mechanism here used is missing some token validations and it's far from a production-ready security mechanism. Following more or less the same pattern, I would either suggest or use aws-amplify in the authentication mechanism. In this way, the micro-bank-account could just retrieve the token from the cookies instead of waiting for the data from the container. A custom CloudFront distribution could also improve the architecture.
- Include a custom components library to be shared between each micro frontend
- To add aws-amplify to improve the authentication mechanism
This project, micro-login and micro-bank-account are inspired by the work of Cam Jackson across micro-frontends-demo that is well described in this Martin Fowler article that I strongly suggest to read.