Microfrontends with React

It is common knowledge that the best method to tackle any software issue is to disassemble the problem. Whether it be by rewriting your code to create functions that are more manageable and clear, there are multiple ways to accomplish this.

Why use Micro Frontends?

Large applications have profited in multiple ways from the development of microservices, which have advanced in recent years. It is helpful in the process of efficiently developing, deploying, and scaling the separate components of the application backend.

Nevertheless, many developers have become aware that similar difficulties exist for the front-end as well. It is at this stage that the breaking up of the frontend monolith into individual micro front-ends usually begins.

Module federation (Module Federation | webpack)

Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin

I’ll create 2 apps in this article:

• First: Container app that will be used as a base for the micro frontends.

• Second: The counter app that will get rendered inside the container app.

Let’s update the webpack.config.js file inside the Counter app. Add ModuleFederationPlugin to the plugins array with the following configuration:

webpack.config.js

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "counter",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./Counter": "./src/components/Counter",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),

Let’s update the webpack.config.js file inside the Container app.

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        counter: "counter@http://localhost:8081/remoteEntry.js",
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],

Now in src/App.js

import React from "react";
import ReactDOM from "react-dom";
import { Counter } from 'counter/Counter';
import "./index.css";
const App = () => (
  <div className="container">
    <h1>Container App</h1>
    <Counter /> // Micro frontend app
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

If we run both apps, we should see Counter app inside of Container app working as it should.

Notice: both apps need to be running for Microfrontends to work.

Also in production you can update the app deploy url’s to remote server url.

That’s it.

Now you can split your apps into smaller, more manageable chunks.

Thanks for reading!