https://github.com/joacod/microfrontends-angular

Microfrontends project built with Single-SPA, this repo contains the source code for the Angular (Checkout) app.
https://github.com/joacod/microfrontends-angular

angular microfrontends single-spa single-spa-angular typescript

Last synced: 10 months ago
JSON representation

Microfrontends project built with Single-SPA, this repo contains the source code for the Angular (Checkout) app.

• Host: GitHub
• URL: https://github.com/joacod/microfrontends-angular
• Owner: joacod
• License: mit
• Created: 2024-10-03T23:05:03.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-20T23:26:38.000Z (about 1 year ago)
• Last Synced: 2025-02-01T07:25:02.883Z (11 months ago)
• Topics: angular, microfrontends, single-spa, single-spa-angular, typescript
• Language: TypeScript
• Homepage:
• Size: 148 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# Microfrontends - Angular

[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/joacod/microfrontends-angular/blob/main/LICENSE)

[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/)

[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

[![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge&logo=angular&logoColor=white)](https://angular.dev/)

[![RxJS](https://img.shields.io/badge/rxjs-%23B7178C.svg?style=for-the-badge&logo=reactivex&logoColor=white)](https://rxjs.dev/)



## 👋 Introduction

This is a Microfrontends project built with Single-SPA, this repo contains the source code for the **Angular (Checkout) app**.

## 🔶 Microfrontends Repositories

To ensure everything works correctly, **all** the following repositories must be used.

> `Root Config` -> [microfrontends-root-config](https://github.com/joacod/microfrontends-root-config)

> `Utility Modules` -> [microfrontends-utility](https://github.com/joacod/microfrontends-utility)

> `React (Navigation)` -> [microfrontends-react](https://github.com/joacod/microfrontends-react)

> `Vue (Products)` -> [microfrontends-vue](https://github.com/joacod/microfrontends-vue)

> `Angular (Checkout)` -> [microfrontends-angular](https://github.com/joacod/microfrontends-angular)

_Clone and run all of them._

## 💻 Development

**Install dependencies:**

```bash

npm install

```

**Run the development server:**

```bash

npm run serve:single-spa

```

Run the **Root Config** app and open [http://localhost:9000](http://localhost:9000) with your browser to see the web.

## ✍️ DEV.to Articles

To complement this Project, I wrote a **5-part article series on DEV.to**, where I provide detailed explanations and a step-by-step guide. Feel free to explore the articles at your own pace to deepen your understanding of the topic.

**Microfrontends a Developer's Guide:**

- [The Challenges of Monolithic Frontends](https://dev.to/joacod/microfrontends-a-developers-guide-the-challenges-of-monolithic-frontends-49a7)

- [Advantages and Disadvantages](https://dev.to/joacod/microfrontends-a-developers-guide-advantages-and-disadvantages-2ane)

- [Tools, Technologies, and Step-by-Step Setup](https://dev.to/joacod/microfrontends-a-developers-guide-tools-technologies-and-step-by-step-setup-49e1)

- [Exploring Projects and Managing Communication](https://dev.to/joacod/microfrontends-a-developers-guide-exploring-projects-and-managing-communication-19o0)

- [Best Practices and Lessons Learned](https://dev.to/joacod/microfrontends-a-developers-guide-best-practices-and-lessons-learned-1nlp)

The **goal** is to equip you with both these GitHub repositories and the articles as references, giving you a solid foundation to understand the architecture and confidently build **your own Microfrontends project**.

Now go and build something cool!

## ☕️ Did you like the project?

You can colaborate with me giving a star ⭐️ to the project or

[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/joacod)

Thanks! 😃