Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

microfrontends single-spa single-spa-vue typescript vuejs

Last synced: about 1 month ago
JSON representation

Microfrontends project built with Single-SPA, this repo contains the source code for the Vue (Products) app

Awesome Lists containing this project

README 

        



# Microfrontends - Vue



[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/joacod/microfrontends-vue/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/)

[![Vue](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)](https://vuejs.org/)

[![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 **Vue (Products) 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:standalone

```



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! 😃