REGISTER

How to Use Module Federation with Re.Pack 3

Andrew Andilevko
2022-10-04

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

Introduction

Along with the release of Re.Pack v.3 there comes a huge update for the library - stable support for Module Federation.

This feature can be a powerful ally for development departments, especially when it comes to building complex apps with Micro-Frontend architecture, requiring multiple teams to deliver the whole thing. 

In this article, you’ll find out

  • what’s the idea behind Module Federation,
  • and how to use Module Federation with Re.Pack 3.

The idea behind Module Federation

Module Federation was first introduced in Webpack 5. It’s a functionality that allows for code-splitting and sharing the split code parts (chunks) between loosely coupled applications. It also helps distributed teams to ship large applications faster. And, along with its latest update, Re.Pack 3 supports this functionality out-of-the-box.

Module Federation is one of the approaches to creating Micro-frontends architecture for your application which makes the functionality a great ally in, for example, super app development or creating features on demand. 

Micro-frontends

Going briefly through the Micro-Frontends working scheme, there are:

  • the host app that runs firstly on the device, 
  • and Micro-frontend (MFE) apps that are used by the host app.

That means each container (MFE) that is used by the host application could be deployed and maintained independently. The host apps are able to reflect changes in Micro-frontend immediately with no need for re-deploy until the changes are connected to the JS only.

Accessing remote JS code exposed by MFE is the key feature of Module Federation and the process is called Runtime Deployment.

module federation in the app
Scheme 1. Module Federation in the app

How to use Module Federation in Re.Pack

If you are familiar with the Webpack config for Module Federation on the web environment, you will notice a similarity in the configuration using Re.Pack. The major difference is to take into account mobile platform / React Native specifics.

Let’s assume that we have the host application, two container applications, and one module used in the first container application. Each of the apps could be deployed independently, but all of them are bound using Webpack config.

The most interesting properties for us from this config are plugins. It is an array of all the required Webpack plugins. As you can see from the code snippet below, Re.Pack exports a <rte-code>ModuleFederationPlugin<rte-code> plugin that enables Module Federation functionality:

Code snippet 1. Host app Webpack config Module Federation plugin

Code snippet 2. Remote Container 1 Webpack config Module Federation plugin

Code snippet 3. Module app Webpack config Module Federation plugin

Going through the properties in the Module Federation plugin config, we can find the same ones in all of the apps. The <rte-code>name<rte-code> property is required, so we have to provide a unique name for each of our apps. Then, we will use it across the app for importing federated modules. The next common property is called <rte-code>shared<rte-code>. This array contains libraries and provides Webpack information regarding the libraries that should be shared in other applications. Also, they should have only one instance across the apps. Re.Pack provides default settings for React and React Native libraries in <rte-code>shared<rte-code> property.

So, until there are no more other libraries that should be shared, this property could be skipped. Dependency defined inside shared property might be also set as <rte-code>eager<rte-code>, which doesn’t put the modules in an async chunk, but provides them synchronously. That’s why it is combined with <rte-code>STANDALONE<rte-code> env which should be <rte-code>true<rte-code> when a remote app is run as its standalone version. Otherwise shared modules won’t be available in the initial bundle and the app is likely to crash. 

As you can see on the code snippets above, all the plugins’ configs, except the host app, have <rte-code>exposes<rte-code> property. This is a list of modules that the application will export as remote to another application. The host app can only import remote modules and cannot have pre-defined ‘exposes’ or ‘remotes’ properties in Webpack config. However, MFEs can do both, expose and import remote modules at the same time. 

While ‘exposes’ and ‘remotes’ properties are sufficient to support Module Federation in web apps, it’s not enough in a mobile environment. For Re.Pack, we have to add one more thing to handle fetched scripts from remote - a resolver. That’s why the <rte-code>ScriptManager<rte-code> was introduced in Re.Pack 3.

This is a manager that eases the resolution, downloading, and executing additional code from:

  • arbitrary JavaScript scripts
  • Webpack chunks
  • Webpack bundles
  • Webpack MF containers

To make <rte-code>ScriptManager<rte-code> resolve our remote scripts properly, we need to pass URLs to remote locations that those scripts will be available to fetch. They should be passed in proper object shape accepted by the createURLResolver method from the Federated module. In a very basic example, URLs might be hardcoded and the implementation is presented in the snippet below:

Code snippet 4. ScriptManager usage inside the host application

However, there is an option to provide remote containers URLs dynamically. That means removing hardcoded URLs and fetching them from external service right in <rte-code>addResolve<rte-code>r. Implementing the external service is optional but might become very useful on a larger scale. It allows to manage remote containers' URLs from outside of the host app and to switch them without the need for the host app re-deployement. Furthermore, it might help to handle fetching theproper version of MFEs inside the host app when a version management system is required. 

Code snippet 4.1. ScriptManager usage with dynamic URLs

After setting up the <rte-code>ScriptManager<rte-code>, we can use Module Federation functionality in the code. Here is the <rte-code>App.tsx<rte-code> file from the host application:

The imports are async, so we should wait till the script will be downloaded, resolved by <rte-code>ScriptManager<rte-code>, and ready to use. So, we added <rte-code>React.lazy<rte-code> and <rte-code>React.Suspense<rte-code> syntax for handling async imports. <rte-code>React.Suspense<rte-code> has the fallback property that allows showing loader component to the users during loading scripts. To dynamically import remote modules in the host app, we also used the utility function <rte-code>importModule<rte-code> from <rte-code>Federated<rte-code> namespace, to provide the correct container and module name.

But, let’s take a look at the previously presented code from code snippet 2. There is remotes property under the Module Federation plugin in Webpack config. It helps to use the same syntax as for static imports inside app1 when importing modules from remote containers. Also, it’s worth mentioning that the component name needs to be prefixed with the remote container name. In this case, it’s module1/Root. According to what was written before - the remotes property can be used only in MFEs but anyway, it should still use <rte-code>React.Suspense<rte-code> when rendering remote containers:

Code snippet 6. App.tsx code from app1 application

In code snippet 3 there is also a defined remotes property that allows importing modules exposed by app1. This pattern is called bi-directional import. It won’t be possible outside the Module Federation when importing module B in module A and module A in module B at the same time because of circular dependencies. However, Module Federation allows it and it’s totally fine until both modules are imported from different MFEs. The only thing that developers have to keep in mind is that it might be easy to end up with an endless loop e.g. by calling one function by another as presented in the code snippet below:

Code snippet 7. baz function inside module1 which uses foo function from app1

Please notice that the <rte-code>foo<rte-code> function from app1 uses <rte-code>baz<rte-code> function from module1. So as mentioned above, circular dependencies are working perfectly fine:

Code snippet 8. foo function from app1

On code snippet 7, there is a counter variable that prevents an endless loop caused by calling <rte-code>foo<rte-code> by <rte-code>baz<rte-code> and <rte-code>baz<rte-code> by <rte-code>foo<rte-code>

Summary

Module Federation is a powerful feature implemented in Webpack 5 and carefully migrated to Re.Pack 3 package.

Thanks to its functionalities, Module Federation can be a great ally for large development teams working on complex products, like super apps. The main benefits of Module Federation are

  • Independent deployment. No need to re-deploy host application on remote containers changes and re-deployment
  • Separating huge development teams. As every container could be deployed independently each team could work on their container 
  • Sharing the code between tightly loosely coupled applications
Author:
Andrew Andilevko
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.