Spring Boot and Angular web application

Spring Boot and Angular form a powerful stack to build modern production grade web applications quickly and test it effectively. In this article we are going to look at building a sample contacts web application which demonstrate the basic CRUD operations of creating, listing, editing and deleting of the contacts. Mango DB will be used as a storage for this application.

This is the part 1 of the article covering building basic Angular Spring Boot App. You can checkout the complete source code of this article in Github.

Part 2 of the article (Securing Angular + Spring Boot Application with Okta : Part 2) covers securing the app with OKTA. If you are looking at deploying the application in to Kubernetes, you can refer one of the below links

Kubernetes: Deploying Angular + Spring Boot Application in Google Kubernetes Engine (GKE)

Kubernetes : Deploying Angular + Spring Boot Application in Microsoft Azure Cloud

The application we are building has the following components and their interactions as shown below.

Contacts App Component Architecture

Backend

For this Contacts application, we are developing a single micro service which supports contacts CRUD operation exposed as APIs via ContactsController.

This project is created using spring initializer with the following dependencies

1. spring-boot-starter-data-mongodb — To support mango db operations

2. spring-boot-starter-security — To support configuring basic security (CORS and CSRF) plays a significant role later when we look at securing our application.

3. spring-boot-starter-web — Spring boot web application support

4. projectlombok — To generate boiler plate code via annotations

5. spring-boot-starter-test — support unit testing

6. spring-boot-starter-security-test — support unit testing of security features

Contacts controller exposes the operations via rest end points and delegates the logic of application to Contact service class and this is a simple application having no extra logic in the service but in most cases service class is where we will be writing extensive business logics.

ContactsServiceRepository interface performs CRUD db operations via exposed springdata mango library repository interfaces. By extending CRUD repository, springdatamango provides the runtime implementation of the CRUD operations.

Below are the configuration details of our backend application

SpringMangoConfig

This is the configuration class to support set up mango connections.

In local development we are hardcoding connection details in application.properties but when we deploy to cloud we will have few configurations passed in via environment variables which is covered in the Kubernetes deployment articles. To support non docker local development we need to install mango db separately and have it running. When we deploy this application to Kubernetes cluster we will dockerize both front end and backend of Contacts App which runs inside separate containers. Mango DB will also be run inside separate containers in Kubernetes.

You can refer official mangodb documentation for the local installation. https://docs.mongodb.com/manual/administration/install-community/

Here we have created our application user in mangoDB to perform all the mango operations. To create a user in mangoDB you can refer this stack overflow link

SpringSecurtyConfig

In local development typically we are developing angular application separately running at 4200(default port) and springboot (8080) and we need to support CORS (Cross Origin Resource Sharing) for contacts front end to access data. You can read details about the CORS in this article.

https://www.codecademy.com/articles/what-is-cors

And this is only our development requirement, In Kubernetes, we have everything deployed in single Kubernetes cluster and the application will be exposed to outside world via load balancer end point which is shown in the part 3 of the article. So we do not need to disable CORS for our production application.

We use spring profiling to support this requirement.

You can refer spring profiles article for details.

In contacts app, SecurityDevConfiguration class is the minimum configuration to support CORS and disable CSRF (Cross Site Request Forgery) in development mode. In production mode we use SecurityConfigration class as we we want CSRF protection to be enabled and Spring Boot Security by default enables CSRF protection. Both Angular and Spring Boot supports CSRF out of the box with minimum configuration.

You can refer details about Spring Boot CSRF support below

https://www.baeldung.com/spring-security-csrf

For angular support of CSRF you can refer

Angular

ContactsBackendApplication

This is the entry point to Spring Boot application and runs embedded tomcat.

Here we are registering a CORS bean to allow only the domains which we would like to allow access to our resources, in this case its angular client running at localhost:4200

Front end

We are building our contacts front end using angular 8 and google material design components.

Since this is simple demo application having single App Module and single route configuration.

When the application loads we load list of available contacts if any and display them in the grid.

And our contact application has following components with below purpose

1. Contact-list-component: Displays the contacts and allow user interaction with contact item
2. Edit-contact-component : Allows user to modify the existing contact
3. Add-contact-component : Allows user to add new contact and this component is displayed in the modal
4. Contact-service: This is the service class to support making http backend requests and share data between the components

These components form the base contacts demo application.

Raghavendra Bhatt
Technical Architect, Capgemini USA
LinkedIn