This project it's created on the live with Dev Full Cycle about micro frontend architecture. The live was shown on September 15, 2021. To demonstrate the architecture, 5 projects were created. First, I created the root project. This project is responsible for calling routes to other micro frontends and injecting dependencies. I created 3 other projects and transform on another project in micro frontend. The projects are: 2 in react (navbar and app1) , 1 (project transformed on mfe) in vue (home) and created 1 to footer using Angular 12. In the live show I demonstrated how the micro frontend architecture works and how we can use many independent projects and frameworks in the same Dom.
To get a local copy up and running follow these simple steps.
This is a prerequisites for this application:
-
Install node
sudo apt install nodejs
-
Install npm
sudo apt install npm
-
Update you packages
sudo apt-get update
-
Upgrade
sudo apt-get upgrade
Execute this on all folders (all micro frontends)
-
Install packages (all projects/folders)
npm install
-
Build
npm run build
-
Start
yarn start or yarn serve or yarn run serve:single-spa:footer -
The micro frontend is here
http://localhost:9000
This project is created on this live. For what the video, click on the image.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Author: Carlos Sempé
Email: [email protected]
