#Básico CRA com Rsbuild

#Configuração Environment

Antes getting started, você vai precisa instale Node.js, e ensure esse seu Node.js versão >= 16. We recommend usando o LTS versão de Node.js 20.

Você pode check o currently usado Node.js versão com o seguintes comando:

node -v

Se você não have Node.js installed em your current environment, ou o installed versão é too low, você pode use nvm ou fnm para instalar o obrigatório versão.

Here é um exemplo de como para instalar o Node.js 20 LTS versão via nvm:

# Install the long-term support version of Node.js 20
nvm install 20 --lts

# Make the newly installed Node.js 20 as the default version
nvm alias default 20

# Switch to the newly installed Node.js 20
nvm use 20

#Step 1: Configuração React Aplicações

#Crie React Project

Você pode use create-rsbuild para criar um projeto com Rsbuild + React. Just execute o seguintes comando:

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

#

create rsbuild@latest

"Input target folder":
> mfe1

"Select framework":
> React

"Select language":
> TypeScript

create rsbuild@latest

"Input target folder":
> mfe2

"Select framework":
> React

"Select language":
> TypeScript

cd mfe1
pnpm i

cd mfe2
pnpm i

#Use React em um existente projeto

To compile React, você precisa registrar o Rsbuild React Plugin. O plugin vai automatically adicione o necessário configuração for React builds.

Por exemplo, register em rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

Ensure esse Webpack versão 5 ou above é installed by checking o instalação report fornecido by Yarn.

#Step 2: Installing Module Federation Plugin de build

pnpm add @module-federation/enhanced
pnpm add @module-federation/rsbuild-plugin --save-dev

#Step 3: Update Entry Arquivos

In both aplicações, rename o index.js arquivo para bootstrap.js. Essa mudança allows bootstrap.js para carregar asynchronously, que é essential for Module Federation para função correctly entre o two aplicações.

mv src/index.tsx src/bootstrap.tsx

Update o contents de bootstrap.tsx para o seguintes:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Now, crie uma nova index.tsx arquivo em both aplicações com o seguintes content para importe bootstrap.tsx:

import('./bootstrap');

#Step 4: Crie e Exponha

Now, crie um componente para exponha de MFE2

const Button = () => (
  <button>MFE2 Button</button>
);

export default Button;

import './App.css';
import Button from './Button';

const App = () => {
  return (
    <div className="content">
      <h1>MFE2</h1>
      <Button />
    </div>
  );
};

export default App;

#Step 5: Configure Rsbuild em MFE2

First crie module-federation.config.ts em arquivo no root diretório de MFE2 com o seguintes configuração:

import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';

export default createModuleFederationConfig({
  name: 'remote',
  exposes: {
    './Button': './src/Button',
  },
  filename: 'remoteEntry.js',
  shared: {
    ...dependencies,
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
});

E then modify o rsbuild.config.ts arquivo no root diretório de MFE2 com o seguintes configuração:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
+ import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+ import mfConfig from './module-federation.config';

export default defineConfig({
  server: {
    port: 3002
  },
  plugins: [
    pluginReact()
+   pluginModuleFederation(mfConfig)
  ]
});

#Step 6: Consuma Remote Módulo

Consuma o módulo exposto de MFE2 em MFE1

import React from 'react';
import Button from 'remote/Button'; // federated import

function App() {
  return (
    <div>
      <h1>MFE1</h1>
      <Button />
    </div>
  );
}

export default App;

import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';

export default createModuleFederationConfig({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3002/remoteEntry.js',
  },
  shared: {
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
});

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
+ import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+ import mfConfig from './module-federation.config';

export default defineConfig({
  server: {
    port: 3001
  },
  plugins: [
    pluginReact(),
+   pluginModuleFederation(mfConfig)
  ]
});

Este configuração initiates Module Federation within MFE1, e upon initiating o desenvolvimento servidor, it é accessible at http://localhost:3001.

Similarly, o configuração activates Module Federation for MFE2, thereby exposing o Button componente at http://localhost:3002/remoteEntry.js. Com o desenvolvimento servidor operational, it becomes accessible at http://localhost:3002.