Integrating React and AngularJS via Webpack Module Federation

Introduction

In modern web development, integrating different frontend frameworks within a single application has become increasingly common. React and AngularJS are two popular frameworks that developers often seek to integrate due to various reasons such as legacy codebases, incremental adoption, or the need to leverage specific features from each framework. Webpack Module Federation provides a powerful solution for such integration, allowing components from different frameworks to seamlessly communicate and coexist within the same application. In this article, we’ll explore how to integrate React and AngularJS using Webpack Module Federation, accompanied by coding examples.

What is Webpack Module Federation?

Webpack Module Federation is a feature introduced in Webpack 5 that enables developers to dynamically share code between independently built and deployed JavaScript modules. It facilitates the creation of microfrontend architectures, where multiple frontend applications composed of different frameworks can be integrated into a single cohesive application.

Setting Up the React Application

First, let’s create a simple React application. We’ll use Create React App to set up our project:

bash

npx create-react-app react-app

cd react-app

Now, let’s install the necessary dependencies:

bash

npm install react@latest react-dom@latest webpack@latest webpack-cli@latest @webpack-cli/serve@latest html-webpack-plugin@latest

Next, we’ll create a basic React component:

jsx

// src/ReactComponent.js

import React from 'react';

const ReactComponent = () => {
return (
<div>
<h1>This is a React Component</h1>
</div>
);
};export default ReactComponent;

Setting Up the AngularJS Application

Next, let’s create a simple AngularJS application. We’ll use AngularJS Seed to set up our project:

bash

npx angularjs-seed angularjs-app

cd angularjs-app

Now, let’s install the necessary dependencies:

bash

npm install angular@latest angular-route@latest

Next, we’ll create a basic AngularJS component:

javascript

// app/components/angularComponent.js

angular.module('myApp').component('angularComponent', {

template: '<h1>This is an AngularJS Component</h1>'

});

Configuring Webpack for Module Federation

Now that we have our React and AngularJS applications set up, let’s configure Webpack for Module Federation integration.

Create a webpack.config.js file in the root directory of the React application:

javascript

// webpack.config.js (React App)

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {
entry: ‘./src/index.js’,
output: {
publicPath: ‘http://localhost:3001/’,
},
devServer: {
port: 3001,
},
plugins: [
new ModuleFederationPlugin({
name: ‘reactApp’,
filename: ‘remoteEntry.js’,
exposes: {
‘./ReactComponent’: ‘./src/ReactComponent’,
},
}),
new HtmlWebpackPlugin({
template: ‘./public/index.html’,
}),
],
};

Create a webpack.config.js file in the root directory of the AngularJS application:

javascript

// webpack.config.js (AngularJS App)

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {
entry: ‘./app/index.js’,
output: {
publicPath: ‘http://localhost:3002/’,
},
devServer: {
port: 3002,
},
plugins: [
new ModuleFederationPlugin({
name: ‘angularjsApp’,
filename: ‘remoteEntry.js’,
exposes: {
‘./AngularComponent’: ‘./app/components/angularComponent.js’,
},
}),
new HtmlWebpackPlugin({
template: ‘./app/index.html’,
}),
],
};

Integrating React and AngularJS Components

With Webpack Module Federation configured for both applications, we can now integrate React and AngularJS components seamlessly.

In the React application (src/index.js), import and render the AngularJS component:

javascript

// src/index.js (React App)

import React from 'react';

import ReactDOM from 'react-dom';

import ReactComponent from './ReactComponent';

ReactDOM.render(<App />, document.getElementById(‘root’));

In the AngularJS application (app/index.html), import and use the React component:

html

<!-- app/index.html (AngularJS App) -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>AngularJS App</title>

</head>

<body>

<div ng-app="myApp">

<angular-component></angular-component>

</div>

Conclusion

In this article, we’ve explored how to integrate React and AngularJS using Webpack Module Federation. By leveraging Webpack’s powerful capabilities, we were able to seamlessly incorporate components from both frameworks within a single application. This approach enables developers to combine the strengths of React and AngularJS, making it easier to migrate legacy codebases or incrementally adopt new technologies. With the flexibility provided by Webpack Module Federation, the possibilities for frontend integration are endless, empowering developers to build sophisticated and interoperable web applications.