0Pricing
Micro Frontends Architecture with Module Federation · Lektion

Projekteinrichtung und Konfiguration

Richten Sie ein neues Projekt von Grund auf ein und konfigurieren Sie Webpack und Module Federation für mehrere Anwendungen.

Projekteinrichtung und Konfiguration ist eine kostenlose Micro Frontends Architecture with Module Federation-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Micro Frontends Architecture with Module Federation-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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!

Häufig gestellte Fragen

Ist die Lektion „Projekteinrichtung und Konfiguration“ kostenlos?

Ja — der vollständige Text von „Projekteinrichtung und Konfiguration“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Micro Frontends Architecture with Module Federation-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Projekteinrichtung und Konfiguration“?

Richten Sie ein neues Projekt von Grund auf ein und konfigurieren Sie Webpack und Module Federation für mehrere Anwendungen. Du übst Micro Frontends Architecture with Module Federation mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Micro Frontends Architecture with Module Federation zu starten?

Keine Vorkenntnisse erforderlich. Micro Frontends Architecture with Module Federation auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Projekteinrichtung und Konfiguration“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Micro Frontends Architecture with Module Federation-Lektion Code schreiben und ausführen?

Ja. Jede Micro Frontends Architecture with Module Federation-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Projekteinrichtung und Konfiguration
  2. Module und Komponenten gemeinsam nutzen
  3. Eine einfache föderierte App entwickeln
  4. Ihre föderierte App lokal ausführen und debuggen
← Zurück zu Micro Frontends Architecture with Module Federation