billyjov / angular-react-microfrontend

:construction: React vs Angular ? Why not both ! Micro frontend demo using Angular and React alongs with a NodeJS API

angular-react-microfrontend

microfrontend demo using Angular and React alongs with a NodeJS API

🎨 Stack

• Persistence store: MySQL
• ORM: TypeORM
• Backend: Node.js Node v20
• Frontend: Angular 17 and ReactJS
• CSS based on Twitter's bootstrap

🏗️ 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.

{
    "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:

$ cd src/server
$ npm install or yarn install
$ npm run dev or yarn dev

• Run the client

$ 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

🚨 Run Tests

Run NodeJS Tests

$ cd src/server/
$ npm run test or yarn test

Run Angular Tests

$ cd src/client/todolist
$ npm run test or yarn test

Run ReactJS Tests

$ cd src/client/todo-details
$ npm run test or yarn test

📄 Licence

Built with all ❤️ of the world by Billy Lando.

MIT License (MIT) © Billy Lando