3

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?

Prafull Dhadkar
  • 891
  • 2
  • 10
  • 23

1 Answers1

0

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

Reza Ghorbani
  • 537
  • 4
  • 14
  • I want to use my existing angular app as a parent app (or shell app). Your solution suggests creating an extra container app and mounting the header and footer in it. How could I transform my existing app into a shell app? – Prafull Dhadkar Dec 21 '21 at 04:44
  • @PrafullDhadkar doesn't need to create container app, your angular app can play a role of container app, just needs to add above config to your angular app – Reza Ghorbani Dec 21 '21 at 07:03
  • I will give it a try. My angular app does not have any webpack.config.js file for the compilation process. how could I create and configure it in the angular app? – Prafull Dhadkar Dec 21 '21 at 11:52
  • First, you need to create webpack.config.js in the root of your application and place the setting in that file. These links may be helpful. https://v5.angular.io/guide/webpack and https://developer.okta.com/blog/2019/12/09/angular-webpack – Reza Ghorbani Dec 21 '21 at 13:17
  • Please check this npm package by Manfred Steyer - https://www.npmjs.com/package/@angular-architects/module-federation-tools It will help – Dnyaneshwar Dec 29 '21 at 14:00