Alessandroinfo / single-spa-example

A basic example on how to do Micro-frontends with Single-SPA.

Single-spa Example Project with Angular 🚀

Welcome to the Single-spa Example project! This repository serves as a demonstration of how to build a micro front-end architecture using Single-spa. 🏗️

Getting Started

To get started with the Single-spa Example project, follow the steps below:

1. Run Run everything.sh

Documentation

This contain

• Single-SPA routing
• Webpack extension
• Parcel customProps communication

For detailed documentation on how to use Single-spa and its features, refer to the official Single-spa documentation: Single-spa Documentation

Example

The example included in this project demonstrates the usage of Single-spa to create a multi-application architecture with a nav bar and multiple micro front-ends.

In the example, we have three micro front-end applications:

1. Navbar: This micro front-end represents a navigation component that provides navigation links to different sections of the application.
2. Section: This micro front-end represents a section of the application that can be dynamically loaded and displayed based on user interaction.
3. Form: It's a nested micro front-end using a Parcel.

To run the example, follow the "Getting Started" section above, and navigate to the respective URLs for Navbar and Section. You will see the header component from Navbar and the dynamically loaded section from Section.

---

If you encounter any issues or have any questions, please don't hesitate to reach out. Happy coding! 😄

TODO

• Production and Bundled
• System
• Amd
• Test Parcel Inside
• Error Isolation
• Error System Management
• Lazy
• Authentication
• Routing Management