Creating Micro Frontends with React

In the ever-evolving landscape of web development, the rise of micro frontends has redefined how we build and manage complex applications. This architectural style allows teams to work independently, improving scalability and flexibility. In this article, we’ll explore how to create micro frontends using React, covering key concepts, best practices, and an example implementation.

What Are Micro Frontends?

Micro frontends extend the principles of microservices to the frontend world. Instead of creating a single, monolithic application, micro frontends enable developers to break the frontend into smaller, manageable pieces. Each piece can be developed, tested, deployed, and scaled independently by various teams.

This approach provides several benefits:

• Independence: Teams can use different technologies, frameworks, or versions based on their needs.
• Scalability: Different parts of the application can be scaled separately, optimizing resource allocation.
• Improved Collaboration: Smaller codebases result in easier collaboration among team members.

Understanding React in the Micro Frontend Context

React is an excellent choice for building micro frontends due to its component-based architecture, which aligns perfectly with the micro frontend philosophy. React components can be independently developed, making integration smooth and efficient.

Core React Features for Micro Frontends

Here are some features of React that support micro frontend development:

• Reusable Components: Components can be shared across different micro frontends, allowing for consistent UI and functionality.
• State Management: Libraries like Redux or Context API can manage state effectively across micro frontends.
• Lazy Loading: React’s dynamic import capabilities allow portions of the application to be loaded only when needed, optimizing performance.

Setting Up Your Micro Frontend Architecture

Creating a micro frontend architecture with React involves several steps. Here, we present a high-level overview of the architecture and technical stack needed.

1. Choose Your Deployment Strategy

There are several strategies to deploy micro frontends, including:

• Server-Side Composition: Assemble the micro frontends at the server and serve a complete HTML page to the client.
• Client-Side Composition: Load micro frontends dynamically on the client-side, allowing for a more flexible structure.

2. Set Up Module Federation

Webpack 5 introduced Module Federation, which is vital for micro frontends. This feature allows you to load code from the remote server dynamically. Here’s how to use it:

const moduleFederationConfig = {
  name: "app1",
  remotes: {
    app2: "app2@http://localhost:3002/remoteEntry.js",
  },
  shared: {
    react: { singleton: true, requiredVersion: "^17.0.2" },
    "react-dom": { singleton: true, requiredVersion: "^17.0.2" },
  },
};

In this example, app1 can use components from app2 seamlessly.

3. Set Up React Applications

Each micro frontend will be a separate React application. Here’s a basic structure for one micro frontend leveraging Create React App:

npx create-react-app app1
cd app1
npm install --save react-router-dom

Building Your First Micro Frontend

Let’s build our first simple micro frontend. We’ll create two micro frontends: App One and App Two. App One will consume a component from App Two.

Creating App One

Go to your project directory and create App One:

npx create-react-app app1
cd app1

Next, modify the src/App.js file:

import React from "react";

function App() {
  return (
    

      
Micro Frontend: App One
    
  );
}

export default App;

Creating App Two

Now, let’s create the second micro frontend:

npx create-react-app app2
cd app2

Edit the src/index.js file in App Two:

import("./bootstrap");

Then, create a new file called bootstrap.js in the src directory:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const domElement = document.getElementById("app2");

if (domElement) {
  ReactDOM.render(, domElement);
}

Finally, modify src/App.js for App Two:

import React from "react";

function App() {
  return (
    

      
Micro Frontend: App Two
    
  );
}

export default App;

Configuring Webpack for Module Federation

Configure each application’s Webpack settings to use Module Federation. Here’s an example of what your webpack configuration would look like for app1:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  //... rest of your configuration
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App", // Expose your primary component
      }
    }),
  ],
};

Integrating Micro Frontends

Integration is key to making micro frontends work smoothly. You can do this via client-side routing or through a shared layout:

Using React Router

To navigate between micro frontends, use React Router. Here’s how you can implement routing:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import AppOne from "./AppOne";
import AppTwo from "app2/App"; // Importing the remote app

function Main() {
  return (
    
      
        
        
      
    
  );
}

Handling Shared State

Using Context API or third-party state management tools can help manage shared state:

import React, { createContext, useContext, useState } from "react";

const SharedStateContext = createContext();

export const SharedStateProvider = ({ children }) => {
  const [sharedState, setSharedState] = useState("Initial State");
  return (
    
      {children}
    
  );
};

export const useSharedState = () => useContext(SharedStateContext);

Testing and Monitoring

Testing micro frontends individually as well as within the ecosystem is crucial. Use tools like Jest, react-testing-library, or Cypress for integration testing.

Performance Monitoring

Consider setting up performance monitoring and error tracking using tools like Sentry or Google Analytics to detect and resolve issues quickly across micro frontends.

Best Practices for Micro Frontends

To ensure success with your micro frontend architecture, adhere to the following best practices:

• Maintain Component Library: Create a shared component library to ensure UI consistency.
• Automate Tests: Implement CI/CD pipelines for automated testing and deployment.
• Documentation: Keep documentations updated to help teams collaborate effectively across different frontend microservices.

Conclusion

Micro frontends using React offer a powerful approach to building scalable, maintainable applications. By leveraging React’s component architecture, teams can work independently on different parts of the application, fostering better collaboration and development agility. Take the first step towards adopting micro frontends in your projects by implementing the steps outlined in this article, and watch your development workflow transform for the better!

As the trend of micro frontends continues to grow, understanding and implementing this architecture will give you a competitive edge in the web development landscape. Dive in, experiment, and enjoy the benefits of micro frontends!