I have my main (parent) app written in Angular. Now I want to use a react component inside the parent app using the micro-frontend approach, But I want it to be Runtime integration.
for example, the Header of my application is in Angular. Now I want that footer should be in react but should be deployed on the server other than the parent app. I want this integration on the run-time.
How can I achieve this architecture?
Module-federation microfronted architecture is recommended.
You should have a single container(parent) app with webpack.config.js like this:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin =
require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
mode: 'development',
devServer: {
port: 8080,
},
plugins: [
new ModuleFederationPlugin({
name: 'container',
remotes: {
Header: 'header@http://localhost:8081/remoteEntry.js',
Footer: 'footer@http://localhost:8082/remoteEntry.js',
},
}),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
and separate footer and header components as a remoteEntry project, each component includes webpack.config.js file like this:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin =
require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
mode: 'development',
devServer: {
port: 8081,
},
plugins: [
new ModuleFederationPlugin({
name: 'header',
filename: 'remoteEntry.js',
exposes: {
'./Header': './src/index',
},
}),
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
and import the header in this way:
import Header from 'Header/header'
run these projects with webpack serve
you can develop each remote component with angular, react or ... because after build we have compiled and pure js files
clone this repo: https://github.com/rzghorbani72/microfrontend-modulefedefation/tree/master/mf-project-1