WHAT THE CRUD IS THIS!
Tags: angular, aws, docker, javascript
Published: 2021-04-30 05:27:48

# UH?!?!
Soooooooo. You might be asking yourself. What the CRUD is this? Well, if you know, you know. This is my failed attempt to humor you guys hahaha.

But really, this post is about a Create, Read, Update, and Delete application (CRUD). To be more specific, the application contains a frontend web client (Angular) and a backend rest api (SpringBoot) that retrieves information from a relational database. Oh, I also forgot to mention that this application makes use of docker containers. All of which is pointed to a domain name with the help or AWS Route 53 Hosted Zones.


## PICTURE IT
This is how you can picture the architecture:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a24t5c2n3gz28c3vpigs.png)

If you've noticed, the architecture includes aws elastic container service. ECS is a fully managed container orchestration service. This is where my docker containers are deployed. You can choose to run your containers in clusters using AWS Fargate. AWS Fargate is serverless compute for containers. I took advantage of this feature to reduce cost since this application does not take much computing power.


## START IT UP VROOM VROOM

I started off by creating a directory with two folders. One for the frontend angular web framework. The other for the backend SpringBoot framework. This is a quick look into the angular framework code: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc759iujjrfgzjfz53w6.png)

These are conditions that call out functions to help Get, Create, Update, Delete certain information from the database through the use of the Rest API.


## TOOT IT AND BOOT IT

I then created Spring MVC controllers with @Controller and map requests with request mapping annotations e.g. @RequestMapping, @GetMapping, @PostMapping, @PutMapping, @DeleteMapping.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n164l3u6q5c0tu64q817.png)

Spring MVC provides an annotation based approach where you don’t need to extend any base class to express request mappings, request input parameters, exception handling, and more. @Controller is similar annotation which mark a class as request handler.

In the above code, the EmployeeController class acts as request controller. The methods will handle all incoming requests to a specific URI. These requests are the same requests in the angular web framework. 


## DATA DATA DATA
I decided to use RDS as the database. Specifically MySQL. This is so I'd practice decoupling. Decoupling an application basically refers to the process of splitting the application in smaller and independent components. One of the big advantages of decoupling is that it reduces inter-dependencies so failures do not impact other components.

After Starting the frontend and backend end, I was able to create, record, update, and delete records to RDS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25jisoj9aei2n272n1sg.png)


## WHATS UP DOCK
After I was able to run the test locally, I had to build these components into containers. These were constructed with Dockerfiles. Before we discuss what a Dockerfile is, it is important to know what a Docker image is. A Docker Image is a read-only file with a bunch of instructions. When these instructions are executed, it creates a Docker container. A Dockerfile is a simple text file that consists of instructions to build Docker images.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auhcohyvqd9d3ad0tjy7.png)

Once I finished this, It was about time to deploy this into ECS. Also, I forgot to mention that we incorporated an nginx reverse proxy. I did this so I could run my API server on a different network or IP then my frontend application is on. By doing this, I can then secure this network and only allow traffic from the reverse proxy server.


## YOU CAN'T CONTAIN ME!

I wont go into too much detail on how I set up the containers and the Route 53 hosted zone. This is a basic run down as to what is happening:
     - Two clusters were created
     - Each cluster has it's own task definition (container)
     - The frontend contains a service. This service was created to attach an application load balancer.
     - This load balancer is listening to port 80 with the help of a target group, which is the same port as the frontend application.
     - This same load balancer is targeted by the Route 53 hosted zone.
     - The hosted zone is associated to a domain name where you can search for the application on any web browser.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvvcss7t572bn7t07ak0.png)

## FINISH EM!

After setting up the architecture, the application looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0lp45pmfun7onrpq5nf.gif)


If I learned anything about this project, It's that the cloud is where it's at!.