[Micro frontends] NX + Angular Module Federation + Angular MFE + VueJs MFE

This article is part of a micro frontends series and a continuation of [Micro frontends] Getting Started, where we covered what we want to build, the application architecture, the initial NX workspace, Angular micro frontends and Angular Module Federation.

The aim of this article is to create a VueJs micro frontend and integrate it in the NX workspace.

The starting point is a VueJs application added to our workspace - for the record, NX doesn't support VueJs app generation, so simply generate a web application using webpack and babel compiler and add the vue dependencies (vue/cli, vue-loader, etc.).

The application is configured on port 4203. By starting the application, we can see the VueJs application, which uses Webpack and Typescript.

npx nx run messages-microapp:serve

Source code: https://github.com/blminami/tour-of-heroes-microfrontends/tree/nx-angular-vue-mfe-css/apps/messages-microapp

How do we setup the messages application as a micro frontend?

We're going to wrap our application in Web Components. Check out the code below to see how a VueJs component can be wrapped:

// bootstrap.ts

import { createApp } from 'vue';
import Messages from './app/components/Messages.vue';
import './styles.css';

export class MfeVue extends HTMLElement {
  connectedCallback() {
    createApp(Messages).mount(this);
  }
}

customElements.define('messages-element', MfeVue);

In the main.ts file, add the following import to bootstrap the application async:

import('./bootstrap');

And finally, configure the webpack.config.js file by adding the ModuleFederationPlugin. By doing so, we instruct webpack which files to make available for remote consumption:

new ModuleFederationPlugin({
      name: 'messages_microapp',
      library: { type: 'var', name: 'messages_microapp' },
      filename: 'remoteEntry.js',
      exposes: {
        './messages-wc': 'apps/messages-microapp/src/bootstrap.ts',
      },
      shared: {
        ...dependencies,
      },
    })

Once the setup is done, run the serve command and navigate to http://localhost:4203/remoteEntry.js, where the remote module is available and ready to be used.

Let's setup the shell application, which uses Angular framework and Angular Module Federation. There is a plugin available for loading remote web components: https://www.npmjs.com/package/@angular-architects/module-federation-tools

npm i @angular-architects/module-federation-tools

For this example, we're going to directly load the messages web component like this:

<mft-wc-wrapper [options]="item"></mft-wc-wrapper>

where

item: WebComponentWrapperOptions = {
    type: 'script',
    remoteEntry: 'http://localhost:4203/remoteEntry.js',
    exposedModule: './messages-wc',
    remoteName: 'messages_microapp',
    elementName: 'messages-element',
  };

• remoteEntry: where the remote application is deployed (in our case, localhost, port 4203)
• exposedModule: configured in Micro Frontend's webpack configuration
• remoteName: configured in Micro Frontend's webpack configuration
• elementName: configured in Micro Frontend's bootstrap file
• WebComponentWrapperOptions - imported from '@angular-architects/module-federation-tools'

For it to work, add ModuleFederationToolsModule to app.module.ts.

In case of loading the web component by route, there is an example in the app-routing.module.ts, where navigating to /messages will load the remote web component.

Let's run the application and see what we got:

run:all command was updated to start the messages application as well:

"run:all": "nx run-many --targets=serve  
--maxParallel=4 
--projects=dashboard-microapp,heroes-microapp,messages-microapp,tour-of-heroes"

✨It's super easy to plugin a new Micro-Frontend into an existing workspace by using Module Federation and Webpack 5!

Check out the Github repo for the entire configuration!

Until next time, thank you for reading! 🐾