As web applications grow in complexity, so does the need for efficient architecture that allows teams to work simultaneously without stepping on each other’s toes. Enter micro frontends: a paradigm shift in frontend development that breaks up monolithic applications into smaller, manageable pieces. In this blog, we’ll explore how to create micro frontends using React, a popular JavaScript library for building user interfaces.<\/p>\n
Micro frontends extend the microservices approach to the frontend world. Instead of one large application, micro frontends involve multiple self-contained applications (or “micro frontends”) that can be developed, tested, and deployed independently. Each team can choose its own technologies, allowing greater flexibility and scalability.<\/p>\n
The micro frontend architecture offers several advantages:<\/p>\n
Despite their advantages, micro frontends come with their own set of challenges:<\/p>\n
To create a micro frontend using React, we can use a few modern techniques and tools. The following steps illustrate how to create a simple micro frontend system:<\/p>\n
Start by setting up a new React application for your micro frontend. You can use Create React App (CRA) for this purpose. Run the following command:<\/p>\n
\nnpx create-react-app my-micro-frontend<\/code>\n<\/pre>\nOnce your project is set up, navigate into the project directory:<\/p>\n
\ncd my-micro-frontend<\/code>\n<\/pre>\n2. Define Your Micro Frontends<\/h3>\n
Let\u2019s assume we are creating a simple e-commerce web application with two micro frontends:<\/p>\n
\n- Shopping Cart<\/li>\n
- Product Catalog<\/li>\n<\/ul>\n
Create separate directories for your micro frontends:<\/p>\n
\nmkdir shopping-cart product-catalog<\/code>\n<\/pre>\nNow, initialize a new React application in each of these directories:<\/p>\n
\n\ncd shopping-cart\nnpx create-react-app .\ncd ..\/product-catalog\nnpx create-react-app .\n<\/code>\n<\/pre>\n3. Building the Micro Frontends<\/h3>\n
Let\u2019s add simple components to each micro frontend application.<\/p>\n
Shopping Cart Micro Frontend<\/h4>\n
Open the `shopping-cart\/src\/App.js` file and replace its contents with the following:<\/p>\n
\n\nimport React from 'react';\n\nfunction App() {\n return (\n \n Shopping Cart<\/h1>\n
Your items will appear here.<\/p>\n <\/div>\n );\n}\n\nexport default App;\n<\/code>\n<\/pre>\n
Product Catalog Micro Frontend<\/h4>\n
Next, update the `product-catalog\/src\/App.js` file with this content:<\/p>\n
\n\nimport React from 'react';\n\nfunction App() {\n return (\n \n Product Catalog<\/h1>\n
List of products goes here.<\/p>\n <\/div>\n );\n}\n\nexport default App;\n<\/code>\n<\/pre>\n
4. Combining Micro Frontends<\/h3>\n
To integrate these micro frontends into a single application, we need a shell application. This will load the micro frontends dynamically. Create another React app in a new directory:<\/p>\n
\nnpx create-react-app shell-app<\/code>\n<\/pre>\nIn your shell application, install a library for importing applications remotely. We\u2019ll use an npm package called “single-spa-react”:<\/p>\n
\nnpm install single-spa-react<\/code>\n<\/pre>\nNext, create a simple setup in the `shell-app` to render your micro frontends. Open the `src\/index.js` file and add the following code:<\/p>\n
\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { registerApplication, start } from 'single-spa';\nimport { mountRootParcel } from 'single-spa-react';\n\nconst loadApp = (name) => () => import(`http:\/\/localhost:3000\/${name}\/main.js`);\n\nregisterApplication('shopping-cart', loadApp('shopping-cart'), location => location.pathname.startsWith('\/cart'));\nregisterApplication('product-catalog', loadApp('product-catalog'), location => location.pathname.startsWith('\/products'));\n\nstart();\n\nReactDOM.render(Micro Frontend Shell<\/div>, document.getElementById('app'));\n<\/code>\n<\/pre>\n5. Serving the Micro Frontends<\/h3>\n
To serve each application, you can use a simple HTTP server. A common choice is `http-server`, which can be installed globally:<\/p>\n
\nnpm install -g http-server<\/code>\n<\/pre>\nRun this command in each micro frontend\u2019s directory to serve them:<\/p>\n
\nhttp-server build -p 3000<\/code>\n<\/pre>\nReplace `3000` with different port numbers for each micro frontend to avoid conflicts.<\/p>\n
6. Navigating Between Micro Frontends<\/h3>\n
You can navigate to your micro frontends through respective URLs. For example:<\/p>\n
\n- Shopping Cart<\/a><\/li>\n
- Product Catalog<\/a><\/li>\n<\/ul>\n
When you navigate to these URLs, you should see the respective micro frontends render their content correctly.<\/p>\n
Conclusion<\/h2>\n
In this blog, we explored how to create micro frontends using React, utilizing both separate application architectures and a shell application to bring them together. Micro frontends allow teams to build and deploy applications independently, leading to increased productivity and flexibility in technology choices. While micro frontends may introduce some complexity in integration and management, the benefits they bring to large-scale applications are worth considering.<\/p>\n
As you embark on your journey with micro frontends, remember to assess your team\u2019s needs, goals, and the expected scale of the application to decide if this architecture is the right fit for you. Happy coding!<\/p>\n
Further Reading<\/h2>\n
If you’re interested in diving deeper into micro frontends or related architecture patterns, consider these resources:<\/p>\n
\n- Micro Frontends – official website<\/a><\/li>\n
- Single SPA – official documentation<\/a><\/li>\n
- React – official documentation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Creating Micro Frontends with React As web applications grow in complexity, so does the need for efficient architecture that allows teams to work simultaneously without stepping on each other’s toes. Enter micro frontends: a paradigm shift in frontend development that breaks up monolithic applications into smaller, manageable pieces. In this blog, we’ll explore how to<\/p>\n","protected":false},"author":84,"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":{"0":"post-7176","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7176","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\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7176"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7176\/revisions"}],"predecessor-version":[{"id":7177,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7176\/revisions\/7177"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}