Configurazione delle app React host e remote

L’applicazione remote aggiunge ModuleFederationPlugin alla propria configurazione di webpack con tre proprietà chiave: name (identificatore univoco, ad esempio "buttonApp"), filename ("remoteEntry.js" — l’output del manifest) ed exposes (una mappa dal nome pubblico al percorso del file sorgente).

La configurazione exposes associa un percorso di modulo pubblico a un file locale: { './Button': './src/Button' }. Questo consente all’host di importare 'buttonApp/Button' e ricevere il componente da ./src/Button.tsx. È possibile esporre più componenti, utility o persino intere pagine.

La proprietà shared indica a Module Federation quali moduli devono essere condivisi tra host e remote anziché duplicati. Per React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true impedisce il caricamento simultaneo di più istanze.

La configurazione di ModuleFederationPlugin dell’applicazione host include una proprietà remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. La chiave è il namespace dell’import, mentre il valore combina il nome del remote e il suo URL tramite @, indicando a Webpack dove recuperare il remote a runtime.

Nel codice React dell’host, importi il componente remote con un import dinamico: const Button = React.lazy(() => import('buttonApp/Button')). Il percorso dell’import corrisponde al namespace del remote e al nome del modulo esposto. React.lazy suddivide l’import in un chunk e lo carica in modo asincrono.

Poiché i moduli remote vengono caricati in modo asincrono, racchiuda sempre il componente remote importato con lazy in un boundary Suspense: Suspense fallback=Loading... /. Il fallback viene visualizzato mentre Module Federation recupera remoteEntry.js e il chunk del componente dall’URL del remote.

Gli hook di React (useState, useContext, useEffect) dipendono da una singola istanza interna di React per tenere traccia dello stato dei componenti. Se sia l’host sia il remote caricano una propria copia di React, gli hook generano errori "invalid hook call". singleton:true li obbliga a condividere una sola istanza di React, risolvendo completamente questo tipo di bug.

Quando l’host utilizza react@18.2.0 e il remote utilizza react@18.3.0, l’ambito condiviso di Module Federation negozia quale versione usare. Con singleton:true e requiredVersion, in genere viene utilizzata la versione più recente, se compatibile. Impostare requiredVersion: '>=18.0.0' invece di una versione fissata consente di usare intervalli di versioni flessibili.

TypeScript non conosce i moduli remote in fase di compilazione, quindi import come import('buttonApp/Button') generano errori di tipo in assenza di dichiarazioni. Utilizzi @module-federation/typescript oppure crei manualmente file .d.ts che dichiarino i tipi dei moduli, così da ottenere la sicurezza dei tipi per le props dei componenti remote.

Esegua entrambe le app contemporaneamente: il remote sulla porta 3001 e l’host sulla porta 3000. Apra l’host: il suo runtime di Module Federation recupererà http://localhost:3001/remoteEntry.js, individuerà il modulo Button, scaricherà il relativo chunk e lo renderizzerà nell’app host come se fosse un componente locale.

In produzione, sostituisca localhost:3001 con l’URL del remote distribuito. Un pattern comune consiste nell’utilizzare una variabile d’ambiente per l’URL del remote, in modo che CI/CD possa inserire l’URL corretto per ogni ambiente: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Perché React deve essere configurato come singleton nella configurazione shared di Module Federation?

La configurazione di Module Federation richiede ModuleFederationPlugin sia nel remote, con name, filename ed exposes, sia nell’host, con remotes. Utilizzi i componenti remote tramite React.lazy e un import dinamico racchiuso in Suspense. React e React DOM devono essere singleton condivisi per evitare errori degli hook causati da più istanze. Le dichiarazioni TypeScript e gli URL dei remote configurati tramite variabili d’ambiente completano una configurazione pronta per la produzione.