Mastering Micro Frontends with Module Federation

Learn how Module Federation handles Typescript with Federated Types. Deep dive into Container Entries, why they're important and how you can begin using the Module Federation manifest file.

This covers loading remotes and sharing them between the host and remote. Includes how to setup a simple CSS module with rspack and include that in your federation setup.

Embedding URLs to remote modules during builds has a number of drawbacks such as needing to release again to update the remote module URLs.

In this module we will walk over loading them at runtime and how you can use a configuration/feature flag service to get the correct module URL. There are a lot of advantages to this and in many cases should be the preferred method.

In this video we'll explore the new Federation Runtime plugin system review various lifecycle events with official examples.

Then we'll continue our deep dive on loading remotes, and in this case ones that are not just react components.

We'll explore creating a custom runtime plugin that allows us to fetch and update remote URLs for remotes that were registered with the runtime or in the plugin directly.

This allows us to have dynamic remote loading at runtime. For the hook scenario we explored in the previous video, this would make direct imports easier since you can avoid using a React hook to load a remote. However it has it's own set of concessions such as a lack of access to React state.

We'll extend our plugin by listening for a new lifecycle event that allows us to monitor shared modules when a remote loads. This will allow us to log the shared scope when modules are resolved and you can monitor the shared module space for which versions are loaded, by which remote, and observe this overtime to ensure share scope compatibility.

In this video we'll explore a new experimental feature which allows Module Federation to share a common runtime, reducing the size of the container entry chunk.

Next we'll add React Router Dom and setup routing between federated modules. Our "products" remote will setup it's own routing tree and provide that to the consumer host.

In this video we'll explore adding a package to our monorepo, resolving it as a local package through workspaces and typescript. And demonstrating a key concept of micro frontends, event driven communication.

Event driven or pub/sub patterns for micro frontends are a key design pattern which can be extended into sharing state and help design many different interfaces between remote modules.

Lets explore Tanstack React Query and how we can share state between Micro Frontends. We'll discuss how to setup our applications, pros and cons of sharing state and how React Query intends their library to work with Micro Frontends.

This video will dive into sharing state using React Context and useSyncExternalStore. We'll explore how both solutions are built and how they work when being shared across micro frontends.

Finally we take a look at React Query again and how it can help us with multiple remote modules fetching data on mount. This is useful in scenarios where you render multiple remotes that have similar data dependencies on a home page.

In this video we'll cover creating a component library which will allow your team to create reusable packages within the monorepo and share code. These are particularly useful when the app requires branding and common functionality across the micro frontends.

Tailwindcss was chosen here as a demonstration due to its popularity, we will walk through implementing a simple component and how to share the minimum css required/generated by tailwind.

In this video we'll wrap up the course by learning about how to deploy and version micro frontends. We will work through how to build and deploy each micro frontend into a CDN and talk about creating or using a configuration service to serve micro frontends remote entry point (remoteEntry.js).

The configuration service is key for runtime/dynamic remotes where you need to serve them from outside of your javascript bundle. Following the earlier courses, this compliments that setup where you can use an API-like-service to deliver the correct remote for the user. This can be extended with user claims, or doing rollouts for AB or canary testing.

In this video we'll explore Azure Federated Credentials which allow you to authenticate with GitHub repositories directly, under a specific identity in Microsoft Entra. This allows us credential-less login from GitHub.

Then we'll explore the Azure CLI which can login using that credential, and upload the build output to Blob Storage using the upload batch command.

Zephyr Cloud is a framework agnostic hosting provider for Module Federation, it allows you to deploy locally with unlimited preview environments in under a second! This is an excellent hosting provider with batteries included.

Thank you joining me in this journey! This is only the beginning for you and with the knowledge we covered in this course I have no doubts you will Master Micro Frontends.