**Microservices** In recent years, microservices have exploded in popularity, with many companies using this architectural methodology to avoid the limitations of large, monolithic backends. While much has been written about this style of building server-side software, many companies continue to struggle with monolithic frontend codebases. Perhaps you want to build a progressive or responsive web application, but can't find an easy place to start integrating these features into the existing code. Maybe you just want to scale your development so that multiple teams can work on a single product simultaneously, but the architecture style in the existing monolith means that everyone is stepping on each other's toes. These are all real problems that can all negatively affect your ability to efficiently deliver high quality experiences to your customers. **What is a microfrontend? ** Lately we are seeing more and more attention being paid to the overall architecture and organisational structures that are necessary for complex, modern web development. In particular, we're seeing patterns emerge for decomposing frontend monoliths into smaller, simpler chunks that can be developed, tested and deployed independently, while still appearing to customers as a single cohesive product. We call this technique micro frontends. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqn2rbrn9fxjjfr35gug.png) **How to make the microfrontend architecture possible?** So, with webpack 5 and Module Federation introduction it came possible to share components across applications. Module Federation aims to solve the sharing of modules in a distributed system, by shipping those critical shared pieces as macro or as micro as you would like. It does this by pulling them out of the the build pipeline and out of your apps. Imagine you manage three teams, each responsible for their own microfrontend. Each of these teams work with different frameworks (Angular,React,Vue). Module Federation allows for these teams to integrate their pieces of code with no problems. Despite the code being possible to be shared using module federation, the state management across applications is not possible, to the rescue comes React useContext, Redux, Zustand, or any other state management library. There are two concepts in the microfrontend architecture to know: **Remote** and **Consumer** - **Remote** exposes a component/components. - **Consumer** consumes the component shared by the remote. To understand how the logic of a microfrontend works,let's try it using React. For this article we will create two **Remote** applications (User and Product) and a **Consumer** called Shell that will pull components exposed by those two Remote applications. **Step 1 - Create the applications** `npx create-react-app shell` `npx create-react-app user` `npx create-react-app product` **Step 2 — Bootstraping** Let’s add a file named bootstrap.js under the src folder and its content will be as follows: ``` import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); ``` Let’s change the content of the _index.js_ file under the src folder as follows: `import('./bootstrap');` We do these operations so that we can make asynchronous installation. Let’s repeat these operations in the other applications. **Step 3 — App.js component and App.css** Replace the content of App.js in each of the applications,and change the respective name and classnames. - App.js ``` import React from 'react'; import './App.css'; const App = () => (

Hi from Shell App

); export default App; ``` - App.css ``` .shell-app { margin: 5px; text-align: center; background: #fff3e0; border: 1px dashed #ffb74d; border-radius: 5px; color: #115cce; } ``` **Step 3 - Webpack Configuration** As I mentioned before,webpack allows us to use module federation but for us to consume components or expose components to be used by other applications. For that we need to create and configure a webpack.config.js in the **root** folder of each application as the following: - **Shell App** With this configuration the Shell App will be able to consume whatever component is exposed from both User and Product apps. Note: The **remote** property in the configuration underneath tells us where we should point to if we want to consume components from external applications. ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const deps = require('./package.json').dependencies; module.exports = { mode: 'development', devServer: { port: 3000, }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'SHELL', filename: 'remoteEntry.js', remotes: { PRODUCT: 'PRODUCT@http://localhost:3002/remoteEntry.js', USER: 'USER@http://localhost:3001/remoteEntry.js', }, shared: [ { ...deps, react: { requiredVersion: deps.react, singleton: true }, 'react-dom': { requiredVersion: deps['react-dom'], singleton: true, }, }, ], }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], }; ``` - **User App** This configuration exposes the component App.js from the User application. Note: The **exposes** property in the configuration underneath tells webpack that we are exposing the App.js component which can be used by any external application using module federation. The **name** is also important to pay attention to as the Shell app webpack.config.js will need the name in the remotes property for it to consume from this application. Example: `remotes: { PRODUCT: 'PRODUCT@http://localhost:3002/remoteEntry.js', USER: 'USER@http://localhost:3001/remoteEntry.js', },` ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const deps = require('./package.json').dependencies; module.exports = { mode: 'development', devServer: { port: 3001, }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'USER', filename: 'remoteEntry.js', exposes: { './App': './src/App', }, shared: [ { ...deps, react: { requiredVersion: deps.react, singleton: true }, 'react-dom': { requiredVersion: deps['react-dom'], singleton: true, }, }, ], }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], }; ``` - **Product App** This configuration exposes the component App.js from the Product application. ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const deps = require('./package.json').dependencies; module.exports = { mode: 'development', devServer: { port: 3002, }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'PRODUCT', filename: 'remoteEntry.js', exposes: { './App': './src/App', }, shared: [ { ...deps, react: { requiredVersion: deps.react, singleton: true }, 'react-dom': { requiredVersion: deps['react-dom'], singleton: true, }, }, ], }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], }; ``` If we run `yarn webpack server` on each of the applications we see the respective applications components rendered. **Shell App** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgvkfgk3i5ytxsi24vqh.png) **Product App** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hte1t5gbi512htz8o7no.png) **User App** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mx5jm8sk4bc674ndmqr.png) Despite all the configuration we set for us to expose and consume components from different applications we are not yet seeing the components from the User and Product App being consumed in the Shell App. For us to do so we need to do a final adjustment to our App.js in the Shell App. ``` import React from 'react'; import './App.css'; const ProductApp = React.lazy(() => import('PRODUCT/App')); const UserApp = React.lazy(() => import('USER/App')); const App = () => (

Hi from Shell App

); export default App; ``` For us to render the consumed components we need to use React.lazy, if you tried to import the components in the shell app as you would on a normal react application, it would not work. Lazy loading allows us to render the components on demand. If we now run `yarn webpack server` and look into Shell application we see now that the components are being consumed :) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u796um231xrablbliocs.png) For more information on why React.lazy is important you can check this blog (https://blog.logrocket.com/lazy-loading-components-in-react-16-6-6cea535c0b52/) **Important Note:** As you saw it can be interesting to use module federation,but for example, if one of the applications crash, then your Shell App will crash. You might think something is wrong with module federation,but one thing we can do to prevent this of occurring is to split our files in our root folder, and create a component for each of the applications that are being consumed. With the help of getDerivedStateFromError() lifecycle method we can set an hasError to be true in our ProductWrapper state if for example the Lazy Load doesn't work and use it accordingly to render a custom message (**Product component threw an error!**) **Product.js** ``` import React from 'react'; import './App.css'; const ProductApp = React.lazy(() => import('PRODUCT/App').catch((error) => errorLoading(error)) ); export const errorLoading = (err) => { console.log('An error has occured', 'Please refresh the page.'); }; class ProductWrapper extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch() {} render() { if (this.state.hasError) { return ( Loading fallback header}>

Product component threw an error!

); } return ( <> Header loading}> ); } } const Product = () => (

); export default Product; ``` **User.js** ``` import React from 'react'; import './App.css'; const UserApp = React.lazy(() => import('USER/App').catch((error) => errorLoading(error)) ); export const errorLoading = (err) => { console.log('An error has occured', 'Please refresh the page.'); }; class UserWrapper extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch() {} render() { if (this.state.hasError) { return ( Loading fallback header}>

User component threw an error!

); } return ( <> Header loading}> ); } } const User = () => (

); export default User; ``` Finally,as we created files for each of the consumed components, we need to adjust the App.js aswell to import these files. So replace everything you had before with this: **App.js** ``` import React from 'react'; import './App.css'; const UserApp = React.lazy(() => import('./User')); const Product = React.lazy(() => import('./Product')); class HeaderWrapper extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } render() { return ( <> Header loading}> ); } } const App = () => (

Hi from Shell App

); export default App; ``` Now let's say we have all the applications running except the Product, when we check the Shell application we can see that despite not having the consumed component it throws an error in the same place we would have the real Product component. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu9wowtuxov7ab4ayope.png)

obaldthepedro

Microfrontends ( React Example)

Join Our Newsletter. No Spam, Only the good stuff.