Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

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

microfrontends react single-spa single-spa-react typescript

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README 

        



# Microfrontends - React



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

[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://react.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 **React (Navigation) 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 start: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! 😃