AngularAndSpringWithMaps
Author: Sven Loesekann
Technologies: Angular, Spring Boot, Java, Gradle, GraphQl, GraphiQl, Typescript, Angular Cli, Angular Material, H2/Postgresql Databases, Jpa, Bing Maps, GraalVM native image
Updated to Spring Boot 4
Articles
Features
- Integration of Angular and Bing Maps
- Load/Save property borders from GraphQl interface
- Show different border at different points in time
- Select different sites
- read/edit/delete site data with GraphQl
- Load/Save the site data in the H2/Postgresql Databases
- Create a native image with GraalVM Community Edition
Mission Statement
The project serves as an example howto integrate Angular and Bing Maps with Spring Boot and relational databases. The frontend shows different property borders at different points in time for different company sites. The backend stores multiple company sites at different points in time with multiple property borders in clean architecture. Graphql is used to read and write the data in this project. The backend manages/initialzies the H2/Postgresql databases with Liquibase. The data access is done with Jpa and Spring Repositories. The architecture is checked with ArchUnit in a test. A GraalVM native image can be created.
Currently Liquibase needs '-Dliquibase.duplicateFileMode=WARN' as VM Parameter at startup.
C4 Architecture Diagrams
The project has a System Context Diagram, a Container Diagram and a 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.
Rest Branch
The previous version of the project has used Rest endpoints. That version is available in the Rest Branch.
GraphQl
The data is read and stored with GraphQl. The frontend uses the Angular http client to access the GraphQl endpoint. The backend uses Spring GraphQl to provide the endpoint with the schema. GraphiQl provides a Ui to test the endpoint.
Postgresql
In the postgresql.sh file are the commands to pull and run Postgresql in a Docker image locally. To build a Jar with Postgresql setup build it with 'gradlew build -PwithAngular=true'. The Spring Boot jar can then be started with the VM parameter '-Dspring.profiles.active=prod' and the 'BINGMAPKEY' has to availiable in an environment variable. The database will be initialized by Liquibase.
Bing Maps Key
A Bing Maps Key is availiable for development use here: https://www.bingmapsportal.com
Testdata
The testdata for the company site is Airbus Finkenwerder/Toulouse for the year 2020. The testdata for the year 2010 is dummy data.
Kubernetes setup
In the helm directory is a kubernetes setup to run the angularandspringwithmaps project with minikube. The Helm chart deployes the postgres database and the angularandspringwithmaps with the needed parameters to run. It uses the resource limit support of Jdk 16 to limit memory. Kubernetes limits the cpu use and uses the startupprobes and livenessprobes that Spring Actuator provides.
GraalVM native image
In the file buildNative.sh are the steps to create a native image of the project with GraalVM. The image uses the prod profile and needs a Postgresql Database. A example howto provide the database can be found in the file docker-postgres.sh. Then the native image can be run(start time around 0.5 sec).
Monitoring
The Spring Actuator interface with Prometheus interface can be used as it is described in this article:
Monitoring Spring Boot with Prometheus and Grafana
To test the setup the application has to be started and the Docker Images for Prometheus and Grafana have to be started and configured. The scripts 'runGraphana.sh' and 'runPrometheus.sh' can be used as a starting point.
Example
An example Graphql query/params with all fields:
{query getCompanySiteByTitle($title: String!, $year: Long!) {
getCompanySiteByTitle(title: $title, year: $year) { id, title, atDate, polygons
{ id, fillColor, borderColor, title, longitude, latitude, rings
{ id, primaryRing, locations
{ id, longitude, latitude }
}
}
}
}
}
{ 'title': 'Finkenwerder', 'year': 2020 }
Spring Graphql executes it with 4 sql queries. One query for the CompanySites, Polygons, Rings and Locations.
Setup
Java 21 or newer.
Postgresql 14.x or newer.
Eclipse IDE for Enterprise Java and Web Developers newest version.
Install Eclipse Plugin 'Eclipse Wild Web Developer' of the Eclipse Marketplace.
Gradle 8.4 or newer.
Nodejs 18.19.x or newer
Npm 10.2.x or newer
Angular Cli 18 or newer.
GraalVM 22.3 or newer