Geek Culture
Published in

Geek Culture

Spring Cloud Netflix and Microservices

Amalgamate Angular with Spring Cloud Architecture through CORS

Enable Cross Origin Resource Sharing to Scale and Manage with Client Side Load Balancer

Angular + CORS + Spring Cloud Architecture + Microservices

Scope

This article is written to help beginners and intermediate learners to understand how an Angular application(Single Page Application) running in a separate server communicates with Microservices deployed in another server. It explains how CORS (Cross-Origin Resource Sharing) can be enabled at Client end to make Angular application communicate with Spring Boot stack by taking advantage of Spring Cloud Netflix components for routing, client side load balancing, service discovery, and invoking microservices.
The above animated diagram shows the architecture and sequence of actions which this article will explain in detail with the help of code written specifically for this article. To try in your system, here is Link to GitHub to take a glance at the Microservices and its supporting artifacts.

Prerequisite

Minimum software requirements to design and run this project
a. Install Visual Studio Code — To design Angular application.
b. Install
Node.js, which also contains NPM(Node Package Manager).
c. Spring Boot with
Spring Cloud Netflix dependencies in POM.xml.
d. Eclipse flavor of your choice to import Spring Boot project given in the above GitHub link.

Context, a glance

Setting context

a. Angular application runs in Live Development Server(Web-Pack Dev Server), port 4200.
b. Forex Microservice runs in Spring Boot embedded tomcat server, port 8000.
c. Currency Conversion Microservice runs in Spring Boot embedded tomcat server, port 8100.
d. ZUUL API gateway runs in Spring Boot embedded tomcat server, port 8765.
e. Eureka Discovery Service runs in Spring Boot embedded tomcat server, port 8761.

From the above points, we understand the following:

Business requirement

1. A Forex microservice will provide a conversion multiple for a source currency and target currency.

2. A Currency Conversion microservice will get the conversion multiple from Forex service as a response to its request, and then multiply the quantity with the conversion multiple to provide the conversion value.

3. Angular client application will provide the quantity to be converted and source, target currency to which the conversion multiple to be applied.
For example: EUR to INR, or USD to INR, or AUD to INR.

Technology: CORS, Spring Cloud Netflix Stack

4. Enable CORS(Cross Origin Resource Sharing) to make Angular client application deployed in Live Development server communicate with Spring Boot Embedded Tomcat server. This is done through proxy.config.json in Angular client application. This is more scalable and manageable.

5. Enable ZUUL reverse proxy. This is a spring boot project which acts as a API Gateway to the request received from Angular client application. It will then route request to Currency Conversion service through zuul.routes.path configured in the configuration file. To find the service instance of Currency Conversion service, ZUUL will use Ribbon routing filter. Ribbon routing filter will use Ribbon, client side load balancer to discover service from Eureka or through a list of servers given in configuration file. Ribbon is integrated with Client side HTTP modules namely Feign, and load balanced Rest Template.

6. Enable Eureka server. This is a spring boot project which will have microservice instance referred through Service Name. The Service Name is configured in configuration file as spring.application.name as shown in the below screen shot.
For example:
The below screen shot shows a microservice gets registered in Eureka with the following contents in the configuration file.

Currency Conversion Service — application.properties

Similarly, for ZUUL API gateway to discover Currency Conversion Service instances in Eureka, it has to have the below configuration in its project.

ZUUL API Gateway — application.properties

To sum up, a request from Angular client application with request containing Source currency, Target currency, and quantity will get append to zuul.routes.path as shown in the above screen shot with /**
Then ZUUL API gateway will perform actions as mentioned in Point 5.

7. Angular and CORS
The below screen shot shows CORS configuration which bridge Angular client application to communicate with ZUUL API gateway running in Spring boot embedded tomcat server.

Lets Run the Application End to End

Start Eureka Server

Eureka Server listening in port 8761

Start ZUUL API Gateway

ZUUL API Gateway listening in port 8765

Start Currency Conversion Microservice

Currency Conversion microservice listening in port 8100

Start Forex Microservice

Forex microservice listening in port 8000

Start Angular Application in Live Development Server

Visual Studio Code, Integrated development environment

Angular Application in live development server listening in port 4200

Point browser to localhost:4200

Currency Conversion Application

Click Get Conversion, and enter source currency, target currency and quantity. Then click Convert as shown in the below screen shot

Source, Target, Quantity

Response from Currency Conversion and Forex Microservices

Response from Currency Conversion and Forex microservices

If you see the above response, the Forex Service has provided the conversion multiple for “EUR to INR” which is INR 75, and Currency Conversion Service has calculated the amount INR 75000 based on the quantity which is EUR 1000.
From the above screen shot output, we can see the request is served by Forex Service instance running in port 8000. Now lets test Client side load balancer by creating more instances of Forex Service and register them with Eureka and see the output.

Ribbon in action, Client side Load Balancer

A Client side load balancer provides insights on how an application itself can select instances it wants to communicate using Service name to discover from Eureka discoverer.
The below screen shot shows a new instance of Forex Service has been started in port 8001 and registered in Eureka.
As 2 instances of Forex Service are running, Ribbon Client side load balancer will pick any one instance with Service name(Forex-Service).

Forex microservice listening in port 8100

Eureka Dashboard

The below screen shot shows, 2 instances of Forex service, 1 instance of Currency Conversion Service, 1 instance of ZUUL API Gateway.

Eureka Dashboard

Lets try a new request and see how Ribbon Client side load balancer works

The below screen shot shows, the new request with “USD to INR” with quantity 2000 has provided us the response from Forex Service running in port 8001.
Sure, Ribbon Client side load balancer works!!!

Forex Service in port 8001 has served the request

Conclusion

This article with a simple business requirement was able to demonstrate the advantage of CORS and Spring Cloud Netflix stack components. Client side load balancer and CORS were the highlight in this article that provides insights on how Ribbon from the client end could discover instances from Eureka and Cross Origin bridges the communication between Live development server and Spring boot embedded tomcat server respectively.

Published on 22nd July 2021

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store