The web development landscape is continuously evolving, and one of the most significant trends in recent years is the rise of micro frontends. Micro frontends allow teams to work independently on different parts of a web application, using their own technology stacks. This approach not only enhances scalability and maintainability but also empowers teams to innovate faster. This blog will explore how to create micro frontends using React, diving into key concepts, patterns, and implementation steps.<\/p>\n
Micro frontends are a software architecture pattern inspired by microservices. Instead of building a monolithic frontend application, you can break it down into smaller, self-contained parts that can be developed, tested, and deployed independently. Each team can choose its own stack, frameworks, and tools, making it easier to adapt to changing requirements and technologies.<\/p>\n
There are several advantages to adopting a micro frontend architecture:<\/p>\n
Before diving into implementation, it\u2019s essential to grasp a few core concepts:<\/p>\n
We\u2019ll set up a simple micro frontend architecture using React. This will involve creating a shell application and an example micro frontend. For this example, we will use Module Federation<\/strong>, a feature from Webpack 5 that facilitates the sharing of modules between applications.<\/p>\n First, we need to set up the shell application that will host our micro frontends:<\/p>\n Next, we will configure Webpack in `webpack.config.js`. Here\u2019s an example of a basic config for using Module Federation:<\/p>\n After configuring Webpack, let\u2019s set up routing within the shell:<\/p>\n Next, we will create a micro frontend application. You can create another React application similarly:<\/p>\n Now, let\u2019s configure the Module Federation in the micro frontend app:<\/p>\n Now, define a simple React component in `src\/MicroComponent.tsx`:<\/p>\n To run the applications, you will need to start both the shell and micro frontend applications on different ports. You can do this with:<\/p>\n Once both applications are running, accessing the shell application at http:\/\/localhost:3000<\/a> and navigating to http:\/\/localhost:3000\/micro<\/a> will render the micro frontend component.<\/p>\n When implementing micro frontends, consider the following best practices to ensure a successful architecture:<\/p>\n Micro frontends represent a paradigm shift in how web applications are built. By leveraging this architecture with React, development teams can enhance their workflows, make applications more scalable, and foster innovation. The setup we explored is just the beginning; as you advance in your micro frontend journey, you can experiment with advanced routing solutions, state management, or even integrating different frameworks. Embrace the micro frontend spirit and create exciting, scalable applications!<\/p>\n","protected":false},"excerpt":{"rendered":" Creating Micro Frontends with React The web development landscape is continuously evolving, and one of the most significant trends in recent years is the rise of micro frontends. Micro frontends allow teams to work independently on different parts of a web application, using their own technology stacks. This approach not only enhances scalability and maintainability<\/p>\n","protected":false},"author":81,"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-7627","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\/7627","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\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7627"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7627\/revisions"}],"predecessor-version":[{"id":7628,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7627\/revisions\/7628"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Step 1: Create the Shell Application<\/h3>\n
npx create-react-app shell-app --template typescript\ncd shell-app\nnpm install webpack@5 webpack-cli@4 react-router-dom\n<\/code><\/pre>\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ModuleFederationPlugin = require('webpack\/lib\/container\/ModuleFederationPlugin');\n\nmodule.exports = {\n entry: '.\/src\/index.tsx',\n output: {\n publicPath: 'http:\/\/localhost:3000\/',\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'shell',\n remotes: {\n microFrontendApp: 'microFrontendApp@http:\/\/localhost:3001\/remoteEntry.js',\n },\n shared: {\n react: { singleton: true },\n 'react-dom': { singleton: true },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html',\n }),\n ],\n resolve: {\n extensions: ['.tsx', '.ts', '.js'],\n },\n module: {\n rules: [\n {\n test: \/.(ts|tsx)$\/,\n use: 'ts-loader',\n exclude: \/node_modules\/,\n },\n ],\n },\n};<\/code><\/pre>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nconst App = () => (\n \n Micro Frontend Shell<\/h1>\n \n import('microFrontendApp\/MicroComponent'))} \/>\n \n <\/div>\n \n);\n\nexport default App;<\/code><\/pre>\n
Step 2: Create a Micro Frontend<\/h3>\n
npx create-react-app micro-frontend-app --template typescript\ncd micro-frontend-app\nnpm install webpack@5 webpack-cli@4\n<\/code><\/pre>\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ModuleFederationPlugin = require('webpack\/lib\/container\/ModuleFederationPlugin');\n\nmodule.exports = {\n entry: '.\/src\/index.tsx',\n output: {\n publicPath: 'http:\/\/localhost:3001\/',\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'microFrontendApp',\n filename: 'remoteEntry.js',\n exposes: {\n '.\/MicroComponent': '.\/src\/MicroComponent',\n },\n shared: {\n react: { singleton: true },\n 'react-dom': { singleton: true },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html',\n }),\n ],\n resolve: {\n extensions: ['.tsx', '.ts', '.js'],\n },\n module: {\n rules: [\n {\n test: \/.(ts|tsx)$\/,\n use: 'ts-loader',\n exclude: \/node_modules\/,\n },\n ],\n },\n};<\/code><\/pre>\nimport React from 'react';\n\nconst MicroComponent = () => {\n return Step 3: Running Both Applications<\/h3>\n
cd shell-app\nnpm start\n<\/code><\/pre>\ncd micro-frontend-app\nnpm start\n<\/code><\/pre>\nBest Practices when Working with Micro Frontends<\/h2>\n
\n
Conclusion<\/h2>\n