Architectuur van micro-frontends met Module Federation · Les

Project instellen en configureren

Stel vanaf nul een nieuw project in en configureer Webpack en Module Federation voor meerdere applicaties.

Les 1 van 412 stappen

Project instellen en configureren is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.

Welkom bij gefedereerde apps!

Klaar om je eerste Micro Frontend-applicatie te bouwen? In deze les leer je hoe je met Webpacks Module Federation een host- en een remoteapplicatie instelt.

We beginnen vanaf nul en behandelen de projectstructuur, de basisconfiguratie van Webpack en de integratie van de krachtige Module Federation Plugin.

Host- en remote-apps

In Module Federation hebben we twee hoofdtypen applicaties:

Hostapplicatie: Dit is je hoofdapplicatie die componenten of modules uit andere applicaties gebruikt (laadt). Je kunt deze zien als de coördinator.
Remoteapplicatie: Dit is een onafhankelijke applicatie die haar componenten of modules beschikbaar stelt voor gebruik door anderen.

We stellen beide in binnen ons project!

Mappenstructuur van het project

Laten we ons project organiseren. We maken een hoofdmap en vervolgens submappen voor onze host- en remoteapplicaties. Zo blijven ze gescheiden, maar bevinden ze zich wel in dezelfde werkruimte, wat ontwikkelen eenvoudiger maakt.

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

Webpack initialiseren en installeren

Ga eerst naar zowel de map host als de map remote en initialiseer npm. Installeer daarna Webpack en de opdrachtregelinterface (CLI) als ontwikkelafhankelijkheden, samen met de ontwikkelserver en de 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 en HTML

De hostapplicatie heeft een entrypunt nodig. We maken een eenvoudig bestand index.js dat als hoofdscript voor onze host dient. Hier start onze applicatie.

// 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 en entry

Onze remoteapplicatie stelt een eenvoudige React-component beschikbaar. We maken een App.js voor de component en een index.js om deze voor lokale ontwikkeling te renderen. We gaan ervan uit dat React al is geïnstalleerd.

// 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-configuratie: basis van de host

Laten we nu een eenvoudige webpack.config.js voor de host maken. Deze configuratie vertelt Webpack waar het bundelen moet beginnen en waar de uiteindelijke bundel moet worden uitgevoerd, en stelt een ontwikkelserver in.

// 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-configuratie: basis van de remote

Net als de host heeft ook de remote-app een eigen Webpack-configuratie nodig. We stellen het entrypunt, de uitvoer, de poort van de ontwikkelserver en de HTML-plugin in.

// 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',
    }),
  ],
};

De ModuleFederationPlugin

Dit vormt de kern van onze opstelling! Webpacks ModuleFederationPlugin zorgt ervoor dat applicaties dynamisch code uit andere applicaties kunnen laden. Je kunt hiermee het volgende definiëren:

name: Een unieke naam voor je applicatie.
remotes: De remote applicaties waarvan deze app modules gebruikt.
exposes: De modules die deze app aan anderen aanbiedt.
shared: Gemeenschappelijke afhankelijkheden om te delen.

Host configureren met MF

Laten we nu de webpack.config.js van de host bijwerken zodat deze ModuleFederationPlugin gebruikt. De host definieert zijn eigen name en geeft de remotes op die hij wil gebruiken.

// 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' }),
  ],
};

Snelle controle: Module Federation

Welke eigenschap gebruik je bij het configureren van ModuleFederationPlugin voor een hostapplicatie om de remote applicaties te definiëren waarvan deze modules gebruikt?

Beantwoord dit in de interactieve les

Samenvatting: projectinstelling voltooid!

Goed gedaan! Je hebt de basisstructuur van het project ingesteld en Webpack geconfigureerd met de Module Federation Plugin voor zowel een host- als een remoteapplicatie.

We hebben npm geïnitialiseerd en Webpack geïnstalleerd.
We hebben de basisconfiguratie van Webpack voor beide apps ingesteld.
We hebben ModuleFederationPlugin geïntegreerd en de host-name en remotes en de remote-name, filename en exposes gedefinieerd.

Hierna leren we hoe je componenten tussen deze applicaties daadwerkelijk deelt en gebruikt!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Project instellen en configureren” gratis?

Ja — de volledige tekst van “Project instellen en configureren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.

Wat leer ik in “Project instellen en configureren”?

Stel vanaf nul een nieuw project in en configureer Webpack en Module Federation voor meerdere applicaties. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?

Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Project instellen en configureren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?

Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Project instellen en configureren
Modules en componenten delen
Een eenvoudige gefedereerde app bouwen
Uw gefedereerde app lokaal uitvoeren en debuggen

← Terug naar Architectuur van micro-frontends met Module Federation