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:
npx create-react-app react-app
cd react-app
Now, let’s install the necessary dependencies:
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:
// 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:
npx angularjs-seed angularjs-app
cd angularjs-app
Now, let’s install the necessary dependencies:
npm install angular@latest angular-route@latest
Next, we’ll create a basic AngularJS component:
// 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:
// 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:
// 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:
// src/index.js (React App)
import React from 'react';
import ReactDOM from 'react-dom';
import ReactComponent from './ReactComponent';
const App = () => {const [angularComponent, setAngularComponent] = React.useState(null);
React.useEffect(() => {import(‘http://localhost:3002/remoteEntry.js’).then((module) => {
const { AngularComponent } = module.angularjsApp;
setAngularComponent(<AngularComponent />);
});
}, []);
return (<div>
<ReactComponent />
{angularComponent}
</div>
);
};
ReactDOM.render(<App />, document.getElementById(‘root’));
In the AngularJS application (app/index.html
), import and use the React component:
<!-- app/index.html (AngularJS App) -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS App</title>
</head>
<body>
<div ng-app="myApp">
<angular-component></angular-component>
</div>
<script src=“http://localhost:3001/remoteEntry.js”></script><script src=“http://localhost:3001/main.js”></script>
</body>
</html>
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.