Micro frontends with Aurelia


#1

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


Aurelia front-end microservices and Single-Spa
#2

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.


#3

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


#4

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


#5

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?


#6

@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