{"id":8023,"date":"2025-07-19T11:32:26","date_gmt":"2025-07-19T11:32:25","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=8023"},"modified":"2025-07-19T11:32:26","modified_gmt":"2025-07-19T11:32:25","slug":"creating-micro-frontends-with-react-7","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/creating-micro-frontends-with-react-7\/","title":{"rendered":"Creating Micro Frontends with React"},"content":{"rendered":"<h1>Creating Micro Frontends with React<\/h1>\n<p>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\u2019ll explore how to create micro frontends using React, a widely adopted JavaScript library.<\/p>\n<h2>What are Micro Frontends?<\/h2>\n<p>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.<\/p>\n<h2>Benefits of Micro Frontends<\/h2>\n<ul>\n<li><strong>Team Autonomy:<\/strong> Teams can work independently, choosing their stack and workflows, which reduces dependencies.<\/li>\n<li><strong>Scalability:<\/strong> Individual parts of the application can be scaled independently based on demand.<\/li>\n<li><strong>Technological Diversity:<\/strong> Different parts can be built with different technologies, which can be beneficial for specific functionalities.<\/li>\n<li><strong>Faster Development:<\/strong> Micro frontends can accelerate deployment cycles, as teams can deliver features without waiting for the entire application to release.<\/li>\n<\/ul>\n<h2>Setting Up Your Project<\/h2>\n<p>To get started, let\u2019s 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&#8217;ll have a product listing app and a shopping cart app.<\/p>\n<h3>1. Setting Up Your Environment<\/h3>\n<p>Ensure you have <strong>Node.js<\/strong> and <strong>npm<\/strong> installed in your development environment. You can create a new React application using create-react-app:<\/p>\n<pre><code>npx create-react-app container-app\ncd container-app\n<\/code><\/pre>\n<h3>2. Creating Micro Frontend Applications<\/h3>\n<p>Next, create separate directories for your micro frontends. We\u2019ll create two applications: <strong>ProductListing<\/strong> and <strong>ShoppingCart<\/strong>.<\/p>\n<pre><code>mkdir micro-frontends\ncd micro-frontends\n\n# Create Product Listing App\nnpx create-react-app product-listing\n\n# Create Shopping Cart App\nnpx create-react-app shopping-cart\n<\/code><\/pre>\n<h3>3. Building the Micro Frontends<\/h3>\n<p>Open the <strong>product-listing<\/strong> app and replace the contents of <strong>src\/App.js<\/strong> with the following:<\/p>\n<pre><code>import React from 'react';\n\nconst ProductListing = () =&gt; {\n    const products = [\n        { id: 1, name: 'Product 1', price: '$20' },\n        { id: 2, name: 'Product 2', price: '$30' },\n    ];\n\n    return (\n        <div>\n            <h2>Products<\/h2>\n            <ul>\n                {products.map(product =&gt; (\n                    <li>\n                        {product.name} - {product.price}\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default ProductListing;\n<\/code><\/pre>\n<p>Now, replace the contents of <strong>src\/App.js<\/strong> in the <strong>shopping-cart<\/strong> app with:<\/p>\n<pre><code>import React from 'react';\n\nconst ShoppingCart = () =&gt; {\n    const cartItems = [\n        { id: 1, name: 'Product 1', quantity: 2 },\n        { id: 2, name: 'Product 2', quantity: 1 },\n    ];\n\n    return (\n        <div>\n            <h2>Your Shopping Cart<\/h2>\n            <ul>\n                {cartItems.map(item =&gt; (\n                    <li>\n                        {item.name} - Quantity: {item.quantity}\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\n<h2>Integrating Micro Frontends with Container App<\/h2>\n<p>Now that we have our micro frontends set up, let&#8217;s integrate them into the container app. First, we\u2019ll install <strong>React Router<\/strong> in the container app to manage navigation between the micro frontends:<\/p>\n<pre><code>cd ..\/..\nnpm install react-router-dom\n<\/code><\/pre>\n<h3>1. Updating the Container App<\/h3>\n<p>Modify the <strong>src\/App.js<\/strong> in the container app to set up routing:<\/p>\n<pre><code>import React from 'react';\nimport { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';\nimport ProductListing from '..\/micro-frontends\/product-listing\/src\/App';\nimport ShoppingCart from '..\/micro-frontends\/shopping-cart\/src\/App';\n\nconst App = () =&gt; {\n    return (\n        \n            <nav>\n                <ul>\n                    <li>\n                        Products\n                    <\/li>\n                    <li>\n                        Shopping Cart\n                    <\/li>\n                <\/ul>\n            <\/nav>\n\n            \n                \n                \n            \n        \n    );\n};\n\nexport default App;\n<\/code><\/pre>\n<h3>2. Running the Applications<\/h3>\n<p>Before running the application, ensure each micro frontend can be built independently. You can run the following commands in each micro frontend directory:<\/p>\n<pre><code>npm start\n<\/code><\/pre>\n<p>In a new terminal, also run the container app:<\/p>\n<pre><code>cd container-app\nnpm start\n<\/code><\/pre>\n<h3>3. Configuring for Deployment<\/h3>\n<p>For a production setup, you would want to deploy these applications independently. Consider using a reverse proxy or a micro-frontend framework like <strong>Single-SPA<\/strong> or <strong>Module Federation<\/strong> from Webpack 5 to manage the integration of micro frontends.<\/p>\n<h4>Using Webpack Module Federation<\/h4>\n<p>Webpack Module Federation allows multiple Webpack builds to work together. By configuring your <strong>webpack.config.js<\/strong> in both the micro frontends and the container app, you can create federated modules that can share code and dependencies:<\/p>\n<ul>\n<li>Mobile Frontend: Expose components for others to use.<\/li>\n<li>Host Application: Load components from your micro frontends.<\/li>\n<\/ul>\n<h2>Best Practices for Micro Frontends<\/h2>\n<ul>\n<li><strong>Clear Boundaries:<\/strong> Maintain clear boundaries of responsibility between micro frontends to avoid confusion and overlap.<\/li>\n<li><strong>Consistent User Experience:<\/strong> Use a shared design system to keep a consistent look and feel.<\/li>\n<li><strong>Independent Deployment:<\/strong> Ensure each micro frontend can be deployed independently, enabling faster release cycles.<\/li>\n<li><strong>Performance Monitoring:<\/strong> Monitor performance and error handling for each micro frontend component.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>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.<\/p>\n<p>With the tools and examples provided in this article, you&#8217;re well on your way to implementing micro frontends in your projects. Experiment and see how this architecture can benefit your development workflow!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019ll explore how to create<\/p>\n","protected":false},"author":105,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":["post-8023","post","type-post","status-publish","format-standard","category-react","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=8023"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8023\/revisions"}],"predecessor-version":[{"id":8024,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/8023\/revisions\/8024"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=8023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=8023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=8023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}