This is a simple application that demonstrates one approach to creating [Micro frontends] using Web Components to integrate different web apps.
There are several sub-projects in this repo:
orchestrator
- Entry point for the app; simple HTML page that uses the Vaadin Router web component to dynamically load different micro frontends.app-one
- Simple web app that uses Web Components. Built withlit-element
andlit-html
, and uses the web component.app-two
- Default app created using the Angular 8 CLI, but packaged as a web component via Angular Elements.app-three
- Another Angular 8 created via the CLI and packaged via Angular Elements, but this one uses the [PrimeNG Table] component to talk to theapp-three-service
microservice.app-three-service
- Simple microservice built using Java and the MicroProfile standard running on Payara Micro; returns canned data.
NOTE: This project does not currently use any polyfills for Web Components or other standards, so evergreen browsers are required. (If you want polyfills, you'll need to add them from https://github.com/webcomponents/polyfills)
It's theoretically possible to include other technologies using this method, such as React via Adobe's
First, make sure you have Node (for JS/TS) and Maven (for Java) installed.
- Download dependencies and build each app as described in the individual README located in the app's folder.
- Run
app-three-service
as described in the project's README. - Run a web server from the root folder, and point it to
orchestrator/index.html
. For simplicity, the project includes express, which can be used to serve the app.
To setup express, install the dependencies:
npm install
Then run the server:
cd <root folder of this repo>
node server.js
And point your browser to the URL indicated (usually http://127.0.0.1:8000
).
Technically, all of these apps could run on separate servers (using
CORS headers) or be proxied through the main web server.