Understanding Micro Frontend Architecture with Angular, Vue.js, and Single SPA: An Example

Franco Gutierrez

16 Oct 2023 • 2 min read

Micro frontend architecture has gained prominence in modern web development for its ability to break down a monolithic frontend into smaller, manageable units. In this example, we'll not only use Angular and Vue.js but also introduce Single SPA, a framework that enables integration and orchestration of micro frontends into a cohesive application.

Setup

Ensure you have Angular CLI, Vue CLI, and Single SPA CLI installed globally:

npm install -g @angular/cli
npm install -g @vue/cli
npm install -g create-single-spa

Creating Micro Frontends

1. Product Listing Micro Frontend (Angular)

ng new product-listing
cd product-listing
ng generate component product-list

2. Cart Micro Frontend (Angular)

ng new cart
cd cart
ng generate component cart

3. User Profile Micro Frontend (Vue.js)

vue create user-profile
cd user-profile

Integrating Micro Frontends with Single SPA

1. Configure Single SPA Root Config

// root-config.js

import { registerApplication, start } from 'single-spa';

registerApplication(
  'product-list',
  () => import('./path/to/product-listing/main.js'),
  () => location.pathname.startsWith('/products')
);

registerApplication(
  'cart',
  () => import('./path/to/cart/main.js'),
  () => location.pathname.startsWith('/cart')
);

registerApplication(
  'user-profile',
  () => import('./path/to/user-profile/dist/build.js'),
  () => location.pathname.startsWith('/user-profile')
);

start();

2. Serve Single SPA Application

create-single-spa

Follow the prompts to create a Single SPA application and configure it according to your project structure.

3. Recommended Setup Overview

Spa framework recommends a setup that uses in-browser ES modules + import maps (or SystemJS to polyfill these if you need better browser support). This setup has several advantages:

Common libraries are easy to manage, and are only downloaded once. If you're using SystemJS, you can also preload them for a speed boost as well.
Sharing code/functions / variables is as easy as import/export, just like in a monolithic setup
Lazy loading applications is easy, which enables you to speed up initial load times
Each application (AKA microservice, AKA ES module) can be independently developed and deployed. Teams are enabled to work at their own speed, experiment (within reason as defined by the organization), QA, and deploy on their own schedules. This usually also means that release cycles can be decreased to days instead of weeks or months
A great developer experience (DX): go to your dev environment and add an import map that points the application's url to your localhost. See sections below for details

Conclusion

In this example, we've extended the micro frontend architecture to include Single SPA, a powerful framework for orchestrating and integrating micro frontends. We utilized Angular and Vue.js as micro frontends and orchestrated their integration using Single SPA. This approach allows for a seamless user experience, combining the strengths of different frameworks while maintaining the benefits of micro frontend architecture—scalability, maintainability, and independent development cycles. Understanding and leveraging frameworks like Single SPA is crucial for building robust, modular, and efficient web applications in the micro frontend paradigm.