https://github.com/billyjov/angular-react-microfrontend
:construction: React vs Angular ? Why not both ! Micro frontend demo using Angular and React alongs with a NodeJS API
https://github.com/billyjov/angular-react-microfrontend
angular angular-elements micro-frontend micro-frontends microfrontend microfrontends-demo reactjs typeorm web-components
Last synced: 10 months ago
JSON representation
:construction: React vs Angular ? Why not both ! Micro frontend demo using Angular and React alongs with a NodeJS API
- Host: GitHub
- URL: https://github.com/billyjov/angular-react-microfrontend
- Owner: billyjov
- License: mit
- Created: 2019-01-03T23:31:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-31T03:31:33.000Z (over 1 year ago)
- Last Synced: 2025-04-12T18:14:08.159Z (10 months ago)
- Topics: angular, angular-elements, micro-frontend, micro-frontends, microfrontend, microfrontends-demo, reactjs, typeorm, web-components
- Language: TypeScript
- Homepage:
- Size: 3.37 MB
- Stars: 26
- Watchers: 2
- Forks: 15
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Citation: CITATION.cff
Awesome Lists containing this project
README
# angular-react-microfrontend
microfrontend demo using Angular and React alongs with a NodeJS API
# 🎨 Stack
- Persistence store: [MySQL](https://www.mysql.com/)
- ORM: [TypeORM](http://typeorm.io/#/)
- Backend: [Node.js](https://nodejs.org/en/) Node v20
- Frontend: [Angular](https://angular.io/) 17 and [ReactJS](https://reactjs.org/)
- CSS based on [Twitter's bootstrap](https://getbootstrap.com/)
# 🏗️ Global architecture
## Angular app modules view
## React app component structure
# 🔧 Installation
Adjust persistence settings with your local configuration. Just Change host and port and the database name inside the `ormconfig.json` located at `src/server/ormconfig.json`.
```json
{
"type": "mysql",
"host": "localhost",
"port": 3306,
"username": "root",
"password": "",
"database": "microfrontends",
"synchronize": true,
"entities": [
"api/entities/*.ts"
],
"subscribers": [
"api/subscribers/*.ts"
],
"migrations": [
"api/migrations/*.ts"
],
"cli": {
"entitiesDir": "api/entities",
"migrationsDir": "api/migrations",
"subscribersDir": "api/subscribers"
}
}
```
# 🏃 Running
## Start the Server
- Start your _MySQL_ Database
- Run the server
Open your terminal and run following commands:
```bash
$ cd src/server
$ npm install or yarn install
$ npm run dev or yarn dev
```
- Run the client
```bash
$ cd src/client/todolist
$ npm install or yarn
$ npm run build:elements or yarn build:elements
$ cd ..
$ cd todo-details
$ npm install or yarn
$ npm run start or yarn start
```
- Browse to the application at [http://localhost:3000](http://localhost:3000)
# :rotating_light: Run Tests
## Run NodeJS Tests
```bash
$ cd src/server/
$ npm run test or yarn test
```
## Run Angular Tests
```bash
$ cd src/client/todolist
$ npm run test or yarn test
```
## Run ReactJS Tests
```bash
$ cd src/client/todo-details
$ npm run test or yarn test
```
# 📄 Licence
Built with all :heart: of the world by [Billy Lando](https://github.com/billyjov).
MIT License (MIT) © [Billy Lando](https://github.com/billyjov)