Hi folks, welcome back.

In the previous article, we stopped at the scaffolding projects.

In this article, we will discuss the integration process.

By leveraging the Module Federation Technique.

Implementing Module Federation

We will get through it step by step.

Designate a HOST - in this case we have the container application, and a REMOTE - product
In the product (REMOTE) we want to expose the src/index.js file. That's the only file we have right now. We want this src/index.js to be available for our overall project.
Setup Module Federation to integrate these different projects together.

Please go to your products/webpack.config.js

Add the new plugin for module federation, and update the Webpack config like the below

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');


module.exports = {
    mode: "development",
    devServer: {
        port: 8081,
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'products',
            filename: 'remoteEntry.js',
            exposes: {
                './ProductsIndex': './src/index'
            }
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

Next, let's setup the plugin inside our container

container/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
    mode: "development",
    devServer: {
        port: 8080,
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'container',
            remotes: {
                products: 'products@http://localhost:8081/remoteEntry.js'
            }
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

Then, we need to do a bit of refactoring inside the HOST (Container) to load asynchronously files from the REMOTE (Product)

Firstly, we need to create the bootstrap.js inside container/src

Inside the container/src/index.js add this

import('./bootstrap')

It is the import() function call, not a normal import statement.

In the container/public/index.html

We need to add a container for the product list items to be rendered.

Add this inside the body tag

<body>
    <div id="dev-products"></div>
</body>

Finally, we need to define the files we want from our REMOTE app.

container/src/bootstrap.js

import 'products/ProductsIndex';

console.log("Hi from Container");

Now is the time to run the container to test the integration process we just did.

Inside the container (HOST) and the product (REMOTE) directory, make sure you run both.

npm run start

Here is the result.

More Understanding Module Federation

How it works?

When we start the product project with Webpack.

We get 2 different sets of output files.

First is the main.js through the normal bundling process. That's mean we can still running the product as a stand-alone application.

Secondly, is the set of files from the Module Federation Plugin.

This list contains 3 main components.

remoteEntry.js : Contains list of files available from this project and the DIRECTIONS on HOW to load them
src_index.js : a version of src/index.js that can be safely loaded in the browser.
faker.js : a version of faker library we make us of in this project can safely loaded in the browser

Back to the `Container` WHY we need to do all the refactoring?

In the container/src/index.js

import('./bootstrap')

container/src/bootstrap.js

import 'products/ProductsIndex';

console.log("Hi from Container");

Why must we do this toasynchronouslyload the files from our REMOTE application?

The index.js file here allows Webpack to go and get some additional JavaScript.

When we contain the bootstrap.js file. Webpack realized it had to fetch something from products before running this file!

The process of loading data from `products` inside `container`

We npm run start to start the Webpack Dev Server in container
The Webpack Dev Server of container output main.js and bootstrap.js
main.js loaded and executed
It notices we have to import and somehow execute bootstrap.js
Now bootstrap.js need a file from products. Let's fetch the remoteEntry.js from products to figure out HOW to do that.
OK! We need src_index.js and faker.js
YAY! Got them both. Let's fetch and execute bootstrap.js

Cover Image from Unsplash.

Reference Source: Stephen Grider

Understanding the Basics of Module Federation

Implementing Module Federation

More Understanding Module Federation

How it works?

Back to the `Container` WHY we need to do all the refactoring?

The process of loading data from `products` inside `container`

Subscribe to my newsletter

Howard

Howard

Understanding the Basics of Module Federation

Implementing Module Federation

More Understanding Module Federation

How it works?

Back to the Container WHY we need to do all the refactoring?

The process of loading data from products inside container

Subscribe to my newsletter

Howard

Howard

Back to the `Container` WHY we need to do all the refactoring?

The process of loading data from `products` inside `container`