Microservices Design with Feign Client (Spring Boot + Angular)

In this tutorial, I would take you through how to develop a microservices architecture using the the Feign Client.

The architecture that we would build in this tutorial is shown below.

Parts of the Architecture

Product Server: This is a complete microservice build as an API. It implements CRUD operations. It uses MongoDB for storage of product entities. The following files make up the Product Server

ProductRestController.java – this is a REST controller that exposes the CRUD operations
Product.java – this is the Entity class that would be saved in the database. Note that with MongoDB, we don’t use the @Entity annotation.
ProductRepository.java – this class extends MongoRepository and is responsible for doing all the plumbing in executing the MongoDB data operations
ProductServerApplication.java – The springboot base application class. This class is created automatically when you create the product web application

Product Web: This is another complete microservice. However, this microservice does not implement crud operation. So it doesn’t have a repository and does not interact with the database. It simply acts as a facade for the outside world. So when request come to this service from the clients, it delegates these request to the Product Server. For the Product Web would make calls to the Product Server via a client – the Feign Client provided by Spring Cloud.

Product Service: This is an interface that list all the methods selected for exposing. So not all methods in the repository are exposed to the client. In the demo, we have placed this class in the Product Web.

ProductService Proxy: This is an interface that extends the ProductService. It gets all its method that is needed for both the Product Web and the Product Server. So it’s a client-side proxy for the server-side functions.

Spring Cloud Feign Client: This is internally provided by Spring an it is what is used by the ProductService proxy. This proxy is provided on the fly by simply annotating the ProductServiceProxy interface with the @EnbleFeignClient annotation and providing the url to the server hosting the methods exposed by the ProductService (in this case the Product Server)

Angular Client: This is just a UI application that implemented in Angular. It uses TypeScript code to make http call to Product Web. Then the data returned is displayed on a html page.

Request Response Cycle

The process of displaying some data in a web page proceeds as follows:

User opens the browser and enters the url for the list for the Angular UI application(http://localhost:4200/products).
The page loads up and a TypeScript script is executed that makes an asynchronous HTTP call to ProductWeb (http://localhost:8081/productweb
The method getAllProduct() in the ProductWeb RestController is executed which calls the method exposed in the ProductServiceProxy (this method are available here because the ProductServiceProxy implements the ProductService)
The ProductServiceProxy then uses FeignClient to make a request to the ProductServer RestController method
The RestController in the ProductServer executes this request by calling the method in the ProductRepository interface which returns the list of items back.
The data travels back through the same route to the Angular UI and gets displayed in the web page

This end to end cycle is illustrated in the Figure below:

Request Response Cycle for Microservice with Feign Client