This blog entry is trying to perform the "grand écart" between two technologies:

• the Spring Boot back-end using REST, Spring Data and JPA (Java Persistence API)
• the Angular front-end with React and Prime-ng libraries

All this as a single maven multi-module project that you can clone and run, such that to investigate deeper the mentioned technologies.

The following figure shows the structure of the project.

.
├── customer-management-api
│   └── src
│       ├── main
│       │   ├── java
│       │   │   └── fr
│       │   │       └── simplex_software
│       │   │           └── aws
│       │   │               └── docker
│       │   │                   └── spring_boot
│       │   │                       └── microservices
│       │   │                           ├── config
│       │   │                           ├── controllers
│       │   │                           ├── data
│       │   │                           ├── exceptions
│       │   │                           └── repository
│       │   └── resources
│       └── test
│           └── java
│               └── fr
│                   └── simplex_software
│                       └── aws
│                           └── docker
│                               └── spring_boot
│                                   └── microservices
└── customer-management-ui
    └── ng-customers
        ├── e2e
        │   └── src
        └── src
            ├── app
            │   ├── domain
            │   └── services
            ├── assets
            │   └── showcase
            │       ├── css
            │       ├── data
            │       ├── favicon
            │       └── images
            │           ├── demo
            │           │   ├── car
            │           │   ├── flag
            │           │   ├── galleria
            │           │   ├── organization
            │           │   ├── sopranos
            │           │   └── themes
            │           │       └── themesIndex
            │           ├── home
            │           ├── icons
            │           └── layouts
            └── environments

50 directories

As you can see, there are two maven modules in this project:

• a back-end project named customer-management-api
• a front-end project named customer-manager-ui

Let's look in deep at each one.

The Back End Project

This is a Spring Boot micro-service project. It exposes an API for the customers management. This API is a simple CRUD. It uses Spring Data to persist customers information into an Oracle database.

The datamodel is very simple as well and consists in only one entity: the customer. Please have a look at the Customer class in the data package to see what everything is about. The only notable thing is the use of the Oracle sequence numbers as primary keys. This is an Oracle specific feature.

This datamodel is used by the Sping Data layer. For the reader who isn't yet familiar with Spring Data, it is a very high level abstraction layer on top of different persistence frameworks, including JPA. It avoids to write a lot of boiler plate code, as it's usually the case with JPA components. For example, this is all what we need in order to persist customer entities:

public interface CustomerManagementRepository extends CrudRepository<Customer, BigInteger>
{
  public List<Customer> findByLastName (String lastName);
  public List<Customer> findByCountry (String country);
  public List<Customer> findByCity (String city);
  public List<Customer> findByZip (String zip);
  public List<Customer> findByState (String state);
  public List<Customer> findByStreet (String street);
  public List<Customer> findByFirstName(String firstName);
}

The CrudRepository interface has a default implementation having all the usual operation like create, read, update and delete. Additionally, it automatically generates all the required query operations, based on a naming convention which includes the "find" keyword associated to different properties of the entities. For example, the findByLastName() operation will be generated at the build time as having the code required to query the database on the customer last name.

The API layer is exposed by the Spring Boot controller. It uses GET requests to select customers from the database, either bulked or filtered by properties like the first name, the last name, etc. It also usese POST requests to create new customers, PUT requests to update existent customers and DELETE requests to remove customers. Nothing special here besides the @CrossOrigin annotation which aims at allowing cross doazin requests. The config class CustomerManagementConfig serves also the same purposes.

The Front End Project

The Front End project exposes an UI based on Angular 7, which as per this writing, the last version of this library. It gives the user the required UI to manage customers, i.e. to create, modify, remove them, etc. Besides the Angular core libraries, this UI uses Prime-ng. As the JSF fans know, Prime is one of the most known and used JSF implementations and, if you are like me a JSF fan, you won't be surprized by my choice to use Prime-ng, i.e. the JavaScript library of Prime.

As an SPA (Single Page Application) this UI is as simple as it can be. There is only one Angular component and one Angular service anf this service's responsibility is simply to call the Spring Boot service. The HTML template uses Prime-ng controls like p-table and p-dialog to display the customers grid and to allow the in-place editing for creations, modifications or removal. Have a look at the app.component.html file as well as at its associated typescript file, to see how everything is organized.

Running the application.

The code is located at https://github.com/nicolasduminil/cuddly-potato.git. Please don't hesitate to clone it and to build it. Notice that the name of "cuddly-potato" doesn't have anything to do with the project's goal. It is just the name automatically proposed by GitHub at the project creation time, name that I accepted as I didn't have any better idea.

Once the project cloned, you need to build it with maven. This also will execute some integration tests for which, of course, you need to have an Oracle databse installed, according to the application.properties file configuration, as shown below:

spring.jpa.hibernate.ddl-auto=create-drop
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe
spring.datasource.username=...
spring.datasource.password=...
spring.datasource.driver-class=oracle.jdbc.driver.OracleDriver

Thanks to this configuration, your Oracle databse together with all the required elements like tables and sequences, will be automatically created at the build time. The line in the file import.sql will also be automatically inserted into the Customer table.

The integration tests should run without errors, and you should see the following:

[INFO]
[INFO] Results:
[INFO]
[INFO] Tests run: 6, Failures: 0, Errors: 0, Skipped: 0
[INFO]

Now you need to start your micro-service by running:

cd customer-management-api
mvn spring-boot:run

Your Spring Boot micro-service starts now in its embedded Tomcat container. You need to start now your Angular front-end. Proceed as follows:

cd ../customer-management-ui
ng serve

Now you may go to http://localhost:4200 in order to experience your UI. Have fun by adding a couple of customers, modify and remove them, etc. There is also a search box allowing you to quickly finf customers.

Have a look at the POM file to see how to use the maven-exec-plugin in order to run npm to install all the required libraries and to build the UI. Here we'll using also the Google maven replacer plugin in order to slightly ammend some CSS files belonging to the Prime-ng distribution, such that to align to our configuration.

Enjoy !