/ecomm

Project to explore very basics of Microfrontend architecture.

Primary LanguageJavaScript

Ecomm

A simple (understatement) ecommerce site to explore Microfrontend.

Integration

There are different types of integration methods, but for this project, we'll be utilizing runtime integration. Specifically, we'll leverage Webpack's Module Federation to achieve seamless communication and collaboration between the microfrontends.

Integration Methods Overview:

  1. Build Time Integration:

    • Description: In this approach, microfrontends are built independently, and a build process generates the final bundle containing all dependencies.
    • Pros: Simplifies runtime overhead, as the entire application is bundled beforehand.
    • Cons: Can lead to larger bundle sizes and increased initial loading times.

  2. Runtime Integration:

    • Description: Microfrontends are loaded dynamically during runtime, allowing for more flexibility and efficient use of resources.
    • Pros: Enables independent development and deployment of microfrontends. Reduced initial loading times and efficient use of shared dependencies.
    • Cons: Requires careful management of dependencies during runtime.

Runtime Integration with Webpack's Module Federation:

Dependencies Explanation:

faker (v5.5.3):

  • Purpose: Used for generating fake data, especially helpful during development and testing phases.
  • Example Use: Simulating product details or user information.

html-webpack-plugin (v5.6.0):

  • Purpose: Simplifies the process of creating HTML files that include the necessary script tags for webpack bundles.
  • Example Use: Automatically generates an HTML file that includes the necessary script tags for your microfrontend bundle.

webpack (v5.89.0):

  • Purpose: A powerful module bundler that facilitates the bundling of JavaScript, CSS, and other assets for web applications.
  • Example Use: Bundles and optimizes your microfrontend code for efficient loading.

webpack-cli (v5.1.4):

  • Purpose: The command-line interface for webpack, allowing you to run webpack commands from the terminal.
  • Example Use: Executes webpack commands to build or serve your microfrontends.

webpack-dev-server (v4.15.1):

  • Purpose: Provides a development server that serves your microfrontend bundles, allowing for quick and easy development with automatic hot module replacement.
  • Example Use: Used in development to serve your microfrontend locally with live reloading.

Module Federation in Detail:

Webpack Module Federation:

  • Description: A feature introduced in Webpack 5 that enables the dynamic sharing of code between independently deployed applications.
  • How it Works: Microfrontends built with Module Federation can dynamically import and use code from other microfrontends at runtime.
  • Key Concepts:
    • Remotes: Represent other microfrontends and expose specified modules for consumption.
    • Exposed Modules: Parts of a microfrontend that can be consumed by other microfrontends.
    • Shared Modules: Dependencies that are shared between microfrontends to avoid redundant code.
  • Example Use: Enables the seamless integration of features from different microfrontends within the Ecomm application.

Webpack Configuration for Module Federation

This Webpack configuration is for the `container`` application that uses Module Federation to dynamically load and integrate remote modules.

Plugins

ModuleFederationPlugin

This plugin is a crucial part of Module Federation. It allows the container to dynamically import and use remote modules.

  • name: 'container': Specifies the unique name of the container application.

  • remotes: Defines the remote modules that the container can consume.

    • products: Represents a remote module named 'products'. The URL http://localhost:8081/remoteEntry.js is the entry point to the remote module. The remoteEntry.js file contains information about what modules are exposed by the remote.

Module Federation Concept

In the context of Module Federation:

  • The container application (container) dynamically imports and uses a remote module (products) using the ModuleFederationPlugin.

  • The remoteEntry.js file generated by the remote module contains information about what modules are exposed and how the container can consume them.

  • The container can use the exposed modules from the remote as if they were local modules, creating a seamless integration of remote functionalities into the container application.

Webpack Configuration for Products Service

This Webpack configuration is for a module or service named 'products' that uses Module Federation to expose its functionality for consumption by other applications.

devServer: { port: 8081 }

Configures the development server to run on port 8081.

Plugins

ModuleFederationPlugin

This plugin is a key part of Module Federation. It allows the module to expose its functionality for consumption by other applications.

  • name: 'products': Specifies the unique name of the module.

  • filename: 'remoteEntry.js': Specifies the filename that will be used as the entry point for other applications to dynamically load the module.

  • exposes: Defines the modules that the service exposes.

    • './ProductsIndex': Exposes a module located at './src/index' under the alias './ProductsIndex'. This module will be accessible by other applications that consume the 'products' module.
HtmlWebpackPlugin
  • template: './public/index.html': Specifies the path to the HTML template file. The generated bundles will be injected into this template.
Module Federation Concept

In the context of Module Federation:

  • The 'products' module exposes a module named './ProductsIndex' through the ModuleFederationPlugin.

  • The remoteEntry.js file generated by the 'products' module contains information about the exposed module and how other applications can consume it.

Running the Services

To run the services, execute the following commands in the directory for all services:

npm install   # Install dependencies
npm run start # Start the development server