Micro Frontend Architecture Setup with ReactJS, TypeScript, RTK Query, Redux, Webpack Module Federation, SonarQube

#react #typescript #webpack #redux

Micro Frontend Architecture Setup with ReactJS, TypeScript, RTK Query, Redux, Webpack Module Federation, SonarQube, Jest, Lerna, and Husky
Micro Frontend Architecture (MFE) is a pattern that breaks down a large frontend monolithic application into smaller, self-contained units that are independently deployable. Each unit is responsible for a specific feature of the app and can be developed, tested, and deployed independently. This approach improves modularity, allows for technology flexibility, and enhances team collaboration.

In this article, we will walk you through the setup of a micro frontend architecture using ReactJS, TypeScript, Redux Toolkit (RTK Query), Webpack Module Federation, SonarQube, Jest, Lerna, and Husky.

Prerequisites
Node.js and npm/yarn installed.
Basic knowledge of React, TypeScript, Redux, Webpack, and testing.
Familiarity with SonarQube for code quality checks.
Let’s break down the architecture and setup in steps.

Step 1: Project Structure
Let’s assume we’re creating a system with multiple micro-frontends. We will create two React apps: App1 and App2, and a Shared UI package that contains common components. We'll use Lerna to manage these apps and their packages.

Project Directory:
/micro-frontend-architecture
/apps
/app1
/app2
/packages
/shared-ui
/tools
/husky
/node_modules
package.json
lerna.json
tsconfig.json
webpack.config.js
apps/: Contains the main micro frontends (App1, App2).
packages/: Contains shared components or packages.
tools/: Contains Husky configuration for Git hooks.
Step 2: Initialize the Monorepo Using Lerna
Lerna will help us manage our monorepo. It enables efficient management of packages, dependencies, and versioning.

Install Lerna globally:

npm install -g lerna
Initialize Lerna in the project folder:

lerna init
This will create the necessary files (lerna.json, packages/, etc.).

Step 3: Create React Applications (App1, App2)
Each app will be a separate React application, but they can share common components from the shared-ui package.

Create App1:

npx create-react-app apps/app1 --template typescript
cd apps/app1
npm install @reduxjs/toolkit react-redux
Create App2 similarly in the apps/app2 directory.

Step 4: Add Shared UI Package
To share UI components across multiple apps, we’ll create a shared package.

Inside the packages/ directory, create shared-ui:

mkdir packages/shared-ui
cd packages/shared-ui
npm init -y
npm install react react-dom
Inside shared-ui, create a simple Button component (Button.tsx):

import React from 'react';

const Button = ({ children }: { children: React.ReactNode }) => (
{children}
);

export default Button;
Publish this component to your App1 and App2 by adding it as a dependency in package.json of both apps.

Step 5: Webpack Module Federation for Micro Frontends
Webpack’s Module Federation plugin is key to the micro-frontend architecture. It allows separate apps (micro-frontends) to share components or modules at runtime.

In app1/webpack.config.js, add the following configuration:

const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;

module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app1',
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js',
},
shared: ['react', 'react-dom', '@reduxjs/toolkit'],
}),
],
};
Similarly, configure app2/webpack.config.js to expose its components to App1.

Step 6: Redux and RTK Query Setup
In both apps, use Redux Toolkit and RTK Query for state management.

In both app1 and app2, set up Redux:

npm install @reduxjs/toolkit react-redux
Define a Redux slice (e.g., authSlice.ts) and create an API service with RTK Query (api.ts).

authSlice.ts:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;
api.ts (RTK Query setup):

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
endpoints: (builder) => ({
getUser: builder.query({
query: () => 'user',
}),
}),
});

export const { useGetUserQuery } = api;
Step 7: Jest Setup for Unit Testing
Jest can be used to test React components and Redux slices.

Install Jest and React Testing Library in both app1 and app2:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Configure jest.config.js in both apps:

module.exports = {
preset: 'react-app',
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};
Write unit tests for the components and Redux slices.

Step 8: SonarQube Integration
SonarQube helps analyze and ensure the quality of your codebase. You can set up SonarQube to continuously monitor the quality of your micro frontends.

Install SonarQube CLI:

npm install -g sonar-scanner
Configure sonar-project.properties in the root of the project:

sonar.projectKey=my-microfrontend-project
sonar.sources=apps/app1/src,apps/app2/src
sonar.host.url=http://localhost:9000
Run SonarQube analysis:

sonar-scanner
Step 9: Husky for Git Hooks
Husky will help set up Git hooks to ensure code quality by running linting, tests, or other checks before committing or pushing.

Install Husky:

npx husky-init
npm install
Configure Husky to run linting and tests before each commit:

npx husky add .husky/pre-commit "npm run lint && npm test"
Conclusion
By following the steps above, you’ve set up a micro frontend architecture with multiple React apps using:

Lerna for managing the monorepo.
Webpack Module Federation to expose and share components between apps.
Redux and RTK Query for state management and data fetching.
Jest for testing the components and logic.
SonarQube for code quality checks.
Husky for pre-commit hooks to maintain code quality.
This setup provides a flexible, scalable, and maintainable architecture for building micro frontends in React.