In this repository, we will explore the microfrontend technology and how to implement it in a multiple frontend frameworks like React, Vue, and Svelte.
Our task to create 3 different microfrontends from Mart website, with the different frontend frameworks.
- Node.js 18.x
- NPM
- Docker (optional)
- Docker Compose (optional)
- Clone the repository
git clone https://github.com/CBSE-summer2024/team9- Go to the repository directory
cd team9- Run each microfrontend
cd product-grid && npm install && npm run bundle
cd product-slider && npm install && npm run bundle
cd trusted-business && npm install && npm run bundle- Run the container
cd container-project && npm install && npm run dev- if you lazier you can use the bellow one-liner command to run the whole microfrontend, you can run the following command
cd team9 && npm install && ./build-and-run.shwhich internally runs the following commands
# Install all dependencies
npm install --prefix ./product-grid
npm install --prefix ./product-slider
npm install --prefix ./trusted-business
npm install --prefix ./container-project
# Run the project
npm run start:all- Open your browser and go to http://localhost:8080
unfortunately, we didn't deploy the project yet, but you can run it locally by following the above steps, demonstrate how will run the project on the server.
Client: React, Vue,Svelte, TailwindCSS
Server: We don't have a server, we are using a mock API from fakestoreapi