Blog

We will start setting up the host application first and then remote apps later.

This host application will be running on localhost:3000 and consume the remote shared component.

In Host application setup we will do the following – 

1. Creation of webpack.config.js
2. Change in index.js file
3. Creation of bootstrap.js file
4. Creation of ErrorBoundary component
5. Changes in App.js file
6. Changes in package.json file

Let us create the webpack.config.js file in the root of the host app.

1. Creation of webpack.config.js

Basic configuration –

// filepath: host/src/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"]
            }
          }
        ] 
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  resolve: {
    extensions: [".js", ".jsx"],
  },
  target: "web"
};

You can see, we are exposing port 3000 in development mode. We are extracting all the js, and jsx files (except node_modules folder files) and passing them to Babel for transpiling them.

Similarly, styling files i.e css, sass, and scss files are extracted and passed to the css-loader first, and then the result is passed to the style-loader for further transpilation.

After transpilation is done, the code is injected into the index.html file.

Let’s add the module federation plugin –

// filepath: host/src/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const { dependencies } = require('./package.json');

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"]
            }
          }
        ] 
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "Host",
      remotes: {
        Remote: `Remote@http://localhost:4000/remoteEntry.js`
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"]
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"]
        },
      }
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  resolve: {
    extensions: [".js", ".jsx"],
  },
  target: "web"
};

The text in yellow color are the changes from the basic configuration.

Before, we go further, let’s understand the changes –

• Load the ModuleFederationPlugin from the webpack lib
  
  
• Loading the dependencies which will be shared through the plugin
  
  
• name: This is used to tell the name of the application/module. This is not important for the Host as it is not exposing anything but it is a must for the remote apps.
  
  
• remotes: This keeps a journal of all federated modules. It will be an object where Keys are the internal name of the module and its value is the location of the module. e.g. Remote is the internal name to access the shared component of the remote app. The name can be anything but it should be unique among the Host and Remotes.
  
  
• Location – Remote@http://localhost:4000/remoteEntry.js –
  • • Remote is the name field of the Remote app. You guessed correctly that the internal name and the remote name could be different. The internal name is used to access the remote module inside the host app.
      
      
    • The remote module is hosted on localhost:4000
      
      
    • The shared component from the remote module is accessible from the remoteEntry.js file.

We are done with the webpack configuration. Let’s work on the other files to complete the setup on host application.