In the previous guide, we built the Shell Project — the central container that hosts and manages micro frontends. If you missed it, check out Setting Up the Shell Project for React Micro Frontends to get started.

Now, it’s time to build our first Remote Project — the independent micro frontend that the Shell will load dynamically using Webpack Module Federation.

By the end of this post, you’ll have a working remote React app that connects seamlessly with your Shell.

Step 1: Create a React App for the Remote

Just like we did with the Shell, let’s create a new React app for our remote micro frontend:

npx create-react-app mfe1

Enter fullscreen mode

Exit fullscreen mode

This will scaffold a fresh React project called mfe1 with all the basics in place.

Step 2: Install and Configure html-webpack-plugin

Just like we did with the Shell, our Remote app also needs Webpack to generate the index.html file and inject the bundled JavaScript automatically.…