{"id":35512,"date":"2025-02-25T15:22:57","date_gmt":"2025-02-25T09:52:57","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=35512"},"modified":"2025-10-15T17:05:35","modified_gmt":"2025-10-15T11:35:35","slug":"react-micro-frontend-architecture-tutorial-example","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example","title":{"rendered":"React Micro Frontend Architecture &#8211; An in Depth Tutorial With Example"},"content":{"rendered":"<h2 class=\"wp-block-heading\"><strong>Why Micro-Frontends?<\/strong><\/h2>\n\n\n\n<p>Micro frontend architecture is becoming increasingly popular due to its performance benefits and the ability to reduce developer dependencies. By breaking down a monolithic frontend into smaller, independent micro-applications, teams can work on different parts of a project simultaneously, improving scalability and maintainability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What You Will Learn in This Tutorial<\/strong><\/h2>\n\n\n\n<p>In this guide, we will walk through the process of setting up a micro-frontend architecture using React and Vite. You will learn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How to configure Module Federation with Vite.<\/li>\n\n\n\n<li>How to create a remote micro-frontend that exposes components.<\/li>\n\n\n\n<li>How to dynamically reuse a remote component in a host application.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Project Use Case: E-Commerce Application<\/strong><\/h2>\n\n\n\n<p>For this tutorial, we will use an e-commerce application as an example. The host application (home app) will consume and display a Featured Products List from the Products Micro-Frontend. This approach showcases how a fully functional component can be shared across multiple applications without duplicating code.<\/p>\n\n\n\n<p>By the end of this tutorial, you will have a clear understanding of how to structure a micro-frontend application with React and Vite, making your micro frontend architecture more flexible and scalable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1200\" height=\"582\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/micro-frontend-architecture-react.png\" alt=\"Overview of Micro Frontend Architecture for React Applications\" class=\"wp-image-35532\" title=\"Micro Frontend Architecture for Scalable React Applications\"><\/noscript><img decoding=\"async\" width=\"1200\" height=\"582\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20582%22%3E%3C%2Fsvg%3E\" alt=\"Overview of Micro Frontend Architecture for React Applications\" class=\"wp-image-35532 lazyload\" title=\"Micro Frontend Architecture for Scalable React Applications\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/micro-frontend-architecture-react.png\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting Up the Microfrontend Project<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Create the Main Directory<\/strong><\/h3>\n\n\n\n<p><code>mkdir micro-frontend-project<br>cd micro-frontend-project&nbsp;&nbsp;<\/code><\/p>\n\n\n\n<p>Create two separate <strong>Vite projects<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Products (Remote App)<\/strong> \u2192 Micro-frontend exposing a component.<\/li>\n\n\n\n<li><strong>Host (Main App)<\/strong> \u2192 Application consuming the remote component.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting Up the Remote Products Feature<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Create the Products Project<\/strong><\/h3>\n\n\n\n<p>npm create vite@latest<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enter project name: <code>products<\/code><\/li>\n\n\n\n<li>Select <code>React<\/code><\/li>\n\n\n\n<li>Select <code>TypeScript<\/code><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/reactjs-development-company?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=react-micro-frontend-architecture-tutorial-example-cta\"><noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/expert-reactjs-development-micro-frontends.png\" alt=\"Expert ReactJS Development for Micro Frontends\" class=\"wp-image-35529\" title=\"Need Expert ReactJS Development for Micro Frontends? Let\u2019s Connect!\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20150%22%3E%3C%2Fsvg%3E\" alt=\"Expert ReactJS Development for Micro Frontends\" class=\"wp-image-35529 lazyload\" title=\"Need Expert ReactJS Development for Micro Frontends? Let\u2019s Connect!\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/expert-reactjs-development-micro-frontends.png\"><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Install Module Federation Plugin<\/strong><\/h3>\n\n\n\n<p><code>cd products<\/code><br><code>npm install @module-federation\/vite<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Implement Product List Feature<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. <strong>Create Product List Page:<\/strong><\/h4>\n\n\n\n<p>Create <code>src\/pages\/ProductsList\/ProductsList.tsx<\/code> to display featured and all products.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { ProductListItem } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/..\/components\/ProductListItem\/ProductListItem\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { IProduct } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/..\/interfaces\/IProduct\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/ProductsList.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> FeaturedProductsList <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/..\/components\/FeaturedProductsList\/FeaturedProductsList\"<\/span>;\n\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ProductList = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n <span class=\"hljs-keyword\">const<\/span> &#091;products, setProducts] = useState&lt;IProduct&#091;]&gt;(&#091;]);\n\n\n useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n   fetchProducts();\n }, &#091;]);\n\n\n <span class=\"hljs-keyword\">const<\/span> fetchProducts = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n   <span class=\"hljs-keyword\">try<\/span> {\n     <span class=\"hljs-keyword\">const<\/span> productsResponse = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"https:\/\/dummyjson.com\/products\"<\/span>);\n     <span class=\"hljs-keyword\">const<\/span> productsResponseJson = <span class=\"hljs-keyword\">await<\/span> productsResponse.json();\n     setProducts(productsResponseJson.products);\n   } <span class=\"hljs-keyword\">catch<\/span> (error) {\n     <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"error\"<\/span>, error);\n   }\n };\n\n\n <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"product-list-container\"<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Products<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">FeaturedProductsList<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">FeaturedProductsList<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"heading\"<\/span>&gt;<\/span>All Products<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"products-list\"<\/span>&gt;<\/span>\n       {products.map((item) =&gt; (\n         <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ProductListItem<\/span> <span class=\"hljs-attr\">product<\/span>=<span class=\"hljs-string\">{item}<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ProductListItem<\/span>&gt;<\/span>\n       ))}\n     <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here, we are using a dummy API for the product list.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <strong>Create Product List CSS:<\/strong><\/h4>\n\n\n\n<p>Create <code>src\/pages\/ProductsList\/ProductsList.css<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.products-list<\/span> {\n <span class=\"hljs-attribute\">display<\/span>: grid;\n <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\">repeat<\/span>(auto-fit, minmax(<span class=\"hljs-number\">300px<\/span>, <span class=\"hljs-number\">1<\/span>fr));\n <span class=\"hljs-attribute\">grid-auto-rows<\/span>: <span class=\"hljs-built_in\">minmax<\/span>(<span class=\"hljs-number\">250px<\/span>, auto);\n}\n<span class=\"hljs-selector-class\">.product-list-container<\/span> {\n <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n <span class=\"hljs-attribute\">text-align<\/span>: flex-start;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">3. <strong>Create Product Interface:<\/strong><\/h4>\n\n\n\n<p>Create <code>src\/interfaces\/IProduct.ts<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">export<\/span> <span class=\"hljs-selector-tag\">interface<\/span> <span class=\"hljs-selector-tag\">IProduct<\/span> {\n <span class=\"hljs-attribute\">title<\/span>: string;\n <span class=\"hljs-attribute\">description<\/span>: string;\n <span class=\"hljs-attribute\">price<\/span>: string;\n <span class=\"hljs-attribute\">images<\/span>: string&#091;];\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">4. <strong>Create Product Card Component:<\/strong><\/h4>\n\n\n\n<p>Create <code>src\/components\/ProductListItem\/ProductListItem.tsx<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { IProduct } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/..\/interfaces\/IProduct\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/ProductListItem.css\"<\/span>;\n\n\ninterface ProductListItemProps {\n <span class=\"hljs-attr\">product<\/span>: IProduct;\n}\n\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ProductListItem = <span class=\"hljs-function\">(<span class=\"hljs-params\">props: ProductListItemProps<\/span>) =&gt;<\/span> {\n <span class=\"hljs-keyword\">const<\/span> { product } = props;\n <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"product-card\"<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"product-image-container\"<\/span>&gt;<\/span>\n       <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{product.images&#091;0]}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"product-image\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">img<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>{product.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>{`$ ${product.price}`}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h6<\/span>&gt;<\/span>{product.description}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h6<\/span>&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n );\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">5. <strong>Create Product Card CSS file:<\/strong><\/h4>\n\n\n\n<p>Create <code>src\/components\/ProductListItem\/ProductListItem.css<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.product-image<\/span> {\n <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">120px<\/span>;\n <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">120px<\/span>;\n}\n<span class=\"hljs-selector-class\">.product-card<\/span> {\n <span class=\"hljs-attribute\">background-color<\/span>: white;\n <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">100<\/span>, <span class=\"hljs-number\">100<\/span>, <span class=\"hljs-number\">111<\/span>, <span class=\"hljs-number\">0.2<\/span>) <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">7px<\/span> <span class=\"hljs-number\">29px<\/span> <span class=\"hljs-number\">0px<\/span>;\n <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span>;\n <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">8px<\/span>;\n <span class=\"hljs-attribute\">min-width<\/span>: <span class=\"hljs-number\">285px<\/span>;\n}\n<span class=\"hljs-selector-class\">.product-image-container<\/span> {\n <span class=\"hljs-attribute\">display<\/span>: flex;\n <span class=\"hljs-attribute\">justify-content<\/span>: center;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">6. <strong>Create Featured Product List Component:<\/strong><\/h4>\n\n\n\n<p>Create <code>src\/components\/FeaturedProductsList\/FeaturedProductsList.tsx<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { useEffect, useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { IProduct } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/..\/interfaces\/IProduct\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { ProductListItem } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/ProductListItem\/ProductListItem\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/FeaturedProductsList.css\"<\/span>;\n\n\n<span class=\"hljs-keyword\">const<\/span> FeaturedProductsList = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n <span class=\"hljs-keyword\">const<\/span> &#091;featuredProducts, setFeaturedProducts] = useState&lt;IProduct&#091;]&gt;(&#091;]);\n\n\n useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n   fetchProducts();\n }, &#091;]);\n\n\n <span class=\"hljs-keyword\">const<\/span> fetchProducts = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n   <span class=\"hljs-keyword\">try<\/span> {\n     <span class=\"hljs-keyword\">const<\/span> productsResponse = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">'https:\/\/dummyjson.com\/products?limit=10&amp;skip=10&amp;select=title,price,images,description'<\/span>);\n     <span class=\"hljs-keyword\">const<\/span> productsResponseJson = <span class=\"hljs-keyword\">await<\/span> productsResponse.json();\n     setFeaturedProducts(productsResponseJson.products);\n   } <span class=\"hljs-keyword\">catch<\/span> (error) {\n     <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">\"error\"<\/span>, error);\n   }\n };\n\n\n <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"heading\"<\/span>&gt;<\/span>Featured Products<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"featured-product-list\"<\/span>&gt;<\/span>\n       {featuredProducts.map((item) =&gt; (\n         <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ProductListItem<\/span> <span class=\"hljs-attr\">product<\/span>=<span class=\"hljs-string\">{item}<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ProductListItem<\/span>&gt;<\/span>\n       ))}\n     <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n );\n};\n\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> FeaturedProductsList;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">7. <strong>Create Featured Product List CSS file:<\/strong><\/h4>\n\n\n\n<p>Create s<code>rc\/components\/FeaturedProductsList\/FeaturedProductsList.css<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.featured-product-list<\/span> {\n <span class=\"hljs-attribute\">display<\/span>: flex;\n <span class=\"hljs-attribute\">flex-direction<\/span>: row;\n <span class=\"hljs-attribute\">overflow-x<\/span>: scroll;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">8. <strong>Use the Products page in the App file:<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { ProductList } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/pages\/ProductsList\/ProductsList'<\/span>\n\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n\n\n <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ProductList<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ProductList<\/span>&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span>\n )\n}\n\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">9. <strong>Update App.css default CSS:<\/strong><\/h4>\n\n\n\n<p>Update only root css<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#root<\/span> {\n <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1280px<\/span>;\n <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">10. <strong>Update port in the package.json<\/strong>:<\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">...  \n<span class=\"hljs-string\">\"scripts\"<\/span>: {\n   <span class=\"hljs-string\">\"dev\"<\/span>: <span class=\"hljs-string\">\"vite --port 3000\"<\/span>,\n   <span class=\"hljs-string\">\"build\"<\/span>: <span class=\"hljs-string\">\"tsc -b &amp;&amp; vite build\"<\/span>,\n   <span class=\"hljs-string\">\"lint\"<\/span>: <span class=\"hljs-string\">\"eslint .\"<\/span>,\n   <span class=\"hljs-string\">\"preview\"<\/span>: <span class=\"hljs-string\">\"vite preview --port 3000\"<\/span>\n },\n...<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Configure Module Federation<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Update <code>vite.config.ts<\/code><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { federation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@module-federation\/vite\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> react <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@vitejs\/plugin-react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { defineConfig } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vite\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { dependencies } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/package.json\"<\/span>;\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> defineConfig(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n <span class=\"hljs-keyword\">return<\/span> {\n   <span class=\"hljs-attr\">build<\/span>: {\n     <span class=\"hljs-attr\">target<\/span>: <span class=\"hljs-string\">\"chrome89\"<\/span>,\n   },\n   <span class=\"hljs-attr\">plugins<\/span>: &#091;\n     federation({\n       <span class=\"hljs-attr\">filename<\/span>: <span class=\"hljs-string\">\"remoteEntry.js\"<\/span>,\n       <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"products\"<\/span>,\n       <span class=\"hljs-attr\">exposes<\/span>: {\n         <span class=\"hljs-string\">\".\/featured-products\"<\/span>:\n           <span class=\"hljs-string\">\".\/src\/components\/FeaturedProductsList\/FeaturedProductsList.tsx\"<\/span>,\n       },\n       <span class=\"hljs-attr\">remotes<\/span>: {},\n       <span class=\"hljs-attr\">shared<\/span>: {\n         <span class=\"hljs-attr\">react<\/span>: {\n           <span class=\"hljs-attr\">requiredVersion<\/span>: dependencies.react,\n           <span class=\"hljs-attr\">singleton<\/span>: <span class=\"hljs-literal\">true<\/span>,\n         },\n       },\n     }),\n     react(),\n   ],\n };\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>filename<\/code>: <code>\"remoteEntry.js\"<\/code><\/strong>: Specifies the entry file for the microfrontend, which other applications can access.<\/li>\n\n\n\n<li><strong><code>name: \"products\"<\/code><\/strong>: Defines the unique identifier for this microfrontend.<\/li>\n\n\n\n<li>This allows other microfrontends (hosts) to import the FeaturedProductsList component.<\/li>\n\n\n\n<li><strong><code>\".\/featured-products\"<\/code><\/strong>: This is how the module will be imported remotely.<\/li>\n\n\n\n<li><strong><code>\".\/src\/components\/FeaturedProductsList\/FeaturedProductsList.tsx\"<\/code><\/strong>: The actual file that gets exposed.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting Up the Host Application<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Create the Host Project<\/strong><\/h3>\n\n\n\n<p>npm create vite@latest<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enter project name: <code>host<\/code><\/li>\n\n\n\n<li>Select <code>React<\/code><\/li>\n\n\n\n<li>Select <code>TypeScript<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Install Module Federation Plugin<\/strong><\/h3>\n\n\n\n<p><code>cd host<\/code><br><code>npm install @module-federation\/vite<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Implement Home Page<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. <strong>Create Home Page:<\/strong><\/h4>\n\n\n\n<p>Create pages\/home\/Home.tsx<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React, { Suspense } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n\n\n<span class=\"hljs-keyword\">const<\/span> FeaturedProducts = React.lazy(\n   <span class=\"hljs-comment\">\/\/ @ts-ignore<\/span>\n   <span class=\"hljs-keyword\">async<\/span> () =&gt; <span class=\"hljs-keyword\">import<\/span>(<span class=\"hljs-string\">'products\/featured-products'<\/span>),\n);\n\n\n<span class=\"hljs-keyword\">const<\/span> Home = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n <span class=\"hljs-keyword\">return<\/span> (\n   <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Suspense<\/span> <span class=\"hljs-attr\">fallback<\/span>=<span class=\"hljs-string\">\"loading...\"<\/span>&gt;<\/span>\n       <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">FeaturedProducts<\/span> \/&gt;<\/span>\n     <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Suspense<\/span>&gt;<\/span>\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n );\n};\n\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> Home;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Imported Featured Products from Products (Remote app)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <strong>Update <code>App.tsx<\/code><\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/App.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> Home <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/pages\/home\/Home\"<\/span>;\n\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Home<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Home<\/span>&gt;<\/span><\/span>;\n}\n\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\">3. <strong>Update App.css default CSS:<\/strong><\/h4>\n\n\n\n<p>Update only root css<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#root<\/span> {\n <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1280px<\/span>;\n <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Configure Module Federation<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Update <code>vite.config.ts<\/code><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { defineConfig } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"vite\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> react <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@vitejs\/plugin-react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> {federation} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@module-federation\/vite\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { dependencies } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/package.json'<\/span>;\n\n\n\n\n<span class=\"hljs-comment\">\/\/ https:\/\/vite.dev\/config\/<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> defineConfig({\n <span class=\"hljs-attr\">build<\/span>: {\n   <span class=\"hljs-attr\">target<\/span>: <span class=\"hljs-string\">'esnext'<\/span>,\n   <span class=\"hljs-attr\">minify<\/span>: <span class=\"hljs-literal\">false<\/span>\n },\n <span class=\"hljs-attr\">plugins<\/span>: &#091;\n   federation({\n     <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"app\"<\/span>,\n     <span class=\"hljs-attr\">remotes<\/span>: {\n       <span class=\"hljs-attr\">products<\/span>: {\n         <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'module'<\/span>,\n         <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'products'<\/span>,\n         <span class=\"hljs-attr\">entry<\/span>: <span class=\"hljs-string\">'http:\/\/localhost:3000\/remoteEntry.js'<\/span>,\n         <span class=\"hljs-attr\">entryGlobalName<\/span>: <span class=\"hljs-string\">'remote'<\/span>,\n         <span class=\"hljs-attr\">shareScope<\/span>: <span class=\"hljs-string\">'default'<\/span>,\n       },\n     },\n     <span class=\"hljs-attr\">filename<\/span>: <span class=\"hljs-string\">\"remoteEntry.js\"<\/span>,     \n     <span class=\"hljs-attr\">shared<\/span>: {\n       <span class=\"hljs-attr\">react<\/span>: {\n         <span class=\"hljs-attr\">requiredVersion<\/span>: dependencies.react,\n         <span class=\"hljs-attr\">singleton<\/span>: <span class=\"hljs-literal\">true<\/span>,\n       },\n     },\n   }),\n \n   react(),\n ], \n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>remotes<\/code><\/strong>: Specifies the remote applications (microfrontends) that will be loaded dynamically.<\/li>\n\n\n\n<li><strong><code>products<\/code><\/strong>: The key that identifies the remote application.\n<ul class=\"wp-block-list\">\n<li><strong><code>type: 'module'<\/code><\/strong>: Indicates that the remote entry is an ES module.<\/li>\n\n\n\n<li><strong><code>name: 'products'<\/code><\/strong>: The unique name of the remote application.<\/li>\n\n\n\n<li><strong><code>entry: 'http:\/\/localhost:3000\/remoteEntry.js'<\/code><\/strong>: The remote entry file URL where the microfrontend is hosted.<\/li>\n\n\n\n<li><strong><code>entryGlobalName: 'remote'<\/code><\/strong>: Specifies a global namespace for the remote module.<\/li>\n\n\n\n<li><strong><code>shareScope: 'default'<\/code><\/strong>: Ensures dependency sharing across microfrontends.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>shared<\/code><\/strong>: Specifies shared dependencies across microfrontends to avoid duplicate React versions.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Steps: Run Both Applications<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Run the Remote App (Products)<\/strong><\/h3>\n\n\n\n<p><code>cd products<\/code><br><code>npm run dev<\/code><\/p>\n\n\n\n<p>On<a href=\"http:\/\/localhost:3000\/\"> http:\/\/localhost:3000\/<\/a>, you can see the featured products and a list of all products.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"446\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-remote-app-setup.png\" alt=\"Running the Remote App for React Micro Frontend Architecture\" class=\"wp-image-35534\" title=\"Run the Remote App in React Micro Frontend Architecture\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"446\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20446%22%3E%3C%2Fsvg%3E\" alt=\"Running the Remote App for React Micro Frontend Architecture\" class=\"wp-image-35534 lazyload\" title=\"Run the Remote App in React Micro Frontend Architecture\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-remote-app-setup.png\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Run the Host App<\/strong><\/h3>\n\n\n\n<p><code>cd host&nbsp;<\/code><br><code>npm run dev<\/code><\/p>\n\n\n\n<p>Now, the Host Application dynamically loads the Featured Products Component from the Products Micro-Frontend using vite module federation&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"446\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-host-app-setup.png\" alt=\"Running the Host App in React Micro Frontend Architecture\" class=\"wp-image-35533\" title=\"Running the Host App in Micro Frontend Architecture with React\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"446\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20446%22%3E%3C%2Fsvg%3E\" alt=\"Running the Host App in React Micro Frontend Architecture\" class=\"wp-image-35533 lazyload\" title=\"Running the Host App in Micro Frontend Architecture with React\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-host-app-setup.png\"><\/figure>\n\n\n\n<p>This repository contains the code for the tutorial: \u201cReact Micro Frontend Architecture \u2013 An in Depth Tutorial With Example\u201c, published by Mobisoft &#8211; <a href=\"https:\/\/mobisoftinfotech.com\/services\/web-application-development-company\"><strong>Web Application Development Company, Houston.<\/strong><\/a><\/p>\n\n\n\n<p>Feel free to download a sample example I\u2019ve created from <a href=\"https:\/\/github.com\/mobisoftinfotech\/micro-frontend-architecture-with-react\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>GitHub <\/strong><\/a>to get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Micro-frontend architecture is revolutionizing front-end development by enabling teams to work independently on different parts of an application while ensuring seamless integration. In this tutorial, we explored how to set up a micro-frontend architecture using React, Vite, and Module Federation, allowing components to be dynamically shared across multiple applications.&nbsp;<\/p>\n\n\n\n<p>By implementing a Products Micro-Frontend and a Host Application, we demonstrated how to reuse a fully functional component (Featured Products List) without duplicating code.<\/p>\n\n\n\n<p>This approach makes frontend development scalable, modular, and efficient, reducing dependencies between teams and improving performance. With micro-frontends, applications can be developed and deployed independently, making them easier to maintain and extend over time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/contact-us?utm_source=blog&amp;utm_medium=referral&amp;utm_campaign=react-micro-frontend-architecture-tutorial-example-cta2\"><noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-consultation.png\" alt=\"Connect for React Micro Frontend Architecture Consultation\" class=\"wp-image-35528\" title=\"Have Questions About React Micro Frontend Architecture? Let\u2019s Connect!\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20150%22%3E%3C%2Fsvg%3E\" alt=\"Connect for React Micro Frontend Architecture Consultation\" class=\"wp-image-35528 lazyload\" title=\"Have Questions About React Micro Frontend Architecture? Let\u2019s Connect!\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-consultation.png\"><\/a><\/figure>\n\n\n<div class=\"related-posts-section\"><h2>Related Posts<\/h2><ul class=\"related-posts-list\"><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/avatar-the-mobisoft-version\">Avatar : The Mobisoft Version<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/ehr-workflows-best-practices-in-2024\">Best Practices for EHR Workflows Healthcare Businesses Should Know for 2024<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/taxi-app-development-benefits\">Why Should Taxi Businesses Invest in Branded Taxi App Development?<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/advanced-telemedicine-solutions\">Unifying Advanced Telemedicine Solutions and Conventional Hands-on Care<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/patient-engagement-trends-in-2022\">Patient Engagement Enabling Better Care Accessibility through Digital Innovation<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/customize-flutter-app-flavors-environments\">Customizing Flutter App with Flavors for Different Environments<\/a><\/li><\/ul><\/div>\n\n\n<div class=\"modern-author-card\">\n    <div class=\"author-card-content\">\n        <div class=\"author-info-section\">\n            <div class=\"author-avatar\">\n                <noscript><img decoding=\"async\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/01\/Chetan_Shelake.jpg\" alt=\"Chetan Shelake\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Chetan Shelake\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/01\/Chetan_Shelake.jpg\" class=\" lazyload\">\n            <\/div>\n            <div class=\"author-details\">\n                <h3 class=\"author-name\">Chetan Shelake<\/h3>\n                <p class=\"author-title\">Principal Software Engineer<\/p>\n                <a href=\"javascript:void(0);\" class=\"read-more-link read-more-btn\" onclick=\"toggleAuthorBio(this); return false;\">Read more <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"expand\" class=\"read-more-arrow down-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"expand\" class=\"read-more-arrow down-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <div class=\"author-bio-expanded\">\n                    <p>Chetan Shelake is a Principal Software Engineer at <a href=\"https:\/\/mobisoftinfotech.com\" target=\"_blank\" rel=\"nofollow noopener\">Mobisoft Infotech<\/a> with 7.5 years of experience in web, mobile, and backend development. Specializing in React, React Native, and Node, he is dedicated to building innovative and user-friendly applications. Chetan is passionate about delivering scalable solutions and staying ahead in emerging technologies.<\/p>\n                    \n                    <a href=\"javascript:void(0);\" class=\"read-more-link read-less-btn\" onclick=\"toggleAuthorBio(this); return false;\" style=\"display: none;\">Read less <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"collapse\" class=\"read-more-arrow up-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"collapse\" class=\"read-more-arrow up-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"share-section\">\n            <span class=\"share-label\">Share Article<\/span>\n            <div class=\"social-share-buttons\">\n                <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Freact-micro-frontend-architecture-tutorial-example\" target=\"_blank\" class=\"share-btn facebook-share\"><i class=\"fa fa-facebook-f\"><\/i><\/a>\n                <a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Freact-micro-frontend-architecture-tutorial-example\" target=\"_blank\" class=\"share-btn linkedin-share\"><i class=\"fa fa-linkedin\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\"\n  },\n  \"headline\": \"React Micro Frontend Architecture - An in Depth Tutorial With Example\",\n  \"description\": \"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.\",\n  \"image\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Chetan Shelake\",\n    \"description\": \"Chetan Shelake is a Principal Software Engineer at Mobisoft Infotech with 7.5 years of experience in web, mobile, and backend development. Specializing in React, React Native, and Node, he is dedicated to building innovative and user-friendly applications. Chetan is passionate about delivering scalable solutions and staying ahead in emerging technologies.\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Mobisoft Infotech\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n      \"width\": 600,\n      \"height\": 60\n    }\n  },\n  \"datePublished\": \"2025-02-25\",\n  \"dateModified\": \"2025-02-25\"\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Organization\",\n  \"name\": \"Mobisoft Infotech\",\n  \"url\": \"https:\/\/mobisoftinfotech.com\/\",\n  \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/MI_Logo.svg\",\n  \"sameAs\": [\n    \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n    \"https:\/\/twitter.com\/MobisoftInfo\",\n    \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n    \"https:\/\/www.youtube.com\/channel\/UCtwuTXKUXFX7k0NSYhsMeTg\",\n    \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n    \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n    \"https:\/\/github.com\/MobisoftInfotech\"\n  ],\n  \"contactPoint\": [\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+1-855-572-2777\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"US\",\n      \"availableLanguage\": [\"English\"]\n    },\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+91-858-600-8627\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"IN\",\n      \"availableLanguage\": [\"English\"]\n    }\n  ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"LocalBusiness\",\n    \"name\": \"Mobisoft Infotech\",\n    \"url\": \"https:\/\/mobisoftinfotech.com\",\n    \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n    \"description\": \"Mobisoft Infotech specializes in custom software development and digital solutions.\",\n    \"address\": {\n        \"@type\": \"PostalAddress\",\n        \"streetAddress\": \"5718 Westheimer Rd Suite 1000\",\n        \"addressLocality\": \"Houston\",\n        \"addressRegion\": \"TX\",\n        \"postalCode\": \"77057\",\n        \"addressCountry\": \"USA\"\n    },\n    \"contactPoint\": [{\n        \"@type\": \"ContactPoint\",\n        \"telephone\": \"+1-855-572-2777\",\n        \"contactType\": \"Customer Service\",\n        \"areaServed\": [\"USA\", \"Worldwide\"],\n        \"availableLanguage\": [\"English\"]\n    }],\n    \"sameAs\": [\n        \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n        \"https:\/\/x.com\/MobisoftInfo\",\n        \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n        \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n        \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n        \"https:\/\/github.com\/MobisoftInfotech\",\n        \"https:\/\/www.behance.net\/MobisoftInfotech\",\n        \"https:\/\/www.youtube.com\/channel\/UCtwuTXKUXFX7k0NSYhsMeTg\"\n    ]\n}\n<\/script>\n\n<style>\n@media only screen and (max-width:767px){.post-content li:before {\n    content: '';\n    width: 9px;\n    height: 9px;\n    background-color: #0d265c;\n    border-radius: 50%;\n    position: absolute;\n    left: 0px;\n    top: 12px;\n}\n.post-content li {\n    padding-left: 25px;\n}\n.post-content p, .post-content li{text-align: left;}}\n.number-list{\n    border-radius: 5px;\n    background-color: #4960e3;\n    font-size: 25px;\n    font-weight: bold;\n    line-height: 1.96;\n    color: #ffffff;\n    padding: 5px 12px;\n    margin-right:4px;\n}\nh4.wp-block-heading {\n    font-size: 22px;\n}\n<\/style>\n<script type=\"application\/ld+json\">\n    [\n    {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\n            \"name\": \"React Micro Frontend Architecture - An in Depth Tutorial With Example\",\n            \"caption\": \"Learn everything about React Micro Frontend Architecture with our detailed tutorial and examples.\",\n            \"description\": \"This in-depth tutorial on React Micro Frontend Architecture covers concepts, examples, and setup steps using tools like Vite and Module Federation. Perfect for CTOs and developers focusing on scalable web architectures.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/micro-frontend-architecture-react.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\n            \"name\": \"Micro Frontend Architecture for Scalable React Applications\",\n            \"caption\": \"A detailed overview of Micro Frontend Architecture and its implementation in React-based web apps.\",\n            \"description\": \"Dive into the concept of Micro Frontend Architecture and understand how it benefits React applications by enhancing scalability, modularity, and maintenance for enterprise-level solutions.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/micro-frontend-architecture-react.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/expert-reactjs-development-micro-frontends.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\n            \"name\": \"Need Expert ReactJS Development for Micro Frontends? Let\u2019s Connect!\",\n            \"caption\": \"Reach out for expert ReactJS development services to build Micro Frontends.\",\n            \"description\": \"Looking for expert assistance with ReactJS development? Connect with us for Micro Frontend architecture solutions tailored to your business needs, focusing on scalability and modularity.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/expert-reactjs-development-micro-frontends.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-remote-app-setup.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\n            \"name\": \" Run the Remote App in React Micro Frontend Architecture\",\n            \"caption\": \"Step-by-step guide on running the remote app in a React-based Micro Frontend Architecture setup.\",\n            \"description\": \"Learn how to run the remote app in a React Micro Frontend Architecture to create isolated, scalable products. This tutorial is perfect for developers and CTOs working on modular web apps.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-remote-app-setup.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-host-app-setup.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\n            \"name\": \"Running the Host App in Micro Frontend Architecture with React\",\n            \"caption\": \"A comprehensive guide on running the host app in React-based Micro Frontend Architecture.\",\n            \"description\": \"Discover how to set up and run the host app in a React Micro Frontend Architecture for seamless integration with remote apps. Ideal for CTOs and developers focusing on scalable web solutions.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-host-app-setup.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-consultation.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\n            \"name\": \"Have Questions About React Micro Frontend Architecture? Let\u2019s Connect!\",\n            \"caption\": \"Get expert answers on React Micro Frontend architecture implementation for your company.\",\n            \"description\": \"Have questions about integrating React-based Micro Frontend Architecture? Connect with us to explore the best practices and solutions for scalable, modular applications.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-consultation.png\"\n        }\n        ]\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Why Micro-Frontends? Micro frontend architecture is becoming increasingly popular due to its performance benefits and the ability to reduce developer dependencies. By breaking down a monolithic frontend into smaller, independent micro-applications, teams can work on different parts of a project simultaneously, improving scalability and maintainability. What You Will Learn in This Tutorial In this guide, [&hellip;]<\/p>\n","protected":false},"author":95,"featured_media":35526,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[286],"tags":[4749,4752,4751,4750,4754,4760,4757,4762,4755,4753,4761,4756,4759,4758],"class_list":["post-35512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-micro-frontend-architecture","tag-micro-frontend-architecture-angular","tag-micro-frontend-architecture-diagram","tag-micro-frontend-architecture-react","tag-micro-frontend-architecture-2","tag-module-federation-example","tag-module-federation-react","tag-module-federation-with-vite","tag-react-js-micro-frontend-architecture","tag-react-micro-frontend-architecture","tag-react-vite-tutorial","tag-vite-module-federation","tag-vite-react-setup","tag-webpack-module-federation"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Micro Frontend Architecture Tutorial with Example<\/title>\n<meta name=\"description\" content=\"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Micro Frontend Architecture Tutorial with Example\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-25T09:52:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-15T11:35:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/og-React-Micro-Frontend-Architecture.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Chetan Shelake\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chetan Shelake\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\"},\"author\":{\"name\":\"Chetan Shelake\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/b687ac0452e66fa531e251ea15299662\"},\"headline\":\"React Micro Frontend Architecture &#8211; An in Depth Tutorial With Example\",\"datePublished\":\"2025-02-25T09:52:57+00:00\",\"dateModified\":\"2025-10-15T11:35:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\"},\"wordCount\":708,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\",\"keywords\":[\"micro frontend architecture\",\"micro frontend architecture angular\",\"micro frontend architecture diagram\",\"micro frontend architecture react\",\"micro-frontend architecture\",\"module federation example\",\"module federation react\",\"module federation with vite\",\"react js micro frontend architecture\",\"react micro frontend architecture\",\"react vite tutorial\",\"vite module federation\",\"vite react setup\",\"webpack module federation\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\",\"name\":\"React Micro Frontend Architecture Tutorial with Example\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\",\"datePublished\":\"2025-02-25T09:52:57+00:00\",\"dateModified\":\"2025-10-15T11:35:35+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/b687ac0452e66fa531e251ea15299662\"},\"description\":\"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.\",\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png\",\"width\":855,\"height\":392,\"caption\":\"React Micro Frontend Architecture Tutorial and Guide\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Micro Frontend Architecture &#8211; An in Depth Tutorial With Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/b687ac0452e66fa531e251ea15299662\",\"name\":\"Chetan Shelake\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/d00da0aa6e84627bbe1e8018c969afb8cc152be94eff76a32f342bde203c0e7f?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d00da0aa6e84627bbe1e8018c969afb8cc152be94eff76a32f342bde203c0e7f?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d00da0aa6e84627bbe1e8018c969afb8cc152be94eff76a32f342bde203c0e7f?s=96&r=g\",\"caption\":\"Chetan Shelake\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Micro Frontend Architecture Tutorial with Example","description":"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example","og_locale":"en_US","og_type":"article","og_title":"React Micro Frontend Architecture Tutorial with Example","og_description":"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.","og_url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example","og_site_name":"Mobisoft Infotech","article_published_time":"2025-02-25T09:52:57+00:00","article_modified_time":"2025-10-15T11:35:35+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/og-React-Micro-Frontend-Architecture.png","type":"image\/png"}],"author":"Chetan Shelake","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chetan Shelake","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example"},"author":{"name":"Chetan Shelake","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/b687ac0452e66fa531e251ea15299662"},"headline":"React Micro Frontend Architecture &#8211; An in Depth Tutorial With Example","datePublished":"2025-02-25T09:52:57+00:00","dateModified":"2025-10-15T11:35:35+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example"},"wordCount":708,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png","keywords":["micro frontend architecture","micro frontend architecture angular","micro frontend architecture diagram","micro frontend architecture react","micro-frontend architecture","module federation example","module federation react","module federation with vite","react js micro frontend architecture","react micro frontend architecture","react vite tutorial","vite module federation","vite react setup","webpack module federation"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example","url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example","name":"React Micro Frontend Architecture Tutorial with Example","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png","datePublished":"2025-02-25T09:52:57+00:00","dateModified":"2025-10-15T11:35:35+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/b687ac0452e66fa531e251ea15299662"},"description":"Learn how to build a React Micro Frontend Architecture with this in-depth tutorial. Explore Module Federation, Vite, and practical examples to get started.","breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/02\/react-micro-frontend-architecture-guide.png","width":855,"height":392,"caption":"React Micro Frontend Architecture Tutorial and Guide"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/react-micro-frontend-architecture-tutorial-example#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"React Micro Frontend Architecture &#8211; An in Depth Tutorial With Example"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/b687ac0452e66fa531e251ea15299662","name":"Chetan Shelake","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d00da0aa6e84627bbe1e8018c969afb8cc152be94eff76a32f342bde203c0e7f?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d00da0aa6e84627bbe1e8018c969afb8cc152be94eff76a32f342bde203c0e7f?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d00da0aa6e84627bbe1e8018c969afb8cc152be94eff76a32f342bde203c0e7f?s=96&r=g","caption":"Chetan Shelake"}}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/35512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/95"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=35512"}],"version-history":[{"count":37,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/35512\/revisions"}],"predecessor-version":[{"id":44260,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/35512\/revisions\/44260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/35526"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=35512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=35512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=35512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}