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 thesrc/index.js
file. That's the only file we have right now. We want thissrc/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 themsrc_index.js
: a version ofsrc/index.js
that can be safely loaded in the browser.faker.js
: a version offaker 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 incontainer
The Webpack Dev Server of
container
outputmain.js
andbootstrap.js
main.js
loaded and executedIt notices we have to import and somehow execute
bootstrap.js
Now
bootstrap.js
need a file fromproducts
. Let's fetch theremoteEntry.js
fromproducts
to figure out HOW to do that.OK! We need
src_index.js
andfaker.js
YAY! Got them both. Let's fetch and execute
bootstrap.js
Cover Image from Unsplash.
Reference Source: Stephen Grider