micro-frontend example
This repository serves to demonstrate an example of micro-frontend implementation. It consists of the following apps in the respective directories:
- restaurant (container app)
- pizza-app (micro-frontend app)
The example is of a restaurant menu, where the pizza and sandwich are two sections. The pizza section is served as a micro-frontend while the sandwich section is not.
Getting Started
For the impatient: docker-compose
You can use docker-compose to start the setup quickly. Run the following command:
$ docker-compose up
Starting the container app: restaurant
Navigate to the restaurant directory and run the following:
$ npm install
$ npm start
The app will be available at http://localhost:8080.
Starting the micro-frontend: pizza-app
You can similarly navigate to the pizza-app directory and run the following commands to start the micro-frontend. It will serve up the micro-frontend JavaScript bundle at http://localhost:8081/app.bundle.js.
$ npm install
$ npm start
Rendering outside the micro-frontend frame
In this example, you can see how the pizza-app micro-frontend needs to control breadcrumbs that lie outside the micro-frontend frame:
It does this by using React Portal APIs. When rendering the micro-frontend, the container app relinquishes control of the breadcrumbs to the micro-frontend. It passes the div ID of the breadcrumbs section to the micro-frontend, and the micro-frontend in turn uses React Portal APIs to render it's own breadcrumbs within that section.