This content originally appeared on Bits and Pieces - Medium and was authored by Amit Kumar
Build Microfrontend In React In 3 Easy Steps
Have you ever wondered how big websites like Amazon or Netflix are able to deliver seamless user experiences across multiple pages? The answer lies in their use of microfrontend architecture.
Microfrontend is an approach to building applications where the front-end is broken down into smaller, independent parts, each with its own user interface and functionality. These independent parts are then integrated to form a complete application.
The advantage of microfrontend is that it makes an application more flexible and easier to maintain. Instead of having one monolithic front-end, you can break it down into smaller, reusable components. This allows developers to work on different parts of the application without interfering with other parts. It also means that if one part of the application needs to be updated, it can be done without affecting the rest of the application.
💡Note: Managing these components can be a challenge, especially when working with multiple teams or projects. This is where Bit comes in handy. Bit is an open-source tool for sharing and managing reusable components across different projects and teams. With Bit, you can easily create, share, and reuse components, making it easier to maintain and update your microfrontend architecture. Learn more here.
How to reuse React components across your projects
Let’s get started and build our first microfrontend in React in 3 simple steps.
1. Setup React Microfrontend Project
We will use webpack module federation with React to build our first microfrontend.
- Create your microfrontend project directory. Let’s call it: micro-host.
- Run below command to initiate project and install all dependencies:
npm init -y
npm install react react-dom --save
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack webpack-cli webpack-dev-server --save-dev
- Open package.json file and copy paste below npm scripts:
"scripts": {
"build": "webpack",
"start": "webpack serve --watch-files ./src"
}- Create a file babel.config.json and paste below config:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}- Create a file webpack.config.js and paste below config:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;
module.exports = {
mode: "development",
resolve: {
extensions: [".css", ".scss", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
url: {
filter: (url) => {
if (url.startsWith("data:")) {
return false;
}
return true;
},
},
},
},
"sass-loader",
],
},
{
test: /\.jsx?$/,
use: ["babel-loader"],
exclude: /node_modules/,
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
}),
new ModuleFederationPlugin({
name: "FIRST_APP",
filename: "remoteEntry.js",
exposes: {
"./app": "./src/components/App",
},
}),
],
};In above config we have named our microfrontend FIRST_APP. We are exposing our App component that can be integrated directly using it’s remote URL.
- Create a directory public and create file public/index.html and paste below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Micro App</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
This file creates the structure for our React web application. The app will be rendered inside “container” div when you visit the app normally like you do with any other React application.
- Create a directory src and create file src/index.js and paste below code:
import React from 'react';
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MainApp from './components/Main';
const rootElement = document.getElementById("container");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<MainApp />
</StrictMode>
);
We are using React 18 here and the MainApp component is created to use the application directly in web browser.
- Create a directory src/components and create a file App.js and paste below code:
import * as React from 'react';
import "./styles.css";
export default function App({ onChange }) {
return (
<div className="MicroApp">
<h1>Micro App</h1>
<input onChange={onChange} type="text" placeholder="Enter your name" />
</div>
);
}
The above component App is the main microfrontend we will expose in our project. You can similarly build more components and expose them using webpack.config.js.
- Create a file src/components/Main.js and paste below code:
import * as React from 'react';
import App from './App';
import "./styles.css";
export default function MainApp() {
const [name, setName] = React.useState(null);
return (
<>
<h3 style={{ textAlign: 'center' }}>{ name ? <p>Your name is: {name}</p> : null }</h3>
<App onChange={(e) => setName(e.target.value)} />
</>
);
}
The MainApp component is used for only one purpose i.e. to allow using the app like any other React app.
- Create a file src/components/styles.css and paste below code:
.MicroApp {
box-sizing: border-box;
margin: auto;
margin-top: 100px;
padding: 30px;
width: 95%;
border: 2px solid black;
border-radius: 12px;
font-family: sans-serif;
text-align: center;
}
.MicroApp input {
height: 32px;
border-radius: 8px;
border: 2px solid gray;
width: 350px;
padding-left: 10px;
padding-right: 10px;
}2. Boot Up Your First MicroFrontend App
To start your microfrontend app server, just run below command:
npm start
The app server will start at port 8080 . Visit http://localhost:8080/ to open and check out your microfrontend app.
3. Integrating MicroFrontend in React
Integrating microfrontend app in other React is very simple. The microfrontend app will be hosted on the port 8080 and our second app will integrate it through it’s remote URL exposed via webpack.
- Create your project directory. Let’s call it: micro-client.
- Run below command to initiate project and install all dependencies:
npm init -y
npm install react react-dom --save
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack webpack-cli webpack-dev-server --save-dev
- Open package.json file and copy paste below npm scripts:
"scripts": {
"build": "webpack",
"start": "webpack serve --watch-files ./src"
}- Create a file babel.config.json and paste below config:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}- Create a file webpack.config.js and paste below config:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;
module.exports = {
mode: "development",
resolve: {
extensions: [".css", ".scss", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
url: {
filter: (url) => {
if (url.startsWith("data:")) {
return false;
}
return true;
},
},
},
},
"sass-loader",
],
},
{
test: /\.jsx?$/,
use: ["babel-loader"],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public", "index.html"),
}),
new ModuleFederationPlugin({
name: "MICRO",
remotes: {
FIRST_APP: "FIRST_APP@http://localhost:8080/remoteEntry.js",
},
}),
],
};In above config we are setting our microfrontend app remote FIRST_APP.
- Create a directory public and create file public/index.html and paste below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Micro App</title>
</head>
<body style="width: 100%; height: 100%">
<div id="container"></div>
</body>
</html>
- Create a directory src and create file src/index.js and paste below code:
import React from 'react';
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("container");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
- Create a directory src/App.js and paste below code:
import React, { lazy, Suspense } from "react";
import "./styles.css";
const FirstApp = lazy(() => import("FIRST_APP/app"));
const App = () => {
const [name, setName] = React.useState(null);
return (
<div className="App">
<h1>This is second app</h1>
<h2>Micro host app is integrated here</h2>
{ name ? <p>Your name is: {name}</p> : null }
<div>
<Suspense fallback={<span>Loading...</span>}>
<FirstApp onChange={(e) => setName(e.target.value)} />
</Suspense>
</div>
</div>
);
};
export default App;We are using Suspense for loading our remote microfrontend app in this React app.
- Create a file src/components/styles.css and paste below code:
.App {
font-family: sans-serif;
text-align: center;
}Run below command to start second app:
npm start
The app will start at port 8081. Visit http://localhost:8081/ to open and check out the application.
The microfrontend app is loaded using it’s remote URL in our second React app.
The code for this tutorial can be found here.
Conclusion
In conclusion, building reusable, future-proof applications is essential for any business or organization that wants to stay ahead of the curve. Using microfrontends with React and Webpack Module Federation is an excellent way to achieve this goal.
By breaking down the front-end into smaller, independent components, you can create a more flexible and modular application. This makes it easier to maintain and update the application, and also reduces the amount of duplicate code you need to write.
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Build MicroFrontend In React In 3 Easy Steps was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Amit Kumar
Amit Kumar | Sciencx (2023-02-23T01:57:05+00:00) Build MicroFrontend In React In 3 Easy Steps. Retrieved from https://www.scien.cx/2023/02/23/build-microfrontend-in-react-in-3-easy-steps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.