Deploying Independent Micro Frontend Components

Deploying independent Micro Frontend Components is a key practice in modern frontend development. Micro frontends break down a large frontend application into smaller, independent, and reusable pieces, which can be developed, tested, and deployed separately. This allows teams to work autonomously, choose different technologies, and deploy features without waiting for others to be ready.

In this guide, we will explore how to deploy Micro Frontend Components independently, leveraging different deployment strategies and tools. We will look at two major approaches: using Module Federation (with Webpack) and Single-SPA, two of the most popular frameworks for handling micro frontends.

Key Benefits of Independent Micro Frontend Deployments

1. Team Autonomy: Each team can deploy their micro frontend independently, speeding up the development process.
2. Faster Releases: Since micro frontends are separate, a team can deploy only the changes relevant to their domain without waiting for other teams.
3. Technology Independence: Each micro frontend can use a different framework or version of libraries, allowing flexibility and gradual migration to new technologies.
4. Scalability: Micro frontends can be scaled independently based on user traffic or feature requirements.
5. Reduced Risk: Independent deployments mean that updates to one part of the frontend won’t affect the entire application, minimizing the risk of breaking things in production.

Key Considerations for Micro Frontend Deployment

1. Routing and Integration: Micro frontends need to be integrated into a unified experience, often through shared routing or mounting mechanisms (like Single-SPA or Webpack Module Federation).
2. Shared Dependencies: Avoid redundant dependencies by sharing common libraries across micro frontends (e.g., React, Vue, etc.).
3. Communication Between Micro Frontends: Micro frontends must communicate efficiently, whether through events, shared state, or APIs.
4. Versioning: Proper version control and management of micro frontends are critical to avoid breaking changes.

Approach 1: Deploying Micro Frontends with Webpack Module Federation

Webpack Module Federation allows micro frontends to share code dynamically at runtime. This makes it a great choice for deploying independent components that need to be consumed by a host application.

1.1: Setting Up the Micro Frontend (React Example)

Let’s say we are deploying a React-based micro frontend. Here’s how to configure it:

1.1.1: Configure Webpack with Module Federation

In the micro frontend application, configure Webpack to expose the components.

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  devServer: {
    port: 3001,  // Micro frontend port
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'microFrontend',
      filename: 'remoteEntry.js',  // This file will be loaded by the host
      exposes: {
        './Header': './src/Header',  // Expose the Header component
      },
      shared: ['react', 'react-dom'],  // Shared dependencies (avoid duplication)
    }),
  ],
};

1.1.2: Expose the Component

Create a simple React component to be exposed to other applications.

// src/Header.js
import React from 'react';

const Header = () => {
  return <h1>Hello from Micro Frontend</h1>;
};

export default Header;

1.1.3: Update the Package Scripts

Make sure to set the appropriate build scripts in the package.json.

"scripts": {
  "start": "webpack serve --config webpack.config.js",
  "build": "webpack --config webpack.config.js"
}

Now, run the micro frontend:

npm start

The micro frontend will be accessible at http://localhost:3001, and the file remoteEntry.js will be available for the host application to load.

1.2: Host Application Setup

The host application will load the micro frontend components dynamically using Module Federation.

1.2.1: Configure Webpack in the Host Application

In the host application (which can be another React, Angular, or Vue app), configure Webpack to import and mount the remote micro frontend.

// webpack.config.js for the host app
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  devServer: {
    port: 3000,  // Host app port
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        microFrontend: 'microFrontend@http://localhost:3001/remoteEntry.js',  // URL of the remote micro frontend
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

1.2.2: Dynamically Import the Micro Frontend Component

In the host app, dynamically load the Header component from the micro frontend.

// src/App.js in the host app
import React, { Suspense } from 'react';

// Dynamically import Header component from the micro frontend
const Header = React.lazy(() => import('microFrontend/Header'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading Header...</div>}>
        <Header />
      </Suspense>
      <h1>Hello from Host Application!</h1>
    </div>
  );
}

export default App;

1.3: Deploying the Micro Frontend and Host Application

You can deploy both the host app and micro frontend separately:

1. Deploy the micro frontend (on http://localhost:3001) to a cloud service (e.g., AWS, Vercel, Netlify).
2. Deploy the host application (on http://localhost:3000) to a cloud service as well.

By using Webpack Module Federation, the host app will dynamically load the micro frontend components at runtime, allowing for independent deployments.

---

Approach 2: Deploying Micro Frontends with Single-SPA

Single-SPA is another popular framework for deploying independent micro frontend components. It allows you to integrate multiple frameworks (React, Angular, Vue, etc.) into a single page application.

2.1: Setting Up a Single-SPA Application

In this setup, each micro frontend is treated as a standalone application and is loaded dynamically based on the route.

2.1.1: Install Single-SPA Dependencies

In your host app, you need to install single-spa and any necessary single-spa integrations for the frontend frameworks you are using.

npm install single-spa single-spa-react react react-dom

2.1.2: Register Applications

In the host application, use Single-SPA to register micro frontends.

import { registerApplication, start } from 'single-spa';

registerApplication(
  'reactApp', 
  () => import('reactApp/ReactMicroFrontend'),  // Dynamically load the React micro frontend
  location => location.pathname.startsWith('/react') // Define the routing condition
);

start();  // Start the Single-SPA system

2.1.3: Expose React Micro Frontend

For each micro frontend, such as a React component, you can use Webpack or any bundling tool to expose the module.

2.2: Deploying Micro Frontends

1. Deploy Micro Frontends: Each micro frontend is deployed as an independent application. You can host them on services like AWS S3, Netlify, Vercel, or a traditional server. Each micro frontend will have its own entry point (e.g., reactApp.js, vueApp.js), and these are exposed to the host application via URLs.
2. Host Application Deployment: The host application also needs to be deployed. The host application simply acts as a container for loading the appropriate micro frontend based on routes or user actions.

Considerations for Deployment

1. CORS: If your micro frontends are hosted on different domains, ensure that Cross-Origin Resource Sharing (CORS) headers are properly configured on your server.
2. Version Control: Micro frontends should have versioning to ensure compatibility between the host application and its components.
3. CI/CD: Set up continuous integration and deployment pipelines for each micro frontend, ensuring that they are deployed and tested independently.

Deploying independent micro frontend components allows teams to work on separate parts of the application without interfering with each other. Whether using Webpack Module Federation or Single-SPA, each method offers its own advantages in integrating and deploying components.

By adopting this approach, you can achieve:

• Faster Development Cycles: Each team can deploy their micro frontends independently.
• Flexibility: You can choose different technologies for different parts of your application.
• Scalability: Micro frontends allow you to scale the application more efficiently by deploying only what’s needed.