Penyiapan dan Konfigurasi Proyek
Siapkan proyek baru dari awal dengan mengonfigurasi Webpack dan Module Federation untuk beberapa aplikasi.
Penyiapan dan Konfigurasi Proyek adalah pelajaran Micro Frontends Architecture with Module Federation gratis di CoddyKit. Ini adalah pelajaran 1 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.
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 --saveHost 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 hostnameandremotes, and remotename,filename, andexposes.
Next, we'll learn how to actually share and consume components between these applications!
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penyiapan dan Konfigurasi Proyek” gratis?
Ya — teks lengkap “Penyiapan dan Konfigurasi Proyek” 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 “Penyiapan dan Konfigurasi Proyek”?
Siapkan proyek baru dari awal dengan mengonfigurasi Webpack dan Module Federation untuk beberapa aplikasi. 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 1 dari 4.
Berapa lama pelajaran “Penyiapan dan Konfigurasi Proyek” 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
- Penyiapan dan Konfigurasi Proyek
- Berbagi Modul dan Komponen
- Membangun Aplikasi Federasi Sederhana
- Menjalankan dan Men-debug Aplikasi Federasi Secara Lokal