0Pricing
Micro Frontends Architecture with Module Federation · Lesson

Building a Simple Federated App

Develop a basic working example of a Micro Frontend application using Module Federation.

Building a Simple Federated App is a free Micro Frontends Architecture with Module Federation lesson on CoddyKit — lesson 3 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.

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!

Frequently asked questions

Is the “Building a Simple Federated App” lesson free?

Yes — the full text of “Building a Simple Federated App” 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 “Building a Simple Federated App”?

Develop a basic working example of a Micro Frontend application using Module Federation. 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 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Building a Simple Federated App” 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