DEV Community


Posted on

[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
Enter fullscreen mode Exit fullscreen mode

Source code:

Image description

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() {

customElements.define('messages-element', MfeVue);
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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: {
Enter fullscreen mode Exit fullscreen mode

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:

npm i @angular-architects/module-federation-tools
Enter fullscreen mode Exit fullscreen mode

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

<mft-wc-wrapper [options]="item"></mft-wc-wrapper>
Enter fullscreen mode Exit fullscreen mode


item: WebComponentWrapperOptions = {
    type: 'script',
    remoteEntry: 'http://localhost:4203/remoteEntry.js',
    exposedModule: './messages-wc',
    remoteName: 'messages_microapp',
    elementName: 'messages-element',
Enter fullscreen mode Exit fullscreen mode
  • 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:

Image description

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

"run:all": "nx run-many --targets=serve  
Enter fullscreen mode Exit fullscreen mode

✨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! 🐾

Top comments (0)