0Pricing
Micro Frontends Architecture with Module Federation · Aula

Construção de uma aplicação federada simples

Desenvolva um exemplo básico e funcional de uma aplicação de microfrontend usando federação de módulos.

Construção de uma aplicação federada simples é uma aula grátis de Micro Frontends Architecture with Module Federation no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Micro Frontends Architecture with Module Federation, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Our First Federated App

Welcome to building your first Micro Frontend application! In previous lessons, we learned about setting up Webpack for Module Federation and the core concepts of exposing and consuming modules.

Now, we'll bring those concepts together to build a basic, runnable example. Our goal is to create a Host Application that consumes a simple Button component from a separate Remote Application.

Remote App: The Component

First, let's create a simple React component in our Remote Application that we intend to share. This will be a basic button.

Imagine this component lives in src/components/MyButton.js within your remote project.

import React from 'react';

const MyButton = () => {
  return (
    <button style={{
      padding: '10px 15px',
      backgroundColor: '#61dafb',
      color: 'white',
      border: 'none',
      borderRadius: '5px',
      cursor: 'pointer'
    }}>
      Remote Button
    </button>
  );
};

export default MyButton;

Remote App: Entry Point

This is the main entry file for our Remote Application. It will render its own content and also make the MyButton component available for exposure.

This code represents src/index.js in your Remote App.

import React from 'react';
import ReactDOM from 'react-dom';
import MyButton from './components/MyButton';

const App = () => {
  return (
    <div style={{ padding: '20px', border: '2px dashed #61dafb', margin: '10px' }}>
      <h2>Remote App Content</h2>
      <p>This part is rendered directly by the Remote App.</p>
      <MyButton />
      <p>The button above is our shared component.</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Remote App: Webpack Exposing

To make MyButton available to other applications, we configure the Remote App's webpack.config.js using the ModuleFederationPlugin. We specify its name, the filename for its manifest, and the exposes property.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack configuration
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './MyButton': './src/components/MyButton',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.2' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};

Host App: Main Structure

Now, let's look at our Host Application. Initially, it's a standard React application. We'll modify its main entry file (src/index.js) to consume the remote component.

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div style={{ padding: '20px', border: '2px solid #50b0ff', margin: '10px' }}>
      <h2>Host Application Content</h2>
      <p>This content is rendered by the Host App.</p>
      {/* The remote button will appear below this text */}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Host App: Webpack Consuming

The Host App's webpack.config.js needs to know about the Remote App. We use the remotes property within ModuleFederationPlugin to define the remote and its entry file URL.

Remember to adjust the http://localhost:8081 URL to where your remote application is actually served.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack configuration
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:8081/remoteEntry.js', // Adjust port if needed
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.2' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};

Host App: Loading Remote Component

With the Webpack configuration in place, we can now dynamically import and render the MyButton component from our Remote App into the Host App. We use React's lazy and Suspense for this.

This code updates src/index.js in your Host App.

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

// Dynamically import the remote component
const RemoteMyButton = React.lazy(() => import('remoteApp/MyButton'));

const App = () => {
  return (
    <div style={{ padding: '20px', border: '2px solid #50b0ff', margin: '10px' }}>
      <h2>Host Application Content</h2>
      <p>This content is rendered by the Host App.</p>
      <Suspense fallback={<div>Loading Remote Button...</div>}>
        <RemoteMyButton />
      </Suspense>
      <p>The button above is loaded from the Remote App!</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Running Both Applications

To see your federated application in action, you need to run both the Remote and Host applications concurrently. Each application will typically have its own development server.

  • Step 1: Start the Remote App
    Navigate to your Remote App's directory in a terminal and run npm start (or similar command).
  • Step 2: Start the Host App
    Open another terminal, navigate to your Host App's directory, and run npm start.
  • Step 3: Open the Host App
    Access the Host App's URL in your browser (e.g., http://localhost:8080 if that's its port).

Verify the Integration

When you open the Host App in your browser, you should see:

  • Content rendered directly by the Host Application.
  • A 'Loading Remote Button...' fallback message briefly.
  • The 'Remote Button' component, visually styled and provided entirely by the Remote Application, appearing within the Host App's layout.

This demonstrates a basic, yet powerful, example of Module Federation in action!

Federated App Check

Let's check your understanding of building a simple federated app.

Recap: Federated Success!

Congratulations! You've successfully built a basic Micro Frontend application using Module Federation.

  • We defined a component in a Remote App.
  • Configured the Remote App's Webpack to expose that component.
  • Set up the Host App's Webpack to consume from the remote.
  • Used React's lazy and Suspense to dynamically load the remote component.

This foundational example opens the door to creating more complex, independently deployable Micro Frontends!

Perguntas Frequentes

A aula “Construção de uma aplicação federada simples” é grátis?

Sim — o texto completo de “Construção de uma aplicação federada simples” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Micro Frontends Architecture with Module Federation, atualize para CoddyKit PRO. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.

O que vou aprender em “Construção de uma aplicação federada simples”?

Desenvolva um exemplo básico e funcional de uma aplicação de microfrontend usando federação de módulos. Você pratica Micro Frontends Architecture with Module Federation com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Micro Frontends Architecture with Module Federation?

Nenhuma experiência prévia é necessária. Micro Frontends Architecture with Module Federation no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Construção de uma aplicação federada simples”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Micro Frontends Architecture with Module Federation?

Sim. Cada aula de Micro Frontends Architecture with Module Federation inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do projeto
  2. Compartilhamento de módulos e componentes
  3. Construção de uma aplicação federada simples
  4. Executando e Depurando seu Aplicativo Federado Localmente
← Voltar para Micro Frontends Architecture with Module Federation