Skip to content

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

License

Notifications You must be signed in to change notification settings

billyjov/angular-react-microfrontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

angular-react-microfrontend

microfrontend demo using Angular and React alongs with a NodeJS API

🎨 Stack

🏗️ Global architecture

Architecture

Angular app modules view

Angular module view

React app component structure

React components

🔧 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

🚨 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