[PHASE 1] Distributed pure Single Page Application (SPA): Proof of Concept

Introduction

A proof of concept for a Distributed SPA, enabling separate teams to develop and manage UI components independently.

It proves that it works and demonstrate how all these parts are initialized and interacted together from different in-browser modules!

For simplicity all modules are exposed from one repo!

Install serve globally if not already installed: npx i serve -g

It is recomned to install vscode extension es6-string-html

It starts http server in SPA mode. npx serve -s

Independent Development and Deployment: Teams work separately, speeding up development.
Transparent Version Management: Update module URLs in import maps without code changes.
Environment-Agnostic Testing: Test components locally with others from any environment.
Scalable and Maintainable Architecture: Self-contained components make the codebase easier to manage.
Dedicated Resources for Components: Each component can have its own team, repository, CI/CD pipeline, and hosting.
Dynamic Library and Framework Management: Share common libraries and frameworks, updating versions on the fly.

Import Map: Defines module paths in index.html.
Micro-Frontend Structure: Header, Dashboard, Applications, Router, Routes and CounterStore are in-broswe modules shared using ImportsMap;
Router Configuration: Dynamic routes based on content specifited in routes module.
Vue Application: Sets up Vuetify, Pinia, and the router in main.js.
Pinia Store: Persistent state management. Shared across header and application. Can be changed in one place and visible in other.