Micro frontends with Aurelia

I’m planning on creating a large application with multiple teams managing their own frontend components and back end microservice. The desire is to create a composite UI from independent microservices that serve their bundled components, so individual features can have their own release schedule without affecting the shell UI.

Desired structure:

  • Aurelia UI Shell Project - contains the aurelia bootstrapper, AppRouter
  • Features
    • Microservice feature 1
      • UI - contains relevant aurelia UI components, may have one or more child routers
      • API
    • Microservice feature 2
      • UI - contains relevant aurelia UI components, may have one or more child routers
      • API
    • Microservice feature 3
      • UI - contains relevant aurelia UI components, may have one or more child routers
      • API

My question is, how would you split the microservice feature’s Aurelia components into separate projects so they can have their own release pipeline, whilst preventing duplication of common/shared libraries?

I’ve watched Jonathan Mezach’s presentation on a modular Aurelia frontend, but the examples shown are still maintaining components/bundles in a single project. https://www.youtube.com/watch?v=rODcaKW8uzY

2 Likes

Dreaming of the same concept.
sideloading compiled features.
Might wanna join our efforts.
Easy enough with jspm without bundling… i guess. If you are sure you can use http2, I’d start that way.

With webpack you also can move features to different bundles which will only be loaded if used.

@MaximBalaganskiy I could not yet figure out how could one build some feature with webpack separately and reference it on demand.

Heres an interesting approach using docker containers with a zero configuration proxy: https://github.com/willmendesneto/micro-frontend-pages

I started working on a solution using some of these concepts, where I would serve different bundles from each project in a different container, and use webpack and aurelia’s PAL to chunk my bundles.

With this setup, I haven’t conceptualized how I would be able to share a singleton instance across multiple apps, any ideas?

@Alexander-Taran I think you can bundle a feature and chunk the most of its’ content, leaving just a root module. Then in the consumer app reference a placeholder bundle in index.html which will load the main feature chunk on demand

Hi. I have just started looking at using Aurelia and how it can be used with a micro front end architecture.

I know its been a while, but any hints tips sample code you can point me in the direction off it would be much appreciated!

1 Like

I think what you’re looking for is webpacks module federation Module Federation | webpack

I havent played with it yet but there are several samples, even a vanilla one. So with that said I guess its a matter of lazy init of Aurelia when a new module is requested where the enhance api might come in handy

1 Like

I’ve created a small repo for doing module federation with Aurelia here GitHub - bigopon/example-au-module-federation

Steps:

  1. build app 2
  2. build app 1
  3. run a webserver at dist folder of app 2 at port 8080
  4. run a webserver at dist folder of app 1 at any port

Start testing app 1 that is able to load app 2 modules like its own using Module Federation feature of webpack.

1 Like

I got fired up by @bigopon’s shot at v1 and would like to share an Aurelia v2 example.

Including the same remote function call but also a remote custom element auto-wired in the router :wink: