Single Spa Portal Example

screenshot of Single Spa Portal Example
angular
react
vue

Example project on how to combine multiple SPA's on a single Website

Overview

The single-spa-portal-example project stands out as a robust solution for developing a portal-like application composed of multiple single-page applications (SPAs). Its architecture promotes independence among the SPAs, allowing each to maintain its own build process and deploy independently. This flexibility greatly enhances the ease of updating individual applications without requiring the entire system to be redeployed, making it an attractive choice for teams looking for modularity and efficiency in app development.

The project builds on the foundations laid by the simple-single-spa-webpack-example but introduces a suite of advanced features designed to facilitate seamless integration and communication between the SPAs. This is particularly beneficial in a micro-frontend architecture, where different teams can work on different applications without interfering with one another.

Features

  • Isolated Build Process: Each SPA maintains its own build process, ensuring that updates can be made independently without affecting the entire application.

  • On-Demand Loading: Utilizes SystemJS to load SPAs only when needed, optimizing resource use and improving performance.

  • Inter-SPA Communication: Implements an event system that allows SPAs to communicate without exposing their internal states, promoting better encapsulation.

  • Dynamic Asset Handling: Supports retrieving assets like images, fonts, and CSS from different servers, enhancing flexibility in resource management.

  • Multi-Version Angular Support: Capable of handling multiple Angular versions without conflicts, specifically avoiding zone.js issues.

  • AOT Build Support: Works with Angular AOT builds, allowing for more efficient and faster startup times.

  • Development Simplicity: Offers tasks to build and watch standalone applications for easier individual development and testing without the full portal setup.

These features combine to create a powerful and flexible framework for developers aiming to build scalable and maintainable portal applications using single-spa architecture.

angular
Angular

Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.