0Pricing
Micro Frontends Architecture with Module Federation · Lekcja

Tworzenie prostej aplikacji federacyjnej

Stwórz podstawowy, działający przykład aplikacji Micro Frontend z użyciem Module Federation.

Tworzenie prostej aplikacji federacyjnej to bezpłatna lekcja Micro Frontends Architecture with Module Federation na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Micro Frontends Architecture with Module Federation, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Micro Frontends Architecture with Module Federation zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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!

Często zadawane pytania

Czy lekcja „Tworzenie prostej aplikacji federacyjnej” jest bezpłatna?

Tak — pełny tekst „Tworzenie prostej aplikacji federacyjnej” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Micro Frontends Architecture with Module Federation, przejdź na CoddyKit PRO. Kurs Micro Frontends Architecture with Module Federation zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie prostej aplikacji federacyjnej”?

Stwórz podstawowy, działający przykład aplikacji Micro Frontend z użyciem Module Federation. Ćwiczysz Micro Frontends Architecture with Module Federation z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Micro Frontends Architecture with Module Federation?

Nie wymagamy żadnego doświadczenia. Micro Frontends Architecture with Module Federation w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Tworzenie prostej aplikacji federacyjnej”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Micro Frontends Architecture with Module Federation?

Tak. Każda lekcja Micro Frontends Architecture with Module Federation zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja projektu
  2. Udostępnianie modułów i komponentów
  3. Tworzenie prostej aplikacji federacyjnej
  4. Lokalne uruchamianie i debugowanie aplikacji federacyjnej
← Powrót do Micro Frontends Architecture with Module Federation