https://github.com/fernanda-kipper/module-fedaration
E-commerce prototype using React, Webpack 5 and Module Federation with multiple separate builds to form a single application
https://github.com/fernanda-kipper/module-fedaration
json-server module-federation reactjs webpack5
Last synced: 7 months ago
JSON representation
E-commerce prototype using React, Webpack 5 and Module Federation with multiple separate builds to form a single application
- Host: GitHub
- URL: https://github.com/fernanda-kipper/module-fedaration
- Owner: Fernanda-Kipper
- Created: 2021-12-14T18:30:55.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-28T21:31:00.000Z (about 3 years ago)
- Last Synced: 2025-10-19T10:58:45.648Z (10 months ago)
- Topics: json-server, module-federation, reactjs, webpack5
- Language: JavaScript
- Homepage:
- Size: 760 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Technolgies •
Clone •
Contribute •
License
This application is a e-commerce prototype, this e-commerce is divided in 3 federated modules Container (shell of the application), ProductList (component responsible for fetching and listing all products) and Cart (responsible for list all products that user saved on his cart or remove it)
Technologies
This application architecture is organized in bidirectional modules:
- Container (Shell of the app), exports 'App' where all modules are combined to form the application - running in port 3000
- ProductList (List of all products), export 'ProductList' and consumes 'App' from Container - running in port 3001
- Cart (Shopping Cart), export 'Cart' and consumes 'App' from Container - running in port 3002
### More
The same application will be seen on all ports, but, each one loads the modules that is consuming on RUNTIME, meaning that the bundle of each app will be different containing only the code that belongs to he and will not include the remotes modules its consumes.
The modules share their dependencies as well to avoid duplicate dependencies load
Clone
Prerequisites
- Node >= 10.16 e npm >= 5.6
- Package manager - NPM or YARN
Starting
```
git clone https://github.com/Fernanda-Kipper/module-federarion.git
npm install
```
Start server that list products
```
cd ProductList
npm run server
```
Start Clients
```
cd Container
npm run dev
```
```
cd ProductList
npm run dev
```
```
cd Cart
npm run dev
```
Contribute 🚀
If you want to contribute, clone this repo, create your work branch and get your hands dirty!
```bash
git clone https://github.com/Fernanda-Kipper/video-chat.git
git checkout -b feature/NAME
```
At the end, open a Pull Request explaining the problem solved or feature made, if exists, append screenshot of visual modifications and wait for the review!
[How to create a Pull Request](https://www.atlassian.com/br/git/tutorials/making-a-pull-request)
[Commit pattern](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
License 📃
This project is under [MIT](LICENSE) license