Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chriskitson/micro-frontends-with-web-components
https://github.com/chriskitson/micro-frontends-with-web-components
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chriskitson/micro-frontends-with-web-components
- Owner: chriskitson
- Created: 2019-05-08T12:13:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T01:42:29.000Z (almost 2 years ago)
- Last Synced: 2024-07-31T07:18:59.838Z (5 months ago)
- Language: TypeScript
- Size: 1.79 MB
- Stars: 184
- Watchers: 12
- Forks: 85
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - micro-frontends-with-web-components - (TypeScript)
README
# Micro-frontends with Web Components
Using web components as a wrapper for both Angular and React components, I am going to show them working alongside each other in a single application. I will also pass data to both components from the parent container, and back again.
Follow the instructions below to build and serve micro-frontend components for Angular and React, and a wrapper application to compose them together and handle communication between them.
For a full walk-through visit [Create Micro-frontends using Web Components with support for Angular and React](https://medium.com/@kitson.mac/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a?source=friends_link&sk=642e86f203d58724d63d9d98aeb11476).
## Build and serve Angular component
```sh
cd micro-fe-ng
npm i
npm start
```
[http://localhost:5001/main.js](http://localhost:5001/main.js)
```html
```
## Build and serve React component
```sh
cd micro-fe-react
npm i
npm start
```
[http://localhost:5002](http://localhost:5002)
```html
```
## Build and serve wrapper
```sh
cd micro-fe-wrapper
npm i
npm start
```
[http://localhost:5000](http://localhost:5000)