{"id":17059657,"url":"https://github.com/billyjov/angular-react-microfrontend","last_synced_at":"2025-04-12T18:14:29.908Z","repository":{"id":39557123,"uuid":"164033736","full_name":"billyjov/angular-react-microfrontend","owner":"billyjov","description":":construction: React vs Angular ? Why not both ! Micro frontend demo using Angular and React alongs with a NodeJS API ","archived":false,"fork":false,"pushed_at":"2024-08-31T03:31:33.000Z","size":3537,"stargazers_count":26,"open_issues_count":4,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T18:14:08.159Z","etag":null,"topics":["angular","angular-elements","micro-frontend","micro-frontends","microfrontend","microfrontends-demo","reactjs","typeorm","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/billyjov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-03T23:31:41.000Z","updated_at":"2025-03-19T19:26:00.000Z","dependencies_parsed_at":"2025-04-12T02:06:01.517Z","dependency_job_id":null,"html_url":"https://github.com/billyjov/angular-react-microfrontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billyjov%2Fangular-react-microfrontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billyjov%2Fangular-react-microfrontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billyjov%2Fangular-react-microfrontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billyjov%2Fangular-react-microfrontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/billyjov","download_url":"https://codeload.github.com/billyjov/angular-react-microfrontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610336,"owners_count":21132920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-elements","micro-frontend","micro-frontends","microfrontend","microfrontends-demo","reactjs","typeorm","web-components"],"created_at":"2024-10-14T10:35:03.669Z","updated_at":"2025-04-12T18:14:29.885Z","avatar_url":"https://github.com/billyjov.png","language":"TypeScript","readme":"# angular-react-microfrontend\nmicrofrontend demo using Angular and React alongs with a NodeJS API\n\n# 🎨 Stack\n\n- Persistence store: [MySQL](https://www.mysql.com/)\n- ORM: [TypeORM](http://typeorm.io/#/)\n- Backend: [Node.js](https://nodejs.org/en/) Node v20\n- Frontend: [Angular](https://angular.io/) 17 and [ReactJS](https://reactjs.org/)\n- CSS based on [Twitter's bootstrap](https://getbootstrap.com/)\n\n# 🏗️ Global architecture\n\n![Architecture](img/poc-architecture.jpg)\n\n## Angular app modules view\n\n![Angular module view](img/poc-ng-modul-view.jpg)\n\n## React app component structure\n\n![React components](img/poc-rx-modul-view.jpg)\n\n# 🔧 Installation\n\nAdjust 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`.\n\n```json\n{\n    \"type\": \"mysql\",\n    \"host\": \"localhost\",\n    \"port\": 3306,\n    \"username\": \"root\",\n    \"password\": \"\",\n    \"database\": \"microfrontends\",\n    \"synchronize\": true,\n    \"entities\": [\n        \"api/entities/*.ts\"\n    ],\n    \"subscribers\": [\n        \"api/subscribers/*.ts\"\n    ],\n    \"migrations\": [\n        \"api/migrations/*.ts\"\n    ],\n    \"cli\": {\n        \"entitiesDir\": \"api/entities\",\n        \"migrationsDir\": \"api/migrations\",\n        \"subscribersDir\": \"api/subscribers\"\n    }\n}\n```\n\n# 🏃 Running\n\n## Start the Server\n\n- Start your _MySQL_ Database\n- Run the server\n\nOpen your terminal and run following commands:\n\n```bash\n$ cd src/server\n$ npm install or yarn install\n$ npm run dev or yarn dev\n```\n\n- Run the client\n\n```bash\n$ cd src/client/todolist\n$ npm install or yarn\n$ npm run build:elements or yarn build:elements\n$ cd ..\n$ cd todo-details\n$ npm install or yarn\n$ npm run start or yarn start\n```\n\n- Browse to the application at [http://localhost:3000](http://localhost:3000)\n\n# :rotating_light: Run Tests\n\n## Run NodeJS Tests\n\n```bash\n$ cd src/server/\n$ npm run test or yarn test\n```\n\n## Run Angular Tests\n\n```bash\n$ cd src/client/todolist\n$ npm run test or yarn test\n```\n\n## Run ReactJS Tests\n\n```bash\n$ cd src/client/todo-details\n$ npm run test or yarn test\n```\n\n\n# 📄 Licence\n\nBuilt with all :heart: of the world by [Billy Lando](https://github.com/billyjov).\n\nMIT License (MIT) © [Billy Lando](https://github.com/billyjov)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillyjov%2Fangular-react-microfrontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbillyjov%2Fangular-react-microfrontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillyjov%2Fangular-react-microfrontend/lists"}