0Pricing
Micro Frontends Architecture with Module Federation · Leçon

Configuration du projet

Configurez un nouveau projet à partir de zéro en paramétrant Webpack et la fédération de modules pour plusieurs applications.

Configuration du projet est une leçon Micro Frontends Architecture with Module Federation gratuite sur CoddyKit. Ceci est la leçon 1 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.

Welcome to Federated Apps!

Ready to build your first Micro Frontend application? This lesson guides you through setting up a host and a remote application using Webpack's Module Federation.

We'll start from scratch, covering project structure, basic Webpack configuration, and integrating the powerful Module Federation Plugin.

Host and Remote Apps

In Module Federation, we have two main types of applications:

  • Host Application: This is your main shell application that consumes (loads) components or modules from other applications. Think of it as the orchestrator.
  • Remote Application: This is an independent application that exposes (shares) its components or modules for others to consume.

We'll set up both in our project!

Project Folder Structure

Let's organize our project. We'll create a main directory and then sub-directories for our host and remote applications. This keeps them separate but within the same workspace for easy development.

my-federated-app/
├── host/
│   ├── src/
│   └── public/
└── remote/
    ├── src/
    └── public/

Initialize & Install Webpack

First, navigate into both host and remote directories and initialize npm. Then, install Webpack and its command-line interface (CLI) as development dependencies, along with dev server and HTML plugin.

// In host/ and remote/ directories:
npm init -y
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
npm install react react-dom --save

Host App: Entry & HTML

The host application needs an entry point. We'll create a simple index.js file that serves as the main script for our host. This is where our application will start.

// host/src/index.js
console.log('Host application is now running!');

// host/public/index.html
<!DOCTYPE html>
<html>
  <head><title>Host App</title></head>
  <body>
    <div id="root"></div>
  </body>
</html>

Remote App: Component & Entry

Our remote application will expose a simple React component. Let's create an App.js for the component and an index.js to render it for local development. We'll assume React is already installed.

// remote/src/App.js
import React from 'react';

const App = () => {
  return (
    <div style={{ padding: '10px', border: '1px solid blue' }}>
      <h3>Remote App Component</h3>
      <p>Hello from the remote!</p>
    </div>
  );
};

export default App;

// remote/src/index.js (for local dev)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

Webpack Config: Host Base

Now, let's create a basic webpack.config.js for the host. This configuration tells Webpack where to start bundling and where to output the final bundle, and sets up a dev server.

// host/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8080,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Webpack Config: Remote Base

Similar to the host, the remote app also needs its own Webpack configuration. We'll set up its entry point, output, dev server port, and HTML plugin.

// remote/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8081,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

The ModuleFederationPlugin

This is the core of our setup! Webpack's ModuleFederationPlugin enables applications to dynamically load code from other applications. It allows you to define:

  • name: A unique name for your application.
  • remotes: Which remote applications this app consumes.
  • exposes: Which modules this app offers to others.
  • shared: Common dependencies to share.

Configuring Host with MF

Now, let's update the host's webpack.config.js to use the ModuleFederationPlugin. The host will define its own name and specify the remotes it intends to consume.

// host/webpack.config.js (with MF)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: { port: 8080 },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remote@http://localhost:8081/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

Quick Check: Module Federation

When configuring the ModuleFederationPlugin for a host application, which property is used to define the remote applications it will consume?

Recap: Project Setup Complete!

Great job! You've successfully set up the foundational project structure and configured Webpack with the Module Federation Plugin for both a host and a remote application.

  • We initialized npm and installed Webpack.
  • Configured basic Webpack for both apps.
  • Integrated ModuleFederationPlugin, defining host name and remotes, and remote name, filename, and exposes.

Next, we'll learn how to actually share and consume components between these applications!

Questions Fréquemment Posées

La leçon « Configuration du projet » est-elle gratuite ?

Oui — le texte complet de « Configuration du projet » 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 « Configuration du projet » ?

Configurez un nouveau projet à partir de zéro en paramétrant Webpack et la fédération de modules pour plusieurs applications. 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 1 sur 4.

Combien de temps prend la leçon « Configuration du projet » ?

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

  1. Configuration du projet
  2. Partage de modules et de composants
  3. Créer une application fédérée simple
  4. Exécuter et déboguer votre application fédérée localement
← Retour à Micro Frontends Architecture with Module Federation