https://github.com/nabeel-shakeel/react-vue-microfrontend
Micro-frontend application using React, Vue and Nx
https://github.com/nabeel-shakeel/react-vue-microfrontend
Last synced: 26 days ago
JSON representation
Micro-frontend application using React, Vue and Nx
- Host: GitHub
- URL: https://github.com/nabeel-shakeel/react-vue-microfrontend
- Owner: nabeel-shakeel
- Created: 2021-12-18T14:11:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-02T15:23:26.000Z (over 3 years ago)
- Last Synced: 2025-03-31T04:26:20.185Z (2 months ago)
- Language: TypeScript
- Size: 600 KB
- Stars: 24
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-vue-microfrontend
Working implementation of Mirco-frontend Web App using React, Vue and Nx as build framwork using Webpack5 Module Federation
## Microfrontend Architecture
To implement microfrontend architecture we used:
- Webpack 5 [Module Federation](https://www.digitalonus.com/micro-frontends-module-federation-with-webpack-5/)
- Microfrontend apps resides in Nx monorepo
- Container and Auth app built using `React`
- Dashboard app built using `Vue.js`
## Build and Run
Install dependencies
```bash
npm install
```
To run whole app with container and other microfrontends:
```bash
npm run start:all
```
To run one microfrontend separately, for exmample `auth`:
```bash
npx nx run auth:serve
```
List of microfrotend apps, as of now:
| Microfrontend | App Name | Url |
| ------------- | ---------| ----|
| Container | container | http://localhost:8081/|
| Auth | auth | http://localhost:8082/auth/signin|
| Dashboard | dashboard | http://localhost:8083/dashboard|
## Future Task
- Production setup for Mirco-frontend app
- Dockerized application
- CI/CD pipeline
## ScreenShot
### Auth App Built using React
### Dashboard App Built using Vue
