0PricingLogin▼
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.

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;

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