{"id":5516,"date":"2025-05-05T05:32:35","date_gmt":"2025-05-05T05:32:35","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=5516"},"modified":"2025-05-05T05:32:35","modified_gmt":"2025-05-05T05:32:35","slug":"creating-micro-frontends-with-react","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/creating-micro-frontends-with-react\/","title":{"rendered":"Creating Micro Frontends with React"},"content":{"rendered":"<h1>Creating Micro Frontends with React: A Comprehensive Guide<\/h1>\n<p>In recent years, the concept of <strong>micro frontends<\/strong> has garnered significant attention in the frontend development community. As web applications grow in complexity, developers are increasingly adopting this architectural style to improve scalability, maintainability, and team autonomy. In this blog, we will dive into the world of micro frontends using <strong>React<\/strong>, exploring how to implement this pattern effectively.<\/p>\n<h2>What Are Micro Frontends?<\/h2>\n<p>Micro frontends extend the principles of microservices to the frontend world. Just as microservices allow teams to develop, deploy, and scale backend services independently, micro frontends enable the same benefits for frontend applications. The core idea is to break down a monolithic frontend into smaller, manageable pieces that can be developed and deployed independently.<\/p>\n<p>This architecture promotes:<\/p>\n<ul>\n<li>Independent development and deployment<\/li>\n<li>Technology agnosticism<\/li>\n<li>Enhanced team autonomy<\/li>\n<li>Improved user experience through faster updates<\/li>\n<\/ul>\n<p>By leveraging micro frontends, businesses can enhance their agility and reduce the risks associated with deploying new features.<\/p>\n<h2>Challenges with Micro Frontends<\/h2>\n<p>While the benefits are significant, adopting a micro frontends architecture isn\u2019t without challenges:<\/p>\n<ul>\n<li><strong>Integration Complexity:<\/strong> Bringing multiple independent applications together can be complex, particularly when it comes to routing and shared state management.<\/li>\n<li><strong>Performance Issues:<\/strong> If not managed properly, loading multiple micro frontends can negatively impact performance and user experience.<\/li>\n<li><strong>Team Coordination:<\/strong> Different teams may use different libraries or styles, leading to inconsistent user experiences if not aligned properly.<\/li>\n<\/ul>\n<p>Understanding these challenges is crucial for effective implementation.<\/p>\n<h2>Setting Up Your Micro Frontend Architecture<\/h2>\n<p>Before diving into the code, let\u2019s outline the essential elements of a micro frontend architecture:<\/p>\n<ol>\n<li><strong>Container Application:<\/strong> This is the shell application that orchestrates and serves the micro frontends.<\/li>\n<li><strong>Micro Frontend Applications:<\/strong> These are the individual frontend applications that are developed independently.<\/li>\n<li><strong>Communication Protocols:<\/strong> Define how the micro frontends will communicate, whether through events, shared state, or APIs.<\/li>\n<\/ol>\n<h2>Building with React<\/h2>\n<p>Let\u2019s illustrate how to implement a simple micro frontend architecture using React. We\u2019ll create a container application that loads multiple micro frontend components.<\/p>\n<h3>Step 1: Create the Container<\/h3>\n<p>First, we will set up a basic React project for our container application.<\/p>\n<pre><code>npx create-react-app micro-frontend-container\ncd micro-frontend-container\n<\/code><\/pre>\n<p>Next, let\u2019s set up a simple structure for our container:<\/p>\n<pre><code>src\/\n    \u251c\u2500\u2500 components\/\n    \u2502   \u251c\u2500\u2500 Header.js\n    \u2502   \u2514\u2500\u2500 Footer.js\n    \u251c\u2500\u2500 App.js\n    \u2514\u2500\u2500 index.js\n<\/code><\/pre>\n<p><strong>Header.js<\/strong> might contain the navigation for your micro frontends:<\/p>\n<pre><code>import React from 'react';\n\nconst Header = () =&gt; {\n    return (\n        <header>\n            <h1>Micro Frontend App<\/h1>\n            <nav>\n                <ul>\n                    <li><a href=\"#\/app1\">App 1<\/a><\/li>\n                    <li><a href=\"#\/app2\">App 2<\/a><\/li>\n                <\/ul>\n            <\/nav>\n        <\/header>\n    );\n}\n\nexport default Header;\n<\/code><\/pre>\n<p><strong>Footer.js<\/strong> can contain some footer information:<\/p>\n<pre><code>import React from 'react';\n\nconst Footer = () =&gt; {\n    return (\n        <footer>\n            <p>&copy; 2023 Micro Frontend Example<\/p>\n        <\/footer>\n    );\n}\n\nexport default Footer;\n<\/code><\/pre>\n<p>Now, update your <strong>App.js<\/strong> to include the header and footer:<\/p>\n<pre><code>import React from 'react';\nimport Header from '.\/components\/Header';\nimport Footer from '.\/components\/Footer';\n\nconst App = () =&gt; {\n    return (\n        <div>\n            <Header \/>\n            <main>\n                <h2>Welcome to the Micro Frontend Architecture<\/h2>\n                {\/* Micro Frontend Entry Points Will Go Here *\/}\n            <\/main>\n            <Footer \/>\n        <\/div>\n    );\n}\n\nexport default App;\n<\/code><\/pre>\n<h3>Step 2: Developing Micro Frontend Applications<\/h3>\n<p>For this example, let&#8217;s create two simple micro frontends:<\/p>\n<ul>\n<li>Micro Frontend Application 1: A simple counter app<\/li>\n<li>Micro Frontend Application 2: A simple todo app<\/li>\n<\/ul>\n<p>We will create each app in its own directory. For instance:<\/p>\n<pre><code>mkdir micro-frontend-app1\ncd micro-frontend-app1\nnpx create-react-app .\n<\/code><\/pre>\n<p>Next, develop your micro frontend application. Here\u2019s a basic example for <strong>App 1<\/strong> (Counter):<\/p>\n<pre><code>import React, { useState } from 'react';\n\nconst App1 = () =&gt; {\n    const [count, setCount] = useState(0);\n\n    return (\n        <div>\n            <h2>Counter App<\/h2>\n            <p>Count: {count}<\/p>\n            <button> setCount(count + 1)}&gt;Increment<\/button>\n        <\/div>\n    );\n}\n\nexport default App1;\n<\/code><\/pre>\n<p>For <strong>App 2<\/strong> (To-Do List), the code could look like this:<\/p>\n<pre><code>import React, { useState } from 'react';\n\nconst App2 = () =&gt; {\n    const [tasks, setTasks] = useState([]);\n    const [task, setTask] = useState('');\n\n    const addTask = () =&gt; {\n        setTasks([...tasks, task]);\n        setTask('');\n    };\n\n    return (\n        <div>\n            <h2>Todo App<\/h2>\n             setTask(e.target.value)}\n                placeholder=\"Enter a task\"\n            \/&gt;\n            <button>Add Task<\/button>\n            <ul>\n                {tasks.map((t, index) =&gt; (\n                    <li>{t}<\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n}\n\nexport default App2;\n<\/code><\/pre>\n<h3>Step 3: Integrating Micro Frontends into the Container<\/h3>\n<p>Now that we have our micro frontend apps, we need to integrate them into the container application. One way to do this is to use <strong>React Router<\/strong> for navigation.<\/p>\n<p>First, install <strong>React Router<\/strong> in your container:<\/p>\n<pre><code>cd micro-frontend-container\nnpm install react-router-dom\n<\/code><\/pre>\n<p>Now, in your <strong>App.js<\/strong>, configure the routes:<\/p>\n<pre><code>import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Header from '.\/components\/Header';\nimport Footer from '.\/components\/Footer';\nimport App1 from '..\/micro-frontend-app1\/src\/App';  \/\/ Adjust path as necessary\nimport App2 from '..\/micro-frontend-app2\/src\/App';  \/\/ Adjust path as necessary\n\nconst App = () =&gt; {\n    return (\n        \n            <div>\n                <Header \/>\n                <main>\n                    \n                        \n                        \n                        \n                            <h2>Welcome to the Micro Frontend Architecture<\/h2>\n                        \n                    \n                <\/main>\n                <Footer \/>\n            <\/div>\n        \n    );\n}\n\nexport default App;\n<\/code><\/pre>\n<h3>Step 4: Running Your Micro Frontend Application<\/h3>\n<p>Your container application is now set up to load your micro frontends. To run your applications together, you may need to serve them on different ports or use a build tool like Webpack Module Federation (which we&#8217;ll discuss shortly).<\/p>\n<p>To run individually, you could use:<\/p>\n<pre><code>cd micro-frontend-container\nnpm start\n<\/code><\/pre>\n<p>And do the same for each micro frontend app as needed.<\/p>\n<h2>Using Webpack Module Federation<\/h2>\n<p>To streamline the integration of different React applications, consider using <strong>Webpack Module Federation<\/strong>. This feature allows you to share components between applications without the need for a separate build step for each micro frontend.<\/p>\n<p>To set up Webpack Module Federation:<\/p>\n<ul>\n<li>You need to update your `webpack.config.js` in both the container and the micro frontend apps to enable module federation.<\/li>\n<li>Each application exports its components and exposes them, allowing the container to consume them directly.<\/li>\n<\/ul>\n<h3>Example Webpack Configuration<\/h3>\n<p>Here\u2019s a snippet of what your Webpack configuration might look like:<\/p>\n<pre><code>const ModuleFederationPlugin = require(\"webpack\/lib\/container\/ModuleFederationPlugin\");\n\nmodule.exports = {\n    \/\/ other configs...\n    plugins: [\n        new ModuleFederationPlugin({\n            name: 'container',\n            remotes: {\n                app1: 'app1@http:\/\/localhost:3001\/remoteEntry.js',\n                app2: 'app2@http:\/\/localhost:3002\/remoteEntry.js'\n            },\n        }),\n    ],\n};\n<\/code><\/pre>\n<p>This setup allows your container application to dynamically load the micro frontends from their respective URLs.<\/p>\n<h2>Best Practices for Micro Frontends<\/h2>\n<p>When adopting a micro frontends architecture, consider the following best practices:<\/p>\n<ul>\n<li><strong>Consistent Styling:<\/strong> Ensure a unified design system across all micro frontends to maintain a cohesive user experience.<\/li>\n<li><strong>Shared Dependencies:<\/strong> Manage shared libraries (like React itself) to avoid duplication and reduce bundle size.<\/li>\n<li><strong>Versioning:<\/strong> Coordinate versioning strategies for micro frontends to prevent compatibility issues.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>The adoption of micro frontends can transform the way you build and manage complex web applications. By leveraging React, it\u2019s possible to create a highly modular architecture that allows different teams to work independently and reduce deployment risks. While challenges exist, understanding best practices and using tools like Webpack Module Federation can significantly simplify the implementation process.<\/p>\n<p>As you explore micro frontends in your development journey, remember to continuously evaluate your team&#8217;s unique needs and adjust your architecture accordingly. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating Micro Frontends with React: A Comprehensive Guide In recent years, the concept of micro frontends has garnered significant attention in the frontend development community. As web applications grow in complexity, developers are increasingly adopting this architectural style to improve scalability, maintainability, and team autonomy. In this blog, we will dive into the world of<\/p>\n","protected":false},"author":106,"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-5516","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\/5516","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\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5516"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5516\/revisions"}],"predecessor-version":[{"id":5517,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5516\/revisions\/5517"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}