0Pricing
Micro Frontends Architecture with Module Federation · レッスン

プロジェクトのセットアップと設定

ゼロから新しいプロジェクトを構築し、複数のアプリケーションに対応するようWebpackとModule Federationを設定します。

「プロジェクトのセットアップと設定」はCoddyKit上の無料Micro Frontends Architecture with Module Federationレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはMicro Frontends Architecture with Module Federation学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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

Host 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 host name and remotes, and remote name, filename, and exposes.

Next, we'll learn how to actually share and consume components between these applications!

よくある質問

「プロジェクトのセットアップと設定」レッスンは無料ですか？

はい。「プロジェクトのセットアップと設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Micro Frontends Architecture with Module Federationコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

「プロジェクトのセットアップと設定」で何を学びますか？

ゼロから新しいプロジェクトを構築し、複数のアプリケーションに対応するようWebpackとModule Federationを設定します。 ブラウザで直接実行するハンズオンコードでMicro Frontends Architecture with Module Federationを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Micro Frontends Architecture with Module Federationを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのMicro Frontends Architecture with Module Federationは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「プロジェクトのセットアップと設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このMicro Frontends Architecture with Module Federationレッスンでコードを書いて実行できますか？

はい。すべてのMicro Frontends Architecture with Module Federationレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. プロジェクトのセットアップと設定
  2. モジュールとコンポーネントの共有
  3. シンプルなFederatedアプリの構築
  4. フェデレーテッドアプリのローカル実行とデバッグ
← Micro Frontends Architecture with Module Federationに戻る