Skip to content

3 Microservices with a unified frontend of 3 Microfrontends based on Self Containted Systems architecture using a Postgresql Db each. The Microservices are build with Typescript/NestJs, Kotlin/SpringBoot, Java/SpringBoot and Angular frontends. They are communicating with Mqtt messaging.

License

Notifications You must be signed in to change notification settings

Angular2Guy/AngularMicroFrontendsAndMicroServices

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AngularMicroFrontendsAndMicroServices

Author: Sven Loesekann

Technologies: Angular, Angular-Cli, Angular-Material, Typescript, Spring Boot, NestJs, TypeOrm, Liquibase, Jpa, Gradle, Java, Kotlin, Postgresql, Mqtt, ActiveMQ Artemis

CodeQL

Articles

Mission Statement

The project shows howto build a collection of Microservices with their own Angular Microfrontends. The Microfrontends are the integrated in the shell application to give the user the impression of a single frontend. That enables the independend development of the Microservices by different teams with a user friendly modular integrated frontend -> no frontend monolith.

To project has three Microserives that enable the user to book a flight, to book a hotel and pay for the bookings. The payment microservice integrates the hotel booking and flight booking Microservices.

The microservices are build according to the Self Containted Systems architecture. This architecture uses the bounded contexts of DDD to create services with distinct functionality. Each service has its own frontend, backend and database. The services should communicate only asynchronous with messaging by the backend. In the SCS architecture the focus of the Microservices is not so much on the size of each service then on the independence of the services. That enables an independent development of the Microservices and could keep the other Microservices working if one fails. The independent Microservices enable a the use of different software stacks for each one. That is used in the project to show NestJs with Typescript, Spring Boot with Java and Spring Boot with Kotlin.

C4 Architecture Diagrams

The System Context Diagram, the Container Diagram and the Component Diagram. The Diagrams have been created with Structurizr. The file runStructurizr.sh contains the commands to use Structurizr and the directory structurizr contains the dsl file.

Flight Selection

The Flight Selection Microservice enables the user to select and book a flight. The Microservice has an Angular Frontend and a NestJs Typescript backend. The Postgresql database is used to data storage and ApacheMQ Artemis with Mqtt to send the bookings.

For development was the Visual Studio Code ide used.

Hotel Selection

The Hotel Selection Microservice enables the user to select and book a hotel. The Microservice has an Angular Frontend and Spring Boot Kotlin backend. The Postgresql database is used to data storage and ApacheMQ Artemis with Mqtt to send the bookings.

For development was the Visual Studio Code ide for the frontend and Intellij CE for the backend used.

Payment

The Payment Microservice integrates the Hotel Selection and Flight Selection frontends and adds the payment functionality. For the frontend integration iframes are used to have full independence of used Angular versions. Native Federation would be an alternative but then there are dependencies in versioning and the Microfrontends are not fully precompiled. The Microservice has an Angular Frontend and a Spring Boot Java backend. The Postgresql database is used to data storage and ApacheMQ Artemis with Mqtt to receive the flight and hotel bookings.

For development was the Eclipse ide used.

Microservice architecture

All Microservices use the Clean Architecture with the Rings Adapter, Usecase, Domain to structure the code. The Dtos for the Rest controllers and the Mqtt clients are decoupled by Mappers to be able to change interfaces and database tables independently. The dependency management is done by injection.

Run the System

  • Build the system with:

./gradlew clean build -PwithAngular=true -PwithNestJs=true

  • Create the databases with:

docker run --name hotel-selection-postgres -e POSTGRES_PASSWORD=sven1 -e POSTGRES_USER=sven1 -e POSTGRES_DB=hotel_selection -p 5432:5432 -d postgres

docker run --name flight-selection-postgres -e POSTGRES_PASSWORD=sven1 -e POSTGRES_USER=sven1 -e POSTGRES_DB=flight_selection -p 5433:5432 -d postgres

docker run --name payment-postgres -e POSTGRES_PASSWORD=sven1 -e POSTGRES_USER=sven1 -e POSTGRES_DB=payment -p 5434:5432 -d postgres

  • Run the database script initDB.sql with the tool of you choice on the 'flight_selection' database.

  • Create the ActiveMQ Artemis server with:

docker run --name local-artemis-microservices -p 61616:61616 -p 1883:1883 -p 8161:8161 -e ARTEMIS_USER=artemis1 -e ARTEMIS_PASSWORD=artemis1 apache/activemq-artemis:latest-alpine

  • Run the 'buildDocker.sh' scripts in the flightSelection-backend, hotelSelection-backend and the payment-backend.

  • Access the system with a browser with 'http://localhost:8080/'.

About

3 Microservices with a unified frontend of 3 Microfrontends based on Self Containted Systems architecture using a Postgresql Db each. The Microservices are build with Typescript/NestJs, Kotlin/SpringBoot, Java/SpringBoot and Angular frontends. They are communicating with Mqtt messaging.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published