-
-
Couldn't load subscription status.
- Fork 1.8k
-
I am seeking an approach to implement a React component plugin system. The general idea is, fetching a list of component ids from remote, after the user chooses the component, import the component by accessing the cdn with the chosen id, then mount the component.
Is it achievable with module federation? If so, which example would be a good starter to learn from?
Beta Was this translation helpful? Give feedback.
All reactions
OK it works.
init({ name: 'app1', remotes: [], }); // ... function App() { // ... const setApp2 = () => { init({ name: 'app1', remotes: [ { name: 'app2', entry: 'http://localhost:3002/remoteEntry.js', }, ], }); setSystem({ scope: 'app2', module: 'Widget', }); }; const setApp3 = () => { init({ name: 'app1', remotes: [ { name: 'app3', entry: 'http://localhost:3003/remoteEntry.js', }, ], }); setSystem({ scope: 'app3', module: 'Widget', }); }; // ... }
Replies: 1 comment 2 replies
-
https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host seems to be the case. However, could init be called again to refresh the list of remotes? If so, then there is no problem.
Beta Was this translation helpful? Give feedback.
All reactions
-
Seems init could be called multiple times. I'll come back later to show if it works.
Beta Was this translation helpful? Give feedback.
All reactions
-
OK it works.
init({ name: 'app1', remotes: [], }); // ... function App() { // ... const setApp2 = () => { init({ name: 'app1', remotes: [ { name: 'app2', entry: 'http://localhost:3002/remoteEntry.js', }, ], }); setSystem({ scope: 'app2', module: 'Widget', }); }; const setApp3 = () => { init({ name: 'app1', remotes: [ { name: 'app3', entry: 'http://localhost:3003/remoteEntry.js', }, ], }); setSystem({ scope: 'app3', module: 'Widget', }); }; // ... }
Beta Was this translation helpful? Give feedback.