0Pricing
Micro Frontends Architecture with Module Federation · Pelajaran

Membangun Aplikasi Federasi Sederhana

Kembangkan contoh dasar aplikasi frontend mikro yang dapat berfungsi menggunakan Module Federation.

Membangun Aplikasi Federasi Sederhana adalah pelajaran Micro Frontends Architecture with Module Federation gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Micro Frontends Architecture with Module Federation, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Micro Frontends Architecture with Module Federation mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Aplikasi Federasi Sederhana” gratis?

Ya — teks lengkap “Membangun Aplikasi Federasi Sederhana” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Micro Frontends Architecture with Module Federation, upgrade ke CoddyKit PRO. Kursus Micro Frontends Architecture with Module Federation mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Aplikasi Federasi Sederhana”?

Kembangkan contoh dasar aplikasi frontend mikro yang dapat berfungsi menggunakan Module Federation. Kamu berlatih Micro Frontends Architecture with Module Federation dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Micro Frontends Architecture with Module Federation?

Tidak diperlukan pengalaman sebelumnya. Micro Frontends Architecture with Module Federation di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membangun Aplikasi Federasi Sederhana” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Micro Frontends Architecture with Module Federation ini?

Ya. Setiap pelajaran Micro Frontends Architecture with Module Federation menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Penyiapan dan Konfigurasi Proyek
  2. Berbagi Modul dan Komponen
  3. Membangun Aplikasi Federasi Sederhana
  4. Menjalankan dan Men-debug Aplikasi Federasi Secara Lokal
← Kembali ke Micro Frontends Architecture with Module Federation