Hackforge Academy

Explanation

React applications can use Module Federation to share components between independently running applications. With Vite, this is commonly configured through a Module Federation plugin.

Code:

npm install @originjs/vite-plugin-federation

Explanation

The Remote application exposes selected React components so that the Host application can consume them.

Code:

import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [
    federation({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Product': './src/Product.jsx'
      }
    })
  ]
};

Explanation

The Host application defines the Remote application and the URL where its exposed modules can be loaded.

Code:

federation({
  name: 'hostApp',
  remotes: {
    productApp: 'http://localhost:5001/assets/remoteEntry.js'
  }
})

Explanation

The Host can dynamically import the component exposed by the Remote and render it inside the React application.

Code:

import Product from 'productApp/Product';

function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <Product />
    </div>
  );
}

Explanation

The Host and Remote applications run independently. The Host loads the Remote component at runtime using the remoteEntry.js file.

Code:

# Remote
npm run dev -- --port 5001

# Host
npm run dev -- --port 5000

# Browser
http://localhost:5000