Creating Micro Frontends with React

The web development landscape is continuously evolving, and one of the most significant trends in recent years is the rise of micro frontends. Micro frontends allow teams to work independently on different parts of a web application, using their own technology stacks. This approach not only enhances scalability and maintainability but also empowers teams to innovate faster. This blog will explore how to create micro frontends using React, diving into key concepts, patterns, and implementation steps.

What Are Micro Frontends?

Micro frontends are a software architecture pattern inspired by microservices. Instead of building a monolithic frontend application, you can break it down into smaller, self-contained parts that can be developed, tested, and deployed independently. Each team can choose its own stack, frameworks, and tools, making it easier to adapt to changing requirements and technologies.

Benefits of Micro Frontends

There are several advantages to adopting a micro frontend architecture:

• Independence: Teams can work on different frontend components without interfering with each other.
• Scalability: Scaling teams and applications becomes manageable as each micro frontend can be scaled independently.
• Technology Agility: Different teams can select the best technology for their specific use case.
• Enhanced Maintenance: Smaller codebases are easier to maintain and debug.

Core Concepts of Micro Frontends

Before diving into implementation, it’s essential to grasp a few core concepts:

• Shell Application: The main application container that serves as a host for micro frontends.
• Micro Frontend: Individual, self-contained libraries or components that are served by the shell.
• Routing: Managing the navigation between various micro frontends in the shell application.

Setting Up a Micro Frontend Architecture

We’ll set up a simple micro frontend architecture using React. This will involve creating a shell application and an example micro frontend. For this example, we will use Module Federation, a feature from Webpack 5 that facilitates the sharing of modules between applications.

Step 1: Create the Shell Application

First, we need to set up the shell application that will host our micro frontends:

npx create-react-app shell-app --template typescript
cd shell-app
npm install webpack@5 webpack-cli@4 react-router-dom

Next, we will configure Webpack in `webpack.config.js`. Here’s an example of a basic config for using Module Federation:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    publicPath: 'http://localhost:3000/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        microFrontendApp: 'microFrontendApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

After configuring Webpack, let’s set up routing within the shell:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  
    

      
Micro Frontend Shell
      
         import('microFrontendApp/MicroComponent'))} />
      
    
  
);

export default App;

Step 2: Create a Micro Frontend

Next, we will create a micro frontend application. You can create another React application similarly:

npx create-react-app micro-frontend-app --template typescript
cd micro-frontend-app
npm install webpack@5 webpack-cli@4

Now, let’s configure the Module Federation in the micro frontend app:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'microFrontendApp',
      filename: 'remoteEntry.js',
      exposes: {
        './MicroComponent': './src/MicroComponent',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

Now, define a simple React component in `src/MicroComponent.tsx`:

import React from 'react';

const MicroComponent = () => {
  return 
This is a Micro Frontend Component!
;
};

export default MicroComponent;

Step 3: Running Both Applications

To run the applications, you will need to start both the shell and micro frontend applications on different ports. You can do this with:

cd shell-app
npm start

cd micro-frontend-app
npm start

Once both applications are running, accessing the shell application at http://localhost:3000 and navigating to http://localhost:3000/micro will render the micro frontend component.

Best Practices when Working with Micro Frontends

When implementing micro frontends, consider the following best practices to ensure a successful architecture:

• Use a Consistent Design Language: Choose a design system or UI library that promotes consistent design across all micro frontends.
• Shared State Management: Implement a strategy for managing shared state across micro frontends, possibly using libraries like Redux or Context API.
• Decouple Dependencies: Ensure that each micro frontend has the least dependencies possible to reduce coupling between components.
• Versioning: Keep track of versioning to avoid conflicts in shared libraries and dependencies.

Conclusion

Micro frontends represent a paradigm shift in how web applications are built. By leveraging this architecture with React, development teams can enhance their workflows, make applications more scalable, and foster innovation. The setup we explored is just the beginning; as you advance in your micro frontend journey, you can experiment with advanced routing solutions, state management, or even integrating different frameworks. Embrace the micro frontend spirit and create exciting, scalable applications!