In recent years, the concept of micro frontends has emerged as a powerful architectural style for building scalable, maintainable web applications. By enabling teams to work independently on different parts of an application, micro frontends facilitate parallel development and improve the overall agility of software delivery. This article explores how to create micro frontends using React, a popular JavaScript library for building user interfaces.<\/p>\n
Micro frontends break a monolithic front-end application into smaller, manageable, and independently deployable pieces. Each piece represents a specific business domain or feature and can be developed, tested, and deployed by different teams. This allows for:<\/p>\n
By leveraging micro frontends, organizations can adapt to changing requirements and scale their web applications more effectively.<\/p>\n
Before diving into the implementation, let\u2019s review some key concepts associated with micro frontends:<\/p>\n
We’ll use React<\/strong> with Single SPA<\/strong> and Webpack Module Federation<\/strong> for our micro frontend setup. Begin by creating a new directory for our project:<\/p>\n Next, initialize a new npm project:<\/p>\n Install necessary dependencies:<\/p>\n In our project, we\u2019ll create two micro frontend applications, \u201capp1\u201d and \u201capp2,\u201d which can operate independently.<\/p>\n Each application will have a standard React structure:<\/p>\n In the src\/index.js<\/strong> of app1, add:<\/p>\n In the src\/App.js<\/strong>, create a simple component:<\/p>\n The public\/index.html<\/strong> will need to load the script generated by Webpack:<\/p>\n We need to configure Webpack for each of our apps. Create a webpack.config.js<\/strong> file in the root of app1<\/strong>: <\/p>\n Repeat the same for app2 while changing ports and filenames accordingly. In app2<\/strong>: <\/p>\n Next, we need to create a *container* application that will load our micro frontends. Create a new directory for the container:<\/p>\n Add the following files similar to previous applications:<\/p>\n In src\/index.js<\/strong>, set up Single SPA:<\/p>\n In the public\/index.html<\/strong>, define a root element:<\/p>\n Create a webpack.config.js<\/strong> file in the root of the container:<\/p>\n Navigate to each directory (app1, app2, and container) and run:<\/p>\nmkdir react-micro-frontends\ncd react-micro-frontends\n<\/code><\/pre>\nnpm init -y\n<\/code><\/pre>\nnpm install react react-dom single-spa\nnpm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin\n<\/code><\/pre>\nCreating Your First Micro Frontend<\/h2>\n
Step 1: Creating a Micro Frontend Application<\/h3>\n
mkdir app1 app2\n<\/code><\/pre>\n\napp1\/\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 index.js\n\u2502 \u2514\u2500\u2500 App.js\n\u251c\u2500\u2500 public\/\n\u2502 \u2514\u2500\u2500 index.html\n\u2514\u2500\u2500 package.json\n<\/code><\/pre>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\n\nReactDOM.render(, document.getElementById('root'));\n<\/code><\/pre>\nimport React from 'react';\n\nconst App = () => {\n return (\n <div>\n <h1>Welcome to App 1<\/h1>\n <p>This is the first micro frontend!<\/p>\n <\/div>\n );\n};\n\nexport default App;\n<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>App 1<\/title>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n<\/body>\n<\/code><\/pre>\nStep 2: Configuring Webpack<\/h3>\n
const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack\/lib\/container');\n\nmodule.exports = {\n mode: 'development',\n entry: '.\/src\/index.js',\n output: {\n filename: 'bundle.js',\n publicPath: 'http:\/\/localhost:3001\/',\n },\n devServer: {\n port: 3001,\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'app1',\n filename: 'remoteEntry.js',\n exposes: {\n '.\/App': '.\/src\/App',\n },\n shared: {\n react: {\n singleton: true,\n eager: true,\n requiredVersion: '^17.0.0'\n },\n 'react-dom': {\n singleton: true,\n eager: true,\n requiredVersion: '^17.0.0'\n },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html'\n }),\n ],\n module: {\n rules: [\n {\n test: \/.jsx?$\/,\n use: 'babel-loader',\n exclude: \/node_modules\/,\n },\n ],\n },\n};\n<\/code><\/pre>\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack\/lib\/container');\n\nmodule.exports = {\n mode: 'development',\n entry: '.\/src\/index.js',\n output: {\n filename: 'bundle.js',\n publicPath: 'http:\/\/localhost:3002\/',\n },\n devServer: {\n port: 3002,\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'app2',\n filename: 'remoteEntry.js',\n exposes: {\n '.\/App': '.\/src\/App',\n },\n shared: {\n react: {\n singleton: true,\n eager: true,\n requiredVersion: '^17.0.0'\n },\n 'react-dom': {\n singleton: true,\n eager: true,\n requiredVersion: '^17.0.0'\n },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html'\n }),\n ],\n module: {\n rules: [\n {\n test: \/.jsx?$\/,\n use: 'babel-loader',\n exclude: \/node_modules\/,\n },\n ],\n },\n};\n<\/code><\/pre>\nStep 3: Setting Up the Container Application<\/h2>\n
mkdir container\ncd container\nnpm init -y\nnpm install react react-dom single-spa\nnpm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin\nmkdir src public\n<\/code><\/pre>\nCreating the Container Application<\/h3>\n
\ncontainer\/\n\u251c\u2500\u2500 src\/\n\u2502 \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 public\/\n\u2502 \u2514\u2500\u2500 index.html\n\u2514\u2500\u2500 webpack.config.js\n<\/code><\/pre>\nimport { registerApplication, start } from 'single-spa';\n\nregisterApplication(\n 'app1',\n () => import('app1\/App'),\n () => true\n);\n\nregisterApplication(\n 'app2',\n () => import('app2\/App'),\n () => location.pathname === '\/app2'\n);\n\nstart();\n<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Container App<\/title>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n<\/body>\n<\/code><\/pre>\nConfiguring Webpack for the Container<\/h3>\n
const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack\/lib\/container');\n\nmodule.exports = {\n mode: 'development',\n entry: '.\/src\/index.js',\n output: {\n filename: 'bundle.js',\n publicPath: 'http:\/\/localhost:3000\/',\n },\n devServer: {\n port: 3000,\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'container',\n remotes: {\n app1: 'app1@http:\/\/localhost:3001\/remoteEntry.js',\n app2: 'app2@http:\/\/localhost:3002\/remoteEntry.js',\n },\n shared: {\n react: {\n singleton: true,\n eager: true,\n requiredVersion: '^17.0.0'\n },\n 'react-dom': {\n singleton: true,\n eager: true,\n requiredVersion: '^17.0.0'\n },\n },\n }),\n new HtmlWebpackPlugin({\n template: '.\/public\/index.html'\n }),\n ],\n module: {\n rules: [\n {\n test: \/.jsx?$\/,\n use: 'babel-loader',\n exclude: \/node_modules\/,\n },\n ],\n },\n};\n<\/code><\/pre>\nStep 4: Running the Micro Frontends<\/h2>\n
npx webpack serve\n<\/code><\/pre>\n