React-mfe ✨️

A micro frontend implementation for react js

Why?

To scale with multiple teams in a micro services environment

• More cohesive codebase
• Simplify maintenance
• Allows to scale development teams
• Simplify updates
• Independent deploy

Read more about Micro frontends

📖 App architecture

• packages
  • core-ui
  • frontend-components
    • feature-01
    • feature-02
    • feature-03
    • feature-04
    • feature-05
    • ...
  • shared-components

💻 Built With

• Lerna 🐉
• React
• Redux
• TypeScript
• Rollup
• Styled Component
• SCSS
• Storybook
• Router
• Some services and utils

🛠️ Installation Steps

Clone the repository ⎘

git clone https://github.com/asifvora/react-mfe.git

Change the working directory 📂

cd react-mfe

Install dependency 🚚

yarn

Linking dependencies... 🔗

yarn bootstrap

Start core-ui app 🚀

yarn start:core-ui

Start feature-01 app 🚀

yarn start:feature-01

Build all packages 🔨

yarn build

You are all set! Open localhost:3000 to see the app.

🐳 Docker

Build

docker build -t <docker-image-name> <filepath>
docker build -t react-mfe .
docker image ls

Run a Container

docker run -d -p <Host port>:<Docker port> <docker-image-name>
docker run -d -p 9090:5000 react-mfe
<image-id>

Check the running container

 docker ps -a

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

👤 Asif Vora

• Github: @asifvora
• LinkedIn: @asif-vora
• Twitter: @007_dark_shadow
• Instagram: @007_dark_shadow

🍰 Contributing

• Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

• Please read CONTRIBUTING for details.

🙏 Support

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️