Micro-FE Architecture: Webpack 5, Module Federation, and custom startup code.

Advanced implementation tactics to attach a startup sequence to micro-frontend applications designed using Module Federation.

I’ll get this out the way right from the start, something that’s been requested hundreds of times now. You can set webpack_public_path dynamically (not hardcoded in the webpack config) with startup code, but there are easier solutions now built into webpack 💯 for dynamic public paths. Startup code has more advanced possibilities, but for the sake of introduction- I’m demonstrating a manual method that uses the startup code pattern. I’ll develop some better examples soon which demonstrate complex integrations.

What is startup code?

In the context of Module Federation, startup code is an implementation tactic to attach additional runtime code to a remote container startup sequence.

This is really useful since ModuleFederation and its runtime are inaccessible via hooks, there's no way to extend it or add a line of code that would do something like set the public path of a remote container on the fly.

This is trivial to do inside a normal webpack application, But pretty hard to do inside an inaccessible custom runtime container that powers module federation remote orchestration.

You could also attach suspense-like data fetching to the federation API itself, a federated import would import both Module and application state, just via import() — assuming one is familiar with Module federation, this is not a hard thing to do.

An overview of Module Federation internals.

Setting the public path dynamically.

Let's keep it simple since this is the first time its officially introduced as…