Micro-frontends with Aurelia 2

Help Requests
1

Hi, I need help. I am trying to build a micro-frontend for my micro-services using AU2. Now, I have read about WebPack Module Federation and I wonder if this is the way to go, or is there another better way (Dumber, Single-Spa…)?
What I would like to do is deploy modules (micro-frontends) as docker containers. Then I would have a “shell” application that loads all the modules from DATABASE (through an Rest api call) and populate navigation.
I don’t see how can I do this. Every sample I found is statically declaring micro-frontends in webpack or in shell routing and I don’t want this, because then I need to re-deploy the shell application every time I deploy new modules (micro-frontends).
I also saw the Single-Spa framewrok, is it possible to integrate it with Aurelia 2? And if so, is it the solution to my problem?
Thanks

2

Hi. This would be my approach to this problem:

  • Define a custom element where you define the navigation (maybe a top/side navigation bar etc.). This should ideally be responsible for displaying the navigation as provided/fetched from the “database”; feel free to pre/post-process the navigation structure as you see fit, depending on your need.
  • Define a custom element where you define the page layout. Use the navigation bar in this layout.
  • Use the layout custom element in every app; you might need to package your custom elements into a node module. This should ensure that every app gets the same layout and navigation.
  • With this in place, you can deploy every app separately, without bothering about static module federation or even the shell app. Your custom element handling the navigation menu should be capable of identifying the routes in the “current” app from the routes in other apps in the given navigation model (coming from “database”), and you just need to use the external attribute on the links to the other apps, or set the browser locations, if you are not using the a tag or using a JS-event-handler to perform the navigation.
1 Like
3

Thanks for the response. As I see this is having multiple separate apps and doing browser navigation (open new page on that url) instead of using one Router (correct me if I’m wrong). How do I pass state to the other apps (ie. currently logged user, tokens…)?

4

That is actually dependent on your design of the Authentication/Identity infra. If it based on implicit grant type, where the user-identity token is directly consumed by the app, then you might want to use the browser’s local storage to share the token between apps.
A more secure way might be to use a http-only, secure cookie that contains the token. That way the app does not have direct access to the token, rather a user-information endpoint reads the token, as sent with the cookie, and returns relevant information to the apps. Assuming you are using the same domain-suffix to host the apps, as well as for the identity backend, the browser will send the shared cookie with every request.

1 Like