0Pricing
Micro Frontends Architecture with Module Federation · Lesson

Project Setup & Configuration

Set up a new project from scratch, configuring Webpack and Module Federation for multiple applications.

Project Setup & Configuration is a free Micro Frontends Architecture with Module Federation lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Micro Frontends Architecture with Module Federation learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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!

Frequently asked questions

Is the “Project Setup & Configuration” lesson free?

Yes — the full text of “Project Setup & Configuration” is free to read here on the web, and the Micro Frontends Architecture with Module Federation course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Micro Frontends Architecture with Module Federation course, upgrade to CoddyKit PRO.

What will I learn in “Project Setup & Configuration”?

Set up a new project from scratch, configuring Webpack and Module Federation for multiple applications. You practise Micro Frontends Architecture with Module Federation with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Micro Frontends Architecture with Module Federation?

No prior experience is required. Micro Frontends Architecture with Module Federation on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Project Setup & Configuration” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Micro Frontends Architecture with Module Federation lesson?

Yes. Every Micro Frontends Architecture with Module Federation lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Project Setup & Configuration
  2. Sharing Modules & Components
  3. Building a Simple Federated App
  4. Running and Debugging Your Federated App Locally
← Back to Micro Frontends Architecture with Module Federation