Mikrofrontend-arkitektur med Module Federation · leksjon

Prosjektoppsett og konfigurasjon

Sett opp et nytt prosjekt fra grunnen av, og konfigurer Webpack og Module Federation for flere applikasjoner.

Leksjon 1 av 412 trinn

Prosjektoppsett og konfigurasjon er en gratis leksjon i Mikrofrontend-arkitektur med Module Federation på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mikrofrontend-arkitektur med Module Federation, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.

Velkommen til fødererte applikasjoner!

Er du klar til å bygge din første Micro Frontend-applikasjon? I denne leksjonen lærer du å sette opp en vertsapplikasjon og en remote-applikasjon ved hjelp av Webpacks Module Federation.

Vi begynner fra grunnen av og går gjennom prosjektstruktur, grunnleggende Webpack-konfigurasjon og integrering av den kraftige Module Federation Plugin.

Verts- og remote-applikasjoner

I Module Federation har vi to hovedtyper applikasjoner:

Vertsapplikasjon: Dette er hovedapplikasjonen eller skallet ditt, som konsumerer (laster inn) komponenter eller moduler fra andre applikasjoner. Tenk på den som koordinatoren.
Remote-applikasjon: Dette er en uavhengig applikasjon som eksponerer (deler) komponentene eller modulene sine slik at andre kan konsumere dem.

Vi skal sette opp begge i prosjektet vårt!

Prosjektets mappestruktur

La oss organisere prosjektet. Vi oppretter først en hovedmappe og deretter undermapper for verts- og remote-applikasjonene. Slik holdes de atskilt, men i samme arbeidsområde, noe som gjør utviklingen enklere.

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

Initialiser og installer Webpack

Gå først inn i både host- og remote-mappene, og initialiser npm. Installer deretter Webpack og kommandolinjegrensesnittet (CLI) som utviklingsavhengigheter, sammen med utviklingsserveren og HTML-plugin-modulen.

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

Vertsapp: entry og HTML

Vertsapplikasjonen trenger et entry-punkt. Vi oppretter en enkel index.js-fil som fungerer som hovedskriptet for verten. Det er her applikasjonen starter.

// 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: komponent og entry

Remote-applikasjonen vår skal eksponere en enkel React-komponent. La oss opprette en App.js-fil for komponenten og en index.js-fil som gjengir den under lokal utvikling. Vi antar at React allerede er installert.

// 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-konfigurasjon: grunnlag for verten

La oss nå opprette en grunnleggende webpack.config.js for verten. Denne konfigurasjonen forteller Webpack hvor pakkingen skal starte, hvor den ferdige pakken skal skrives, og setter opp en utviklingsserver.

// 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-konfigurasjon: grunnlag for remoten

I likhet med verten trenger remote-applikasjonen sin egen Webpack-konfigurasjon. Vi setter opp entry-punktet, output, porten for utviklingsserveren og HTML-plugin-modulen.

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

ModuleFederationPlugin

Dette er kjernen i oppsettet vårt! Webpacks ModuleFederationPlugin gjør det mulig for applikasjoner å laste inn kode dynamisk fra andre applikasjoner. Den lar deg definere:

name: Et unikt navn for applikasjonen.
remotes: Hvilke remote-applikasjoner denne appen konsumerer.
exposes: Hvilke moduler denne appen tilbyr til andre.
shared: Felles avhengigheter som skal deles.

Konfigurere verten med MF

La oss nå oppdatere vertens webpack.config.js slik at den bruker ModuleFederationPlugin. Verten definerer sitt eget name og angir hvilke remotes den skal konsumere.

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

Kjapp sjekk: Module Federation

Når du konfigurerer ModuleFederationPlugin for en vertsapplikasjon, hvilken egenskap brukes til å definere remote-applikasjonene den skal konsumere?

Besvar den i den interaktive leksjonen

Oppsummering: prosjektet er klart!

Godt jobbet! Du har satt opp den grunnleggende prosjektstrukturen og konfigurert Webpack med Module Federation Plugin for både en vertsapplikasjon og en remote-applikasjon.

Vi initialiserte npm og installerte Webpack.
Vi konfigurerte grunnleggende Webpack for begge appene.
Vi integrerte ModuleFederationPlugin og definerte vertens name og remotes, samt remotens name, filename og exposes.

Deretter skal vi lære hvordan vi faktisk deler og konsumerer komponenter mellom disse applikasjonene!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Prosjektoppsett og konfigurasjon» gratis?

Ja – hele teksten i «Prosjektoppsett og konfigurasjon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Mikrofrontend-arkitektur med Module Federation-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.

Hva lærer jeg i «Prosjektoppsett og konfigurasjon»?

Sett opp et nytt prosjekt fra grunnen av, og konfigurer Webpack og Module Federation for flere applikasjoner. Du øver på Mikrofrontend-arkitektur med Module Federation med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mikrofrontend-arkitektur med Module Federation?

Ingen tidligere erfaring er nødvendig. Mikrofrontend-arkitektur med Module Federation på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Prosjektoppsett og konfigurasjon»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mikrofrontend-arkitektur med Module Federation-leksjonen?

Ja. Alle Mikrofrontend-arkitektur med Module Federation-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Prosjektoppsett og konfigurasjon
Dele moduler og komponenter
Bygge en enkel føderert app
Kjøre og feilsøke den federerte appen lokalt

← Tilbake til Mikrofrontend-arkitektur med Module Federation