Identity Dashboard (FE) - Micro-frontend aka Module Federation

[asg5704]

Description

Research and implement Module Federation with Next.js (identity-dashboard-fe) and Vue (fwa-dashboard)

Tasks

• Research the micro-frontend architecture with Module Federation
  • Time box research/PoC to 1 week
• Implement Module Federation for Next.js + Vue

[acald-creator]

Created private repo at https://github.com/department-of-veterans-affairs/identity-microfrontend for testing implementation unrelated to the current Next.js and Vue app.

Will list findings of potential issues and how this can be implemented.

[acald-creator]

Created separate repo to track different implementations on how to setup module federation with different frameworks: https://github.com/department-of-veterans-affairs/vsp-idp-microfrontend-test

[acald-creator]

Implementation Module Federation with Next.js 13 app router and Vue.js 3

Pros:

• allow us to share code between multiple applications with duplications
• enables us to develop micro frontend architecture, where each team can own and deploy their own module
• independent development and deployment among the teams
• version control management, allows managing different versionings and can deploy packages

Cons:

• setting up microfrontend architecture can be complex
• build performance can be slower, and depends on the number of applications are created, build time can slow because there is a process of resolving and bundling dependencies
• compatability - not all frameworks work with Module Federation, refactoring will be needed
• debugging and troubleshooting will be necessary and can be more challenging

Resources:

• https://github.com/module-federation/universe
• https://github.com/module-federation/module-federation-examples
• https://github.com/originjs/vite-plugin-federation

However, pertaining to the current project, implementing Micro-frontend with Vue.js and Next.js will not work as expected.

Next.js 13 currently has an app directory layout which might not have full support with using @module-federation/nextjs-mf, and if there is, this implementation is tightly coupled and supported within Next.js apps, not any other apps outside of Next.js.

There is support to use React with Next.js in a module federation format, but extra configuration are needed to make sure that the implementation works properly.

Also, Next.js 13 also supports React Server Components, which means you have to declare which is Client Component and which is Server Components.

Next.js 13 also has a pages directory layout where @module-federation/nextjs-mf is working properly, but there are potential issues with importing and displaying the component. There are suggestions to use async boundary, which means waiting to check the module is available before loading the module.

In the case of using Next.js 13 with Vue.js, there doesn't seem to be an easier way to implement this.

Tool that could serve as a wrapper to use React in Vue, and Vue in React

• https://github.com/akxcv/vuera
• https://github.com/nmpribeiro/vuera-ts
• https://github.com/devilwjp/veaury
• Open issue regarding running vuera within Next.js - Issue running with Nextjs akxcv/vuera#125

Cons for the above is adding overhead and maintaining another package if we were to create our own library.

Potential alternative project layout (future reference)

• https://github.com/vercel/examples/tree/main/solutions/microfrontends
  • This is a monorepo layout that utilize build time, using Turbo, and also creating apps and packages, and allows local/published imports within the same repo.
• https://github.com/munafio/react-vue-turborepo-starter
  • Turborepo (monorepo) layout with React and Vue.js but also have packages that include a UI component library for React, and UI component library for Vue.js to use.

[asg5704]

@acald-creator Can you provide your recommendation on moving forward. Would it be easier to migrate the FWA dashboard to React, or would it be worth it to use one the packages you mentioned. Thanks

[acald-creator]

@asg5704

My recommendation is to migrate the FWA app to React.

If we do try and use one of the libraries that is a wrapper for a React component and vice versa, the question would be whether the package itself is maintained or not. There is one that is not maintained at this link: https://github.com/akxcv/vuera.

The other two are for their company use cases, and may not necessarily suit us.

The other issue would be permission on whether we can use it, so this means forking our own to maintain it.

In conclusion, I would suggest migrating the FWA dashboard to React. I can assist with this if there are issues with migrating.

[asg5704]

Sounds good. Put this ticket in PM review and I'll create a new one for the eventual migration in the backlog.

[aparsley]

Looks great, keep up the good work.

[asg5704]

Added to sprint report 11