Creating Micro Frontends with React

In the evolving landscape of web development, micro frontends are gaining immense popularity as a strategy for breaking down monolithic applications into smaller, manageable pieces. This architecture allows teams to work independently on different parts of the application, enhancing scalability and flexibility. In this article, we’ll explore how to create micro frontends using React, a widely adopted JavaScript library.

What are Micro Frontends?

Micro frontends extend the principles of microservices to the frontend. Instead of a single, cohesive user interface, micro frontends enable the composition of multiple independently deployable applications into a single user interface. This approach allows diverse teams to innovate faster, use different frameworks, and reduce the risk of deploying large changes all at once.

Benefits of Micro Frontends

• Team Autonomy: Teams can work independently, choosing their stack and workflows, which reduces dependencies.
• Scalability: Individual parts of the application can be scaled independently based on demand.
• Technological Diversity: Different parts can be built with different technologies, which can be beneficial for specific functionalities.
• Faster Development: Micro frontends can accelerate deployment cycles, as teams can deliver features without waiting for the entire application to release.

Setting Up Your Project

To get started, let’s create a simple application that demonstrates the micro frontend architecture using React. For this example, we will create a container application and a couple of micro frontend applications. In our scenario, we’ll have a product listing app and a shopping cart app.

1. Setting Up Your Environment

Ensure you have Node.js and npm installed in your development environment. You can create a new React application using create-react-app:

npx create-react-app container-app
cd container-app

2. Creating Micro Frontend Applications

Next, create separate directories for your micro frontends. We’ll create two applications: ProductListing and ShoppingCart.

mkdir micro-frontends
cd micro-frontends

# Create Product Listing App
npx create-react-app product-listing

# Create Shopping Cart App
npx create-react-app shopping-cart

3. Building the Micro Frontends

Open the product-listing app and replace the contents of src/App.js with the following:

import React from 'react';

const ProductListing = () => {
    const products = [
        { id: 1, name: 'Product 1', price: '$20' },
        { id: 2, name: 'Product 2', price: '$30' },
    ];

    return (
        

            
Products
            

                {products.map(product => (
                    

                        {product.name} - {product.price}
                    
                ))}
            
        
    );
};

export default ProductListing;

Now, replace the contents of src/App.js in the shopping-cart app with:

import React from 'react';

const ShoppingCart = () => {
    const cartItems = [
        { id: 1, name: 'Product 1', quantity: 2 },
        { id: 2, name: 'Product 2', quantity: 1 },
    ];

    return (
        

            
Your Shopping Cart
            

                {cartItems.map(item => (
                    

                        {item.name} - Quantity: {item.quantity}
                    
                ))}
            
        
    );
};

export default ShoppingCart;

Integrating Micro Frontends with Container App

Now that we have our micro frontends set up, let’s integrate them into the container app. First, we’ll install React Router in the container app to manage navigation between the micro frontends:

cd ../..
npm install react-router-dom

1. Updating the Container App

Modify the src/App.js in the container app to set up routing:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import ProductListing from '../micro-frontends/product-listing/src/App';
import ShoppingCart from '../micro-frontends/shopping-cart/src/App';

const App = () => {
    return (
        
            

            
                
                
            
        
    );
};

export default App;

2. Running the Applications

Before running the application, ensure each micro frontend can be built independently. You can run the following commands in each micro frontend directory:

npm start

In a new terminal, also run the container app:

cd container-app
npm start

3. Configuring for Deployment

For a production setup, you would want to deploy these applications independently. Consider using a reverse proxy or a micro-frontend framework like Single-SPA or Module Federation from Webpack 5 to manage the integration of micro frontends.

Using Webpack Module Federation

Webpack Module Federation allows multiple Webpack builds to work together. By configuring your webpack.config.js in both the micro frontends and the container app, you can create federated modules that can share code and dependencies:

• Mobile Frontend: Expose components for others to use.
• Host Application: Load components from your micro frontends.

Best Practices for Micro Frontends

• Clear Boundaries: Maintain clear boundaries of responsibility between micro frontends to avoid confusion and overlap.
• Consistent User Experience: Use a shared design system to keep a consistent look and feel.
• Independent Deployment: Ensure each micro frontend can be deployed independently, enabling faster release cycles.
• Performance Monitoring: Monitor performance and error handling for each micro frontend component.

Conclusion

Micro frontends provide an excellent architectural pattern for developing complex web applications. With React, creating micro frontends has become more manageable and modular. This approach not only produces scalable applications but also improves team dynamics by allowing for independent deployments and technology stacks.

With the tools and examples provided in this article, you’re well on your way to implementing micro frontends in your projects. Experiment and see how this architecture can benefit your development workflow!