Member-only story

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

Zack Jackson
6 min readOct 1, 2020

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.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Zack Jackson
Zack Jackson

Written by Zack Jackson

Infra Architect @ ByteDance. Creator of Module Federation. Specializing in Bundler and Javascript Orchestration at scale.

Responses (4)

Write a response

Module federation combined with Webpack 5 and Bit is the micro frontends dream coming true at production grade and limitless scale. Exciting times! https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0

app1: "./src/setPublicPath",

Could you explain a bit more on where is this being used? As well, what who invokes this…

ESI is a very weak option, I have implemented in a very large e-commerce org and we are now restructuring to remove it from the stack. it involves 1MB limit on uncompressed full ESIed page which is hard to comply with if you need SEO data on the…