https://github.com/iammar7/microfrontends-init
A mircro-frontends application using Single SPA
https://github.com/iammar7/microfrontends-init
angular javascript json-server react single-spa tailwindcss vue
Last synced: 3 months ago
JSON representation
A mircro-frontends application using Single SPA
- Host: GitHub
- URL: https://github.com/iammar7/microfrontends-init
- Owner: iAmmar7
- Created: 2022-06-06T19:11:43.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-04T11:35:20.000Z (almost 4 years ago)
- Last Synced: 2025-06-24T21:05:38.724Z (about 1 year ago)
- Topics: angular, javascript, json-server, react, single-spa, tailwindcss, vue
- Language: JavaScript
- Homepage:
- Size: 2.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Microfrontends Init
A Single-SPA based micro-frontends application developed with React, Angular, and Vue.
## Featues
- **3 microfrontends** running inside the root-config. :fire:
- **2 shared utility modules** are used by all microfrontends. :anchor:
- Navbar is built with **VueJS**. :fire:
- Auth module is built with **React**. :heart:
- Attendance module is built with **Angular**. :heart_on_fire:
- Home page is being rendered from the root-config. :chains:
- Style guide shared module is built with **Tailwind**. :small_blue_diamond:
- API shared module is using Axios. :calling:
- JSON server to perform authentication. :boom:
## Technologies
- Single SPA 
- React 
- Angular 
- Vue 
- Tailwind 
- Node JS 
- JSON Server 
## How to run
Navigate to the root-config, styleguide, api, auth, attendance, navbar-vue, server folder and run the command
```js
npm install
```
## Run the application
- Navigate to the root-config, styleguide, api, auth, navbar-vue, server folder and run the below command
```js
npm start
```
- To run the Angular app, navigate to the attendance folder and run
```js
npm run serve:single-spa:attendance
```
In the browser open the application at
- Carefully check the PORT of your applications and update it accordingly in the [import map](https://github.com/iAmmar7/microfrontends-task-app/blob/main/root-config/src/index.ejs#L55) defined in root-config.
- There are two navbar microfrontends, one is built with React and the other one is built with VueJS.
- Server is created using the json-server.