Webpack 5 Module Federation — Stitching two simple bundles together

Stitching two independent bundles into one single page application, at runtime

A short and sweet guide to using Module Federation on two independently deployed web apps, so that they can work like a monolith. Sharing code between themselves at runtime.

We’re going to federate two independent, very basic little react apps.

Photo by Kaleidico on Unsplash

What we have started out is a bare-bones React app, hosted on port 3001

// app1 - running on localhost:3001
import React from "react";

const App = () => (
  <div>
    <h1>Basic Host-Remote</h1>
    <h2>App 1</h2>
  </div>
);

export default App;

On port 3002 we have another single page application that has a button on it.

// app2 - running on localhost:3002
import LocalButton from "./Button";
import React from "react";

const App = () => (
  <div>
    <h1>Basic Host-Remote</h1>
    <h2>App 2</h2>
    <LocalButton />
  </div>
);

export default App;

What I want is the button from this bundle app2 to be federated into another bundle over the wire in realtime. I don’t want a 500kb SPA, I just want to load a 2kb fragment from a separate Webpack bundle. Both app1 and app2 are pretty minimal and standard react…