A proof of concept for a Distributed SPA, enabling separate teams to develop and manage UI components independently.
- It is pure implementation - no any bundler.
- ImportMaps / HTML / JS / CSS / Vue3 / Vuetify3 / Pinia.
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.
-
POC Distributed SPA : Phase-1 Pure implementation without any bundler.
-
POC Distributed SPA : Phase 2 It is full-fledged development version.
-
POC Distributed SPA : Phase-3 Using of multiple repositiories.