Skip to content
Demo of a micro front end using web components
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
micro-app-ng Added initial code into GitHub Jun 13, 2019
micro-app-react Added initial code into GitHub Jun 13, 2019
micro-app-shell Added initial code into GitHub Jun 13, 2019
.gitignore Added initial code into GitHub Jun 13, 2019
README.md Added initial code into GitHub Jun 13, 2019

README.md

Micro apps & Web Components

Using web components as a wrapper small, independent components is a practice which ticks many boxes, I am going to demo this example using Angular and React alongside each other in a single application. The components can receive data in and send it out without problems using normal attributes.

Follow the instructions below to build and serve micro frontend components, and the app shell which composes them together and handles communication between them.

Hope you enjoy your time in Oslo and please come and say hi if you saw me 😊.

Build and serve Angular component

cd micro-app-ng
npm i
npm start

To use this component, include the main script and then use the element.

<body>

<ng-el name="Yaser"></ng-el>

<script src="http://localhost:5001/main.js"></script>

</body>

Build and serve React component

cd micro-app-react
npm i
npm start

To use this component, include the main script and then use the element.

```html
<body>

<react-el name="Yaser"></react-el>

<script src="http://localhost:5002/main.js"></script>

</body>

Build and serve the app shell

cd micro-app-shell
npm i
npm start

Now open a browser and head to http://localhost:5000.

You can’t perform that action at this time.