Support for module federation

[alphashr]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I would like to expose pages as a micro frontend modules. I am using OriginJS vite-plugin-federation as following:

import federation from '@originjs/vite-plugin-federation';
...
    plugins: [
      federation({
        name: 'playerList',
        filename: 'remoteEntry.js',
        exposes: {
          // './page1': './.generated/components/?????',
          // './page2': './.generated/pages/??????',
        },
        shared: ['react', 'react-dom'],
        shareScope: 'default',
      }),
    ],

I need some help to understand how the page is rendered in the iframe. If I can find how the iframes content are rendered, I may be able to expose pages similarly.

Examples 🌈

    plugins: [
      federation({
        name: 'playerList',
        filename: 'remoteEntry.js',
        exposes: {
          // './page1': './generated/components/?????',
          // './page2': './generated/pages/??????',
        },
        shared: ['react', 'react-dom'],
        shareScope: 'default',
      }),
    ],

Motivation 🔦

To use Toolpad to achieve micro frontend architecture without having to use iframes.

[Janpot]

@alphashr Toolpad has a server component which needs to run as well. Currently we are working on support for running Toolpad as a express server middleware. At the moment it's undocumented as it's not 100% usable yet, but there is an example. (the feature will be documented once this work is pushed passed the finish line). Would this setup work for you?

[alphashr]

Thanks @Janpot for your reply. Yes this setup and the example that you shared is very helpful.

[JerryWu1234]

Thanks @Janpot for your reply. Yes this setup and the example that you shared is very helpful.

@alphashr did you solve this problem ?