Dynamic routing using remote application with NextModuleFederation

Question

I've just started using the next-module-federation for a project we're building in my company. Our goal is to create around 6-7 separated apps where each will be separated route. For example:

AppRemote1 - ./src/pages/index.jsx ----> /remote1
AppRemote2 - ./src/pages/index.jsx ----> /remote2
AppRemote3 - ./src/pages/index.jsx ----> /remote3

In case of sub-routes, those will be built in the remote app in pages folder as usual. I saw there an exposePages property but not sure how to map routes to the remote pages that defines in remotes key on Webpack. Any help will be greatly appriciated.

Answer 1

In your case, if you want to map routes to the remote pages defined in the remotes key in Webpack, you can make use of the exposePages property.

To map routes to remote pages, you need to configure the exposePages property in the remote’s Webpack configuration. This property allows you to specify a mapping between routes and the entry points of the remote’s pages.

Here’s an example configuration for one of your remote apps, AppRemotel:

// webpack.config.js of AppRemotel

module.exports = {
  // other webpack configurations
  output: {
    // output path and filename configurations
    publicPath: '/remotel/',
  },
  // other webpack configurations
  exposePages: {
    './src/pages/index.jsx': '/remotel' // map '/remotel' route to './src/pages/index.jsx' entry point
  },
  // other webpack configurations
};