Micro Frontends Architecture with Module Federation · Leçon

Créer une application fédérée simple

Développez un exemple fonctionnel de base d’application à micro-interfaces à l’aide de la fédération de modules.

Créer une application fédérée simple est une leçon Micro Frontends Architecture with Module Federation gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Micro Frontends Architecture with Module Federation, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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!

Questions Fréquemment Posées

La leçon « Créer une application fédérée simple » est-elle gratuite ?

Oui — le texte complet de « Créer une application fédérée simple » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Micro Frontends Architecture with Module Federation, passe à CoddyKit PRO. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer une application fédérée simple » ?

Développez un exemple fonctionnel de base d’application à micro-interfaces à l’aide de la fédération de modules. Tu pratiques Micro Frontends Architecture with Module Federation avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Micro Frontends Architecture with Module Federation ?

Aucune expérience préalable n'est requise. Micro Frontends Architecture with Module Federation sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Créer une application fédérée simple » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Micro Frontends Architecture with Module Federation ?

Oui. Chaque leçon Micro Frontends Architecture with Module Federation inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configuration du projet
Partage de modules et de composants
Créer une application fédérée simple
Exécuter et déboguer votre application fédérée localement

← Retour à Micro Frontends Architecture with Module Federation