DEV Community: Adeolu Oyinlola

Keep Calm! Kubernetes Cluster!! with helm file

Adeolu Oyinlola — Sun, 25 Dec 2022 16:13:41 +0000

Hi there.
Thanks for the interest in this post, where we are going to be calmly deploying kubernetes cluster together with helmfile. Chance are that you are either a Cloud engineer, DevOps engineer, software developer or average techie who want to add to his/her body of knowledge. So I have decided to make it both beginner's friendly and a sort of refresher for the expert.

While I know that this sort of effort has been done already by others, but I think that it's okay for people to have options. Like other of my posts (or are in the process of writing) they will remain a work in progress. Open to feedback, comment, expansion and improvement. Please feel free to provide your thoughts on ways that I can improve things. Your input would be much appreciated.

Project Objectives
Pre-requisites
Demonstration
- Part 1 - Provision cluster with eskctl
- Part 2 - Deploy Microservices with helmfile
- Github repo.

Project Objectives

By the end of each part of this project, we will know how to;

provision scalable managed kubernetes(eks) cluster resources in AWS with the help of eksctl.
deploy highly performant microservices applications with helmfile.

Pre-requisites

So that we all be on the same page, it will be nice to have following in our tool belt;

Knowledge requirement

Basic knowledge of how AWS, kubernetes, helm and yaml works.

Tools

Tools	Official Links
AWS CLI	https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
eksctl	https://eksctl.io/
helm	https://helm.sh/

Back to Contents

Demonstration

Part 1 - Provision cluster with eskctl

Step 1: Install and configure kubectl, AWS CLI and eksctl. You can quickly look up the documentation for each to set up before proceeding with this demo. Link to How. Also, careful to set and utilise profile name when working with multiple accounts in your machine.
Step 2: Create programmatic access for the new user from AWS console management. We need to create new IAM User credential for this project, with policies to manage eks cluster. Avoid the use of root account for security reason and best practice consideration.
Step 3: Creating cluster with (1.) a name (2.) version 1.22 (3.) nodegroup name, type and number in a specify region. Run the command;

eksctl create cluster --name ecommerce --version 1.22 --nodegroup-name clusternode --node-type t3.micro --nodes 2 --managed

Step 4: After some minutes, check the Cloudformation and eks from AWS management console. With this single command, we have successfully create an eks cluster with 2 nodegroup.

Configure kubectl to communicate with cluster

Step 1; Configure your computer to communicate with your cluster. Run this command;

aws eks update-kubeconfig --region us-east-1 --name ecommerce

Step 2; Confirm your context and test your configuration. Run these commands first to list your contexts and check your configuration

kubectl config get-contexts

kubectl get svc

Back to Contents

Part 2 - Deploy Microservices with helmfile

Let’s quickly remind ourselves that;

The microservices source code repository for this project is from this link; google-microservices-demo, containing 11 services we will deploy with this demo. Also, from the same repo, it was illustrated and visualized how these services are connected to each other including a 3rd party service for database - redis. Among the services, Frontend serves as an entrypoint for all the services receiving external requests from the browser. Meanwhile, the load generator deployment is optional, so in this demo we wouldn't bother deploying it.
Image names for each Microservices, expected environment variables including which port each starts and decision on namespace depending on developer's access must be a collaborative effort between Dev and Ops team.
Also, deployment options among few others includes imperative, declarative approach and templating engine with helm. In this demo, we are going to be exploring declarative approach with helmfile, but if you so desire to use kubernetes declarative approach you can check these following steps.

Deploy Microservices Declaratively - Alternative

This is not best practice for more complex and dynamic projects. So be sure of the project requirements before trying out this option.

Step 1; Create a project folder and config yaml file from scratch containing;

touch config.yaml

1) deployment configuration for each microservices and
2) service configuration for each microservices.
Where we appropriately adjust each service image name, pod label, image url, container port, target port, service port, environment variable and external IP(NodePort) for frontend service. You can clone the exact config code from my repo for this projects(link at the end of this project). If you want to explore this approach, be sure to have kubeconfig connect to the cluster.

Step 2; Deploy the microservices with the;

kubectl apply -f config.yaml

Deploy Microservices Declaratively with helmfile

Yeah, the main deployment approach for this demonstration. I admit that the initial configuration for helmfile can be challenging for a beginner but is actually a great alternative for complex microservices especially in a more dynamic environment. So let's get our hand dirty.

Create helm charts

Before starting to carry out the steps accordingly, first install helm. Second, create a project folder that will contain another folder named charts. Inside the charts folder, we are going to create a shared helm chart for the 10 similar applications and another helm chart for redis service. In the case of redis, to persist the data, we are going to use the volume type of emptyDir and mount it into the container volume.
Project folder > charts folder > common & redis

Step 1: cd into charts folder and create shared helm chart for the 10 microservices by running this command;

helm create common

Which will auto generate a folder named after what we call our chart, containing; charts folder, template folder, Chart.yaml, values.yaml, .helmignore file.

Step 2: Inside the template folder, you can clean up the default files and create another deployment.yaml and service.yaml, where we will define all our yaml blueprint for all the deployment and services respectively. For all the attributes we want to make configurable, we will use placeholders to enable dynamic input for the actual values, where the variable name will be defined inside the values.yaml.
deployment.yaml code;

apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ .Values.appName }}
spec:
  replicas: {{ .Values.appReplicas }}
  selector:
    matchLabels:
      app: {{ .Values.appName }}
  template:
    metadata:
      labels:
        app: {{ .Values.appName }}
    spec:
      containers:
      - name: {{ .Values.appName }}
        image: "{{ .Values.appImage }}:{{ .Values.appVersion }}"
        ports:
        - containerPort: {{ .Values.containerPort }}
        env:
        {{- range .Values.containerEnvVars}}
        - name: {{ .name }}
          value: {{ .value | quote }}
        {{- end}}

service.yaml code;

apiVersion: v1
kind: Service
metadata:
  name: {{ .Values.appName }}
spec:
  type: {{ .Values.serviceType }}
  selector:
    app: {{ .Values.appName }}
  ports:
  - protocol: TCP
    port: {{ .Values.servicePort }}
    targetPort: {{ .Values.containerPort }}

Step 3: Set the -range built-in function for working with lists of environment variables; mostly use in the env attribute and also observe quote built-in function for working with string value.
Step 4: Also in the values.yaml file where we define the variable name in flat structure, set the default values for the template files. Meanwhile, in each template file, the .Values built-in object defined inside the template placeholder is passed into the template from the values.yaml file in the chart and not neither from user-defined nor parameter passed.
Step 5; Create helm chart for redis. We are going to replicate same processes as above for redis, we intentionally didn't include it to the common chart because this third party service; (1.) is stateful and (2.) does not share same lifecycle with our Microservices. cd into the charts folder, then run;

helm create redis

Step 6; For better structure, we will create another folder named values at the root of project directory, that will contain config files for all the microservice which will override the default value in the values.yaml

With all these steps, we should have successfully parametize everything inside the config files. Do well to clone my repo for the exact config or expand on it as desire.
Next, we are going to deploy the microservices into the cluster.

Deploy microservices to the cluster

Step 1; To preview if the config files for each service defined are correct before actual deployment, run this command for each service file;

helm template -f <path/to/the/file> <path/to/the/chart>

this validate our manifest locally
or

helm install --dry-run -f <path/to/the/file> <release-name>  <path/to/the/chart>

this send files to Kubernetes cluster to validate
or

helm lint -f <path/to/the/file> <path/to/the/chart>

Step 2; Individually check if microservices successfully deploy to the cluster. Here we are going to install a chart, overrides values from a file, give a release name and chart name with this command;

helm install -f <path/to/the/file> <releases-name> <path/to/the/chart>

Step 3; To list the deploy microservices with this command;

helm ls

kubectl get pod

At this point, we have about three option to deploy all microservices to the cluster; (1.) deploy each file with helm install command, (2.) write and execute a script, the script basically contains lines of helm install for each services. (3.) deploy with helmfile. We are going to use the later;

Step 4; Install helmfile tool, with this command for macOS user;

brew install helmfile

We can now use the helmfile command from the next step henceforth.

Step 5; Create and configure a helmfile at the root of project folder - helmfile.yaml. Containing the following code, which is basically release name, chart and value for each services;

releases:
  - name: rediscart
    chart: charts/redis
    values: 
      - values/redis-values.yaml
      - appReplicas: "1"
      - volumeName: "redis-cart-data"

  - name: emailservice
    chart: charts/common
    values:
      - values/email-service-values.yaml

  - name: cartservice
    chart: charts/common
    values:
      - values/cart-service-values.yaml    

  - name: currencyservice
    chart: charts/common
    values:
      - values/currency-service-values.yaml   

  - name: paymentservice
    chart: charts/common
    values:
      - values/payment-service-values.yaml

  - name: recommendationservice
    chart: charts/common
    values:
      - values/recommendation-service-values.yaml

  - name: productcatalogservice
    chart: charts/common
    values:
      - values/productcatalog-service-values.yaml

  - name: shippingservice
    chart: charts/common
    values:
      - values/shipping-service-values.yaml

  - name: adservice
    chart: charts/common
    values:
      - values/ad-service-values.yaml

  - name: checkoutservice
    chart: charts/common
    values:
      - values/checkout-service-values.yaml

  - name: frontendservice
    chart: charts/common
    values:
      - values/frontend-values.yaml

Step 6; Declare the manifests into the cluster;

helmfile sync

If all went well, all the microservices should deploy after this command.
We can as well check on browser through our IP address, if we are sure to configure the frontend service to NodePort. Which is our entry point to the microservices.

Step 7; Clean up the resources, so you don't get charge pls!

helm destroy

Voila! we have come to the end.

I'd like to hear from you.
LinkedIn

Wait! a minutes, there's a good chance that if you ask me a technical question I may not know the answer immediately or might take few minutes to consult docs and stackoverflow. So please be gentle with your comments and request.
Back to Contents

How I implement DevOps culture in a webapp - Part 1

Adeolu Oyinlola — Wed, 25 May 2022 10:36:22 +0000

In this post, am going to show you a real-world solution for setting up an environment that is using DevOps technologies and practices for deploying apps and cloud services/cloud infrastructure to AWS.
I will break this series into two part, where this is going to be the first part, you will do well to search for the second part. However, I will drop the link to second part at the end of this post.

Full Disclosure - As a DevOps interns with permission, I did have to use ruralx.africa landing page source code and the initial DevOps practices and technologies.

Why DevOps?
Imagine you're currently working in an organization that is very monolithic. There is a ton of bare metal, virtualization, manual deployments of applications, and old school practices based on the current teams knowledge of IT.

You're brought in to the company and team to make things more modern so the organization can not only succeed, but stay ahead of their competition. Management now understands the needs and complexity that comes with staying ahead of their competition and they know that they need to. Otherwise, the organization will fall.

Solution?
The solution in this post is a real-world example of how to sprinkle a little DevOps on an existing source code - DevOps is a set of practices that combines software development and IT operations. It aims to shorten the systems development life cycle and provide continuous delivery with high software quality.

Prerequisites
I will be using the following technologies and platforms to set up a DevOps environment.

AWS
AWS will be used to host the application, cloud infrastructure, and any other services we may need to ensure the ruralx app is deployed properly.
AWS CLI
The AWS CLI is a way for you to interact with all AWS services at a programmatic level using the terminal.
GitHub
To store the application and infrastructure/automation code
Nodejs
Nodejs will be used for the webapp (it is written in JavaScript).
Docker
Create a Docker image
Store the Docker image in AWS ECR
Terraform
Create an S3 bucket to store Terraform State files
Create an AWS ECR repository with Terraform
Create an EKS cluster
Kubernetes
To run the Docker image that's created for the containerized ruralx app. Kubernetes, in this case, EKS, will be used to orchestrate the container.
CI/CD
Use GitHub Actions to create an EKS cluster
Automated testing
Testing Terraform code with Checkov
Prometheus
An open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting approach.

In this first part, I will show you how I apply DevOps practices in Continuous Development; using AWS, Docker and Terraform. Where in the last part, I will show you how I apply Continuous Integration and Continuous Deployment; using GitHub Action, Kubernetes and Prometheus.
Let's get to it.

1.0 AWS
Install AWS CLI
The steps to install AWS is pretty simple and straight, follow each step from AWS documentation. Note that installation of basic tools like AWS, Text Editor, Docker and others are outside the scope of this post. Else, it will make this post unnecessarily long, so I will assume you have all the prerequisites knowledge mentioned above.
For AWS CLI documentation, Here is the link

Configure Credentials To Access AWS At The Programmatic Level
The purpose is to configure IAM credentials on my local computer so that you can access AWS at a programmatic level (SDKs, CLI, Terraform, etc.).

Open up the AWS management console and go to IAM Sign in to the organization account, from your username tab at top right corner dropdown click Security Credential;
Create a new user or use existing AWS user It is highly recommended to create a new user for this access. Particularly for organization project where each team have a distinct access to particular asset of the organization and controlled by root user.

Click User from IAM menu bar at the top left;

Give the user programmatic access
From Security Credential dashboard, choose Access Key dropdown, then click on Create New Access Key;
Copy the access key and secret key
It is important to note that once you exit out of the dialog box, you can not access that key again, so you need to copy the key or download and save the key. Though, you can always create a new one if lost;

Configure The AWS CLI

Open Terminal Window
Try to test if aws is properly installed by running this command
aws --version
If the display is different from example below, know that you need to re-install to avoid further complication;
Run configure command
To configure run aws configure
Fill the Access Key ID and Secret Access Key.
If not sure of Default region name, just leave it as it is by pressing Enter button.
For output format, I advice to use JSON, press Enter button.
Yeah, that simple, we are done with configuring AWS.

However, if you need additional info on AWS CLI install and configure, I recommend this Link

2.0 VPC - Virtual Private Cloud
To create my cluster VPC with public and private subnets

Open the AWS CloudFormation console, type CloudFormation inside the service box.
Choose Create stack.
Select template is ready and, Amazon S3 URL. Then Paste the following URL into the text area and choose Next: https://s3.us-west-2.amazonaws.com/amazon-eks/cloudformation/2020-10-29/amazon-eks-vpc-private-subnets.yaml

On the Specify Stack Details page, fill out the following and Choose Next:
Stack name: I choose a stack name for my AWS CloudFormation stack. For example, I call it ruralx-vpc.
VpcBlock: Choose a CIDR range for my VPC. Each worker node, pod, and load balancer that I deploy is assigned an IP address from this block. The default value provides enough IP addresses for most implementations, but if it doesn't, then I can change it. For more information, see VPC and subnet sizing in the Amazon VPC User Guide. I can also add additional CIDR blocks to the VPC once it's created.
PublicSubnet01Block: Specify a CIDR block for public subnet 1. The default value provides enough IP addresses for most implementations, but if it doesn't, then I can change it.
PublicSubnet02Block: Specify a CIDR block for public subnet 2. The default value provides enough IP addresses for most implementations, but if it doesn't, then I can change it.
PrivateSubnet01Block: Specify a CIDR block for private subnet 1. The default value provides enough IP addresses for most implementations, but if it doesn't, then I can change it.
PrivateSubnet02Block: Specify a CIDR block for private subnet 2. The default value provides enough IP addresses for most implementations, but if it doesn't, then I can change it.
(Optional) On the Options page, tag your stack resources. Choose Next.
On the Review page, choose Create.
When my stack is created, select it in the console and choose Outputs.
Record the Security Groups value for the security group that was created. When I add nodes to my cluster, I must specify the ID of the security group. The security group is applied to the elastic network interfaces that are created by Amazon EKS in my subnets that allows the control plane to communicate with my nodes. These network interfaces have Amazon EKS in their description.
Record the VpcId for the VPC that was created. I need this when I launch my node group template.
Record the SubnetIds for the subnets that were created and whether I created them as public or private subnets. When I add nodes to my cluster, I must specify the IDs of the subnets that I want to launch the nodes into.

3.0 Terraform
The purpose of the Terraform section is to create all of the AWS cloud services I'll need from an environment/infrastructure perspective to run the ruralx application.

Create S3 Bucket To Store TFSTATE Files
Here, I will create an S3 bucket that will be used to store Terraform state files.
I created main.tf file inside a directory, write these code;

provider "aws" {
  region = "us-east-1"
}

resource "aws_s3_bucket" "terraform_state" {
  bucket = "terraform-state-rurlax"
  versioning {
    enabled = true
  }

  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }
}

The Terraform main.tf will do these:

Create the S3 bucket in the us-east-1 region
Ensure that version enabling is set to True
Utilize AES256 encryption

Create the bucket by running the following:

terraform init - To initialize the working directory and pull down the provider
terraform plan - To go through a "check" and confirm the configurations are valid
terraform apply - To create the resource

Create an Elastic Container Registry
The idea is to create a repository to store the Docker image that I created for the ruralx app.
Then, I add to the main.tf this;

terraform {
  backend "s3" {
    bucket = "terraform-state-ruralx"
    key    = "ecr-terraform.tfstate"
    region = "us-east-1"
  }
  required_providers {
    aws = {
      source = "hashicorp/aws"
    }
  }
}

provider "aws" {
  region = "us-east-1"
}

resource "aws_ecr_repository" "ruralx-ecr-repo" {
  name                 = var.ruralx-ecr
  image_tag_mutability = "MUTABLE"

  image_scanning_configuration {
    scan_on_push = true
  }
}

Also, create variables.tf file inside the directory, basically to store the env of the repo. I then write this code;

variable ruralx-ecr {
  type        = string
  default     = "ruralx"
  description = "ECR repo to store a Docker image"
}

Note, that the Terraform main.tf will do this:

Use a Terraform backend to store the .tfstate in an S3 bucket.
Use the aws_ecr_repository Terraform resource to create a new respository.

Create the bucket by running the following:

Create An EKS Cluster and IAM Role/Policy
I am going to create EKS cluster here, writing the following code;

terraform {
  backend "s3" {
    bucket = "terraform-state-ruralx"
    key    = "ecr-terraform.tfstate"
    region = "us-east-1"
  }
  required_providers {
    aws = {
      source = "hashicorp/aws"
    }
  }
}

provider "aws" {
  region = "us-east-1"
}

resource "aws_s3_bucket" "terraform_state" {
  bucket = "terraform-state-ruralx"
  versioning {
    enabled = true
  }

  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }
}

resource "aws_ecr_repository" "ruralx-africa-ecr-repo" {
  name                 = var.ruralx-africa-ecr
  image_tag_mutability = "MUTABLE"

  image_scanning_configuration {
    scan_on_push = true
  }
}

terraform {
  backend "s3" {
    bucket = "terraform-state-ruralx"
    key    = "eks-terraform-workernodes.tfstate"
    region = "us-east-1"
  }
  required_providers {
    aws = {
      source = "hashicorp/aws"
    }
  }
}


# IAM Role for EKS to have access to the appropriate resources
resource "aws_iam_role" "eks-iam-role" {
  name = "ruralx-eks-iam-role"

  path = "/"

  assume_role_policy = <<EOF
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "eks.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}
EOF

}

## Attach the IAM policy to the IAM role
resource "aws_iam_role_policy_attachment" "AmazonEKSClusterPolicy" {
  policy_arn = "arn:aws:iam::aws:policy/AmazonEKSClusterPolicy"
  role       = aws_iam_role.eks-iam-role.name
}
resource "aws_iam_role_policy_attachment" "AmazonEC2ContainerRegistryReadOnly-EKS" {
  policy_arn = "arn:aws:iam::aws:policy/AmazonEC2ContainerRegistryReadOnly"
  role       = aws_iam_role.eks-iam-role.name
}

## Create the EKS cluster
resource "aws_eks_cluster" "ruralx-eks" {
  name = "ruralx-cluster"
  role_arn = aws_iam_role.eks-iam-role.arn

  vpc_config {
    subnet_ids = [var.subnet_id_1, var.subnet_id_2]
  }

  depends_on = [
    aws_iam_role.eks-iam-role,
  ]
}

## Worker Nodes
resource "aws_iam_role" "workernodes" {
  name = "eks-node-group-example"

  assume_role_policy = jsonencode({
    Statement = [{
      Action = "sts:AssumeRole"
      Effect = "Allow"
      Principal = {
        Service = "ec2.amazonaws.com"
      }
    }]
    Version = "2012-10-17"
  })
}

resource "aws_iam_role_policy_attachment" "AmazonEKSWorkerNodePolicy" {
  policy_arn = "arn:aws:iam::aws:policy/AmazonEKSWorkerNodePolicy"
  role       = aws_iam_role.workernodes.name
}

resource "aws_iam_role_policy_attachment" "AmazonEKS_CNI_Policy" {
  policy_arn = "arn:aws:iam::aws:policy/AmazonEKS_CNI_Policy"
  role       = aws_iam_role.workernodes.name
}

resource "aws_iam_role_policy_attachment" "EC2InstanceProfileForImageBuilderECRContainerBuilds" {
  policy_arn = "arn:aws:iam::aws:policy/EC2InstanceProfileForImageBuilderECRContainerBuilds"
  role       = aws_iam_role.workernodes.name
}

resource "aws_iam_role_policy_attachment" "AmazonEC2ContainerRegistryReadOnly" {
  policy_arn = "arn:aws:iam::aws:policy/AmazonEC2ContainerRegistryReadOnly"
  role       = aws_iam_role.workernodes.name
}

resource "aws_eks_node_group" "worker-node-group" {
  cluster_name    = aws_eks_cluster.ruralx-eks.name
  node_group_name = "ruralx-workernodes"
  node_role_arn   = aws_iam_role.workernodes.arn
  subnet_ids      = [var.subnet_id_1, var.subnet_id_2]
  instance_types = ["t3.xlarge"]

  scaling_config {
    desired_size = 1
    max_size     = 1
    min_size     = 1
  }

  depends_on = [
    aws_iam_role_policy_attachment.AmazonEKSWorkerNodePolicy,
    aws_iam_role_policy_attachment.AmazonEKS_CNI_Policy,
    #aws_iam_role_policy_attachment.AmazonEC2ContainerRegistryReadOnly,
  ]
}

variable "subnet_id_1" {
  type = string
  default = "subnet-05f2a43d392934382"
}

variable "subnet_id_2" {
  type = string
  default = "subnet-0086dd63b54f54812"
}

Create the EKS Cluster by running the following:

terraform plan - To go through a "check" and confirm the configurations are valid
terraform apply - To create the resource

If you want to get more familiar with terraform, you can start here Click this link

4.0 Docker
Here, we plan for the application requirements, code, build, and unit test the application.
I will assume all these phases been taken care of as DevOps team not solely responsible for these, but rather work with larger team of both development and operation of an organization.

Create The Docker Image for the ruralx app
The purpose of this is to create a Docker image from the app's source code that the organization have, containerize it, and store the container inside a container repository. Here, I'll use AWS ECR repo container.

Inside the app source code's root directory, create Dockerfile
Open the Dockerfile, then define the instruction, this depend on base image and others, you can consider this as an;

# syntax=docker/dockerfile:1
FROM node:10.16.1-alpine
ENV NODE_ENV=production
WORKDIR /app
COPY ["package.json", "package-lock.json*", "./"]
RUN npm install --production
COPY . .
CMD [ "npm", "start" ]

To create the Docker image, you'll run the following command: docker build -t ruralx:latest . The -t is for the tag (the name) of the Docker image and the . is telling the Docker CLI that the Dockerfile is in the current directory.
After the Docker image is created, run the following command to confirm the Docker image is on your machine; docker image ls

Run The Docker Image Locally
Now that the Docker image is created, you can run the container locally just to confirm it'll work and not crash.

To run the Docker container, run the following command: docker run -tid ruralx
To confirm the Docker container is running, run the following command: docker container ls

Log Into AWS ECR Repository
The idea is to push image To ECR

Log in to ECR with AWS CLI
aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws/ruralx
Tag The Docker image
Tag the Docker image docker tag ruralx 1XX9-6XXX-6XX7.dkr.ecr.us-east-1.amazonaws.com
Push The Docker Image To ECR
Push the Docker image to ECR docker push 1XX9-6XXX-6XX7.dkr.ecr.us-east-1.amazonaws.com/ruralx

In addition to Docker documentation, Click here for another useful resource from Nelson(YouTube channel; Amigoscode)

To learn more, catch me up on the second part!
Read the >>>

Thanks for reading! Happy Cloud Computing!

I will love to connect with you on LinkedIn

How I build Full-Stack Reactjs App using AWS Amplify, GraphQL API

Adeolu Oyinlola — Tue, 10 May 2022 12:34:54 +0000

Learning Objective

This tutorial will walk you through the step-by-step instructions to build your first React application.
Hosting: Build and host a React application on the AWS.
Database and Storage.

Prerequisites
To effectively follow along, you will need the following set up;

React basis
AWS account
Github account
Text-editor, preferably VS Code
Install Nodejs

The Tutorial Structure
For easy understanding, I will break this tutorial into four sequential order as follow;

Develop React App
Here, we will create a React application and deploy it to the cloud using AWS Amplify’s web hosting service.
A new React application and push it to a GitHub repository. Then, we will connect the repository to AWS Amplify web hosting and deploy it to a globally available content delivery network (CDN). Next, we’ll demonstrate continuous deployment capabilities by making changes to the React application and push a new version to the master branch which will automatically kick off a new deployment.
AWS Amplify provides a Git-based CI/CD workflow for building, deploying, and hosting single page web applications or static sites with serverless backends.
Let's get to work;
1.1) Create a React application
The easiest way to create a React application is by using the command create-react-app. From the Terminal
npx create-react-app awsapp cd awsapp npm start
Perhaps, you encountered any issue regarding global installation, first run this command before continue with the above;
npm uninstall -g create-react-app npx clear-npx-cache npx create-react-app my-app

1.2) Initialize a GitHub repository
Create a new GitHub repo for your app

Initialize git and push the app to the new GitHub repo using the following commands accordingly in your command line interface:
git init git remote add origin git@github.com:username/reponame.git git add . git commit -m “initial commit” git push origin master

1.3) Now, move into AWS Management Console Here
Then type "Amplify" in the search bar and select AWS Amplify to open the service console.

1.4) From the AWS Amplify service console, select "Get Started" under Deploy.

Then, select GitHub as the repository service and select Continue.
Follow with authenticate with GitHub and return to the Amplify console.
Choose the repository and master branch you created earlier, then select Next.
Accept the default build settings and select Next.
Review the final details and select Save and Deploy. AWS Amplify will now build your source code and deploy your app at https://...amplifyapp.com.
Once the build completes, select the thumbnail to see your web app up and running live.
Once the build completes, select the thumbnail to see your web app up and running live.

1.5) Let's make some changes to the code.
In this step, you will make some changes to the code using your text editor and push the changes to the master branch of your app.

Edit src/App.js with the code below and save.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello from V2</h1>
      </header>
    </div>
  );
}

export default App;

Then run these command to push to Github; git add . git commit -m “changes for v2” git push origin master

We have successfully deployed a React application in the AWS Cloud by integrating with GitHub and using AWS Amplify. With AWS Amplify, you can continuously deploy your application in the cloud and host it on a globally-available CDN.

Next, we will create a local version of the app to continue development and add new features.

1.6) Amplify CLI
The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app, following a simple guided workflow. Let’s go ahead and install the Amplify CLI using the Command Prompt (Windows) or the Terminal (macOS). NOTE: this command can be run in any directory in your Command Prompt/Terminal as the “-g” indicates the binary will be installed globally on your system.
npm install -g @aws-amplify/cli

Configure Amplify CLI Amazon Identity and Access Management enables you to manage users and user permissions in AWS. The CLI uses IAM to create and manage services programmatically on your behalf via the CLI. amplify configure
Let's now initialize the Amplify app By deploy a back end and initialize the backend environment locally. In the Amplify console, click on Backend environments and click on click on Get started. Wait for the back end to be deployed.

In the Backend environment tab, click on Open admin UI

Go back to the Amplify Console Backend environments tab and open the Local setup instructions. Copy the command to your clipboard and open the terminal on your computer.

For the remaining and full documentation check

Pls, dont forget to destroy all resources used;
amplify delete

Connect with on LinkedIn

How to dockerize Reactjs app

Adeolu Oyinlola — Tue, 26 Apr 2022 14:58:10 +0000

In this post, sequel to the first part of this series, we are going to dockerize Reactjs application.
First, let's have a quick overview of this post;
1.) What and Why Docker?
2.) What are the Requirements?
3.) What are the steps and processes involved?
While the end goal is to dockerize our app and push that image to Amazon ECR and run that app on Amazon ECS. Deployment and DevOps on AWS ECS will be well explained in the third part.

1.) What and Why Docker?

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. Think of it as best alternative to virtual machine.

Why docker?
There are many reasons to use docker but I will just mention few; a.) Modern applications come with loads of dependencies, and having to install everything on every environment you want to run it on, or worse yet, run it on a shared environment with other apps perhaps requiring other versions of the same libraries, is complicated. With your app residing on a docker image all you do is pull the image and run it, docker handles the rest. b.) Docker reduces the need for more infrastructure resources for development and the container created for individual processes can be shared with other apps with instances of these containerized apps using less memory compared to virtual machines – it makes the development and deployment process more cost-effective.

2.) What are the Requirements;

a.) Existing code/app that you would like to containerize.
If you are starting from scratch;
Check SETTING UP CLIENT SIDE of my previous post Here or download this repo from my githubHere
b.) Code editor, preferably VS Code
c.) Docker Desktop Install
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
or follow the official documentationHere
d.) Docker file (to build the Docker image)

3.) What are the steps and processes involved?

After we get all the requirements ready, we can now further to Dockerize React App and later to AWS ECS for Production, where we need to follow the steps below:
1.) Firstly, set up the reactjs source code.
Then, we need to Dockerize the React app.
2.) Create a Dockerfile and docker-compose.yml file in the root of the app.
3.) Populate the Dockerfile and docker-compose.yml with with set of instruction and argument.
4.) Run build command.
5.) Push the docker image to a repository.

3.1.) set up the reactjs source code.
Using exiting source code or npx create-react-app my-app
Run npm start command to run dev the app.

3.2.) Dockerize React app.
I assume by now, you already have react app and docker installed on your local machine.
Now let's create a Dockerfile and docker-compose.yml in the root of the app.

In this file structure, the three files to focus on are:

Dockerfile
docker-compose.yml
.dockerignore

3.3.) Populate the Dockerfile and docker-compose.yml
Actually we are doing following with our dockerfile:

Downloading a base image from dockerhub
Defining a working directory for our container
Copying package.json file and place it in container working dir
Installing our npm dependencies
Copying rest of the project files

Dockerfile content;

# get the base node image
FROM node:alpine as builder

# set the working dir for container
WORKDIR /app

# copy the json file first
COPY ./package.json /app

# install npm dependencies
RUN npm install

# copy other project files
COPY . .

# build the folder
CMD [ "npm", "start" ]

Now, we have a dockerfile with all instructions that we need in order to create our docker image. Let's now define and create our container using docker-compose.yml file.

docker-compose.yml content;

version: '3'
services:          
    app:
        build: .     
        container_name: frontend
        ports:
            - "3000:3000"
        image: app:react
        volumes: 
            - .:/app
            - /app/node_modules
        command: npm start

.dockerignore content;

node_modules
npm-debug.log

3.4.) Run build command.
Now let's run it locally to see if it works.
First we build our docker image.
docker build --tag react .
Then we run it
docker run -p 3000:3000 -d react

Detached mode, shown by the option -d, means that a Docker container runs in the background. It does not receive input or display output. Now your React app should be available again at [http://localhost:3000/] Now, in order to check our production environment locally let's run following command: docker-compose up

You are finally done with dockerizing your application and also succeeded in moving to a microservices architecture.

3.5.) Push the docker image to a repository.
Next, we push the docker image to a repository. Let's use a dockerhub public repository through the command line or using Docker Desktop. Create a username and repo name in all the files.
Now we can push it to our dockerhub public repository.
docker push <your username>/<reponame> --all-tags

Now the image is pushed to dockerhub public repository and accessible to everyone. We are going to be pulling it on our ec2 instance next.
We have come to the end of How to dockerize Reactjs app

Next; Catch up with me on How to implement DevOps Approach practically with a webapp project from my next post

Thanks for reading!

Connect with me: Linkedin

How to develop MERN stack app

Adeolu Oyinlola — Wed, 20 Apr 2022 18:14:53 +0000

Hello guys,
The question I intend to answer with this tutorial is; how do I develop a MERN Stack app? So, by the end of this tutorial you will be able to develop MERN app in CRUD(create, Read, Update and Delete) form.

I will assume you have some basic understanding of MERN stack as one of the most relevant app development stack in the world which is growing fast every day, use by many developers around the globe with a huge community support.
Simply put, a MERN stack is a combination of four technologies: Mongo DB, Express JS, React JS, and Node JS. More importantly, MERN Stack is combination of open source database and Javascript library & runtime environment. Each letter of this acronym means;

Mongo DB: A document-based open-source database, that provides scalability and flexibility.
Express JS: A structured base designed to develop web applications and APIs.
React JS: A Javascript Front-end library for building user interfaces. Maintained by Facebook.
Node JS: A javascript runtime environment built on Chrome’s V8 JS engine.

Alternatively, you might come across another acronym very similar to MERN, called MEAN, there is, it’s almost the same, but the difference is that we use Angular instead of React.

Note that this tutorial is the first part of MERN stack beginner’s series(part 2 - How to Dockerize MERN stack app in AWS EC2 & part 3 - How to Deploy MERN stack app on AWS ECS, it is advised to follow this sequentially. Also, find the links to the remaining part at the end this tutorial). So, I’m going to teach you how to develop a simple MERN stack Application.

I believe you will agree with me that, the best way to learn anything is by doing it. So, I will guide you into developing this simple app using MERN stack, here we’re going to create a book rating web app called bukrate in CRUD (Create, Read, Update and Delete) form. For proper understanding, I will break this tutorial into four sections; Requirements, Setting up server side, Setting up client side and Integrating server & client side

REQUIREMENTS;
Basic requirement includes;
a)basic javascript, HTML, CSS
b)code editor; preferably VS Code
c)setup development environment on your laptop/desktop
d)install browser, preferably google chrome
e)install nodejs
f)setup MongoDB Atlas

1.0 SETTING UP SERVER SIDE

In this section, we’re going to create the server of our application, where we’re going to create a RESTful API following the steps below.
Firstly, we create an empty directory that will be the root of our system.


$ mkdir bukrate-app
$ cd bukrate-app

The above directory represent folder for our project - bukrate app. Inside this bukrate-app, let’s now create another empty folder called server that will be our backend folder.


$ mkdir server
$ cd server

Follow by creating our package.json inside this server folder.
So, what’s a package.json and how can we create one?

package.json file is the heart of Node. js system. It is the manifest file of any Node. js project and contains the metadata of the project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package.

To create a package.json you need a Package Manager, preferably choose NPM (Node Package Manager) which we will be using in this tutorial. Feel free to use what you prefer say alternatively YARN

Now we can create our file using NPM.


$ npm init -y

While creating this file, you’ll be asked questions related to your project. If you’d like to keep the default provided by NPM, you can just type enter until the end.
After that, you can find the file in the server folder. Then we'll able to install our dependencies. Check out the list and uses of our dependencies;

Express: It’s the server framework (The E in MERN).
Body Parser: Responsible to get the body off of network requests.
Nodemon: Restart the server when it sees changes (for a better dev experience).
Cors: Package for providing a Connect/Express middleware that can be used to enable CORS with various options.
Mongoose: It’s an elegant MongoDB object modeling for node.js

Then, install all the dependencies by running this command;

$ npm install express body-parser cors mongoose nodemon

Immediately, after successfully create these dependencies, you will found additional two new folder node_modules and package-lock.json. With these two files, your project can be interpreted.

From here on, we can now create NodeJS file(at the root of server folder) called index.js which contain all the logic for our API/server as follow.

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const mongoose = require('mongoose')
const app = express()
const apiPort = 3000

app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors())
app.use(bodyParser.json())

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`))

To start the application you just need to run the following command:

node index.js

You should see the message “Server running on port 3000” it means that everything you’ve done until now it’s correct.
Then open a browser and type localhost:3000, you’ll see the message “Hello World”.

The good news is, you’re able to see your server running. Next is to set up database for our application.

1.1 Setup Cloud MongoDB
We need to either install MongoDB on the computer locally or use the cloud database. For this project we use the cloud - Atlas;
This is simple, you can just follow the step provided by MongoDB documentation here. MongoDB
In an attempt not to make this tutorial unnecessarily long, I will not spend much time on setting up the database, but will try to highlight each step, also this tutorial can be of great help Link;
a)sign up Here
b)choose Atlas
c)build cluster
d)named the cluster if choose to
e)build database; - by clicking on the collection. - Add My Own Data. - Add Database and Collection name
f)Setup Database Access; - to add user
g)connect to the app database; - connect to your application, - add method.
With this, we’ve just created our database with these steps.

Now, let's return back to our javascript code, we need to create a connection from our server using the Mongoose library.

Now, let's update the main Nodejs file server/index.js we have something like this.

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const mongoose = require('mongoose')
const app = express()

//connect to mongodb
const dbURI = 'mongodb+srv://<username>:<password>@bukrate-app.lfqmj.mongodb.net/bukrate?retryWrites=true&w=majority';

mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => app.listen(PORT, () => console.log(`Server Running on Port: http://localhost:${PORT}`)))
  .catch((error) => console.log(`${error} did not connect`));

const apiPort = 3000

app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors())
app.use(bodyParser.json())

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`))

You should notice I have added like five line after the comment //connect to mongodb
Because of this update, let's restart the application to see the effect, then you need to close and open a new one. This is where nodemon will start its working, it’s going to restart the server whenever it sees changes in any file of our project. So, let’s do this by running the command.

$ nodemon index.js

1.1.1. Creating Book’s Schema
We need to create an entity called book that should be composed of the name of a book. For this, we just need to know the name of the book and the author of the book, and to add an important information, the rating.

Let’s go ahead and create a folder called models and add a file called rate.js.

$ mkdir models
$ cd models
$ touch rate.js

const mongoose = require('mongoose')
const Schema = mongoose.Schema

const rateSchema = new Schema(
    {
        name: { type: String, required: true },
        author: { type: String, required: true },
        rating: { type: Number, required: true },
    },
    { timestamps: true },
)

const Rate = mongoose.model('Rate', rateSchema);
module.exports = Rate;

1.2. Getting and Saving Data
Here, we’ll create all the CRUD operations and create our REST endpoints. Let’s create two more folders inside the server: routes and controllers. In the route folder, let’s create the file rate-router.js and in the controller folder, rate-ctrl.js.

$ mkdir routes controllers
$ touch routes/rate-router.js
$ touch controllers/rate-ctrl.js

const Rate = require('../models/rate')

createRate = (req, res) => {
    const body = req.body

    if (!body) {
        return res.status(400).json({
            success: false,
            error: 'You must provide a rate',
        })
    }

    const rate = new Rate(body)

    if (!rate) {
        return res.status(400).json({ success: false, error: err })
    }

    rate
        .save()
        .then(() => {
            return res.status(201).json({
                success: true,
                id: rate._id,
                message: 'rate created!',
            })
        })
        .catch(error => {
            return res.status(400).json({
                error,
                message: 'Rate not created!',
            })
        })
}

updateRate = async (req, res) => {
    const body = req.body

    if (!body) {
        return res.status(400).json({
            success: false,
            error: 'You must provide a body to update',
        })
    }

    Rate.findOne({ _id: req.params.id }, (err, rate) => {
        if (err) {
            return res.status(404).json({
                err,
                message: 'Rate not found!',
            })
        }
        rate.name = body.name
        rate.author = body.time
        rate.rating = body.rating
        rate
            .save()
            .then(() => {
                return res.status(200).json({
                    success: true,
                    id: rate._id,
                    message: 'Rate updated!',
                })
            })
            .catch(error => {
                return res.status(404).json({
                    error,
                    message: 'Rate not updated!',
                })
            })
    })
}

deleteRate = async (req, res) => {
    await Rate.findOneAndDelete({ _id: req.params.id }, (err, rate) => {
        if (err) {
            return res.status(400).json({ success: false, error: err })
        }

        if (!rate) {
            return res
                .status(404)
                .json({ success: false, error: `Rate not found` })
        }

        return res.status(200).json({ success: true, data: rate })
    }).catch(err => console.log(err))
}

getRateById = async (req, res) => {
    await Rate.findOne({ _id: req.params.id }, (err, rate) => {
        if (err) {
            return res.status(400).json({ success: false, error: err })
        }

        if (!rate) {
            return res
                .status(404)
                .json({ success: false, error: `Rate not found` })
        }
        return res.status(200).json({ success: true, data: rate })
    }).catch(err => console.log(err))
}

getRates = async (req, res) => {
    await Rate.find({}, (err, rates) => {
        if (err) {
            return res.status(400).json({ success: false, error: err })
        }
        if (!rates.length) {
            return res
                .status(404)
                .json({ success: false, error: `Rate not found` })
        }
        return res.status(200).json({ success: true, data: rates })
    }).catch(err => console.log(err))
}

module.exports = {
    createRate,
    updateRate,
    deleteRate,
    getRates,
    getRateById,
}

const express = require('express')

const RateCtrl = require('../controllers/rate-ctrl')

const router = express.Router()

router.post('/rate', RateCtrl.createRate)
router.put('/rate/:id', RateCtrl.updateRate)
router.delete('/rate/:id', RateCtrl.deleteRate)
router.get('/rate/:id', RateCtrl.getRateById)
router.get('/rates', RateCtrl.getRates)

module.exports = router

Lastly, let’s add the router in our server/index.js file.

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const mongoose = require('mongoose')
const Rate = require('./models/rate')
const app = express()

//connect to mongodb
const dbURI = 'mongodb+srv://<username>:<password>@bukrate-app.lfqmj.mongodb.net/bukrate?retryWrites=true&w=majority';

mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => app.listen(PORT, () => console.log(`Server Running on Port: http://localhost:${PORT}`)))
  .catch((error) => console.log(`${error} did not connect`));


const rateRouter = require('./routes/rate-router')
const apiPort = 3000

app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors())
app.use(bodyParser.json())

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.use('/api', rateRouter)

app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`))

1.2.1 Protecting Your Database
Up till here, there shouldn't be any issue with our application. But if you want to test the application you can use either Postman or Robo 3T. These tools help us in verify our application workings (You can find how to from the documentation on their websites or other resources on google).
Remember how you have to input your database access's username and password during the MongoDB setup. So, imagine you have a course to share your source code to the public, say on GitHub, you need to protect access to your database.
Firstly, we need another dependencies to run;

$ npm install dotenv

Then, create .env file server/.env

Inside index.js, add and update with another variables;
const dotenv = require('dotenv')
Also cut the MongoDB link from line 12 and replace with
process.env.MONGO_URL
Then inside .env file;

MONGO_URL = mongodb+srv://<username>:<password>@bukrate-app.lfqmj.mongodb.net/bukrate?retryWrites=true&w=majority

Congratulation! We’ve just finished the server side. With all these knowledge you’re now in position to create other entities, try to create a user entity, maybe an employee or a table price, use your imagination is your limitation.

Let’s go straight up to setting up client side.

2.0 SETTING UP CLIENT SIDE
This is where we’re going to create all the user-interface parts, where the user will interact with our application.
Firstly, we’re going to the root of our project and create the client-side. For this, we need to understand about NPX.
NPX is a tool that its goal is to help round out the experience of using packages from the NPM registry. As NPM makes it super easy to install and manage dependencies hosted on the registry, NPX makes it easy to use CLI tools and other executables hosted on the registry.
Let’s create our directory. So, the server-side will be for the Backend and we have the client-side for the Frontend.

$ npx create-react-app client 
$ cd client
$ npm start

The application should opened this screen if you get it right.

You will remember that the default port is 3000, but we’ve already set this port to our Backend. Then, let’s changes it to 7000. Meanwhile, you choose whatever number.
To change the port we need to change it on client/package.json. Include PORT= in the file.

...
},
  "scripts": {
    "start": "set PORT=7000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
...

You will discover that React creates some default files. Let’s remove some of the unnecessaries files for us;
$ rm App.css index.css App.test.js serviceWorker.js

To view the complete app, we need to set up our project by installing some other dependencies like we do in the server side. These are what we need; Axios, Bootstrap, Styled-Components, and React Table.

axios: It’s a promise-based the asynchronous code. It’s the most popular promise based HTTP.
bootstrap: It’s is an open-source toolkit and the most popular front-end component library where allows you for developing with HTML, CSS, and JS.
styled-components: It allows you to write actual CSS code to style your components.
react-table: It’s a lightweight, fast, and extendable data grid built for React.
react-router-dom: DOM bindings for React Routers.

$ npm install styled-components react-table react-router-dom axios bootstrap --save

In the src directory, we should create the new directories that will be the structure of our project. Create an index.js file inside each directory, except the app folder.

$ cd src
$ mkdir api app components pages style
$ touch api/index.js components/index.js pages/index.js style/index.js

Move the App.js file to the app directory, but renaming to index.js.

Now is time for us to start the coding,
First of all, update our file client/src/index.js for the following code.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(<App />, document.getElementById('root'))

After this, we’ll develop the header of the application. And create the other components of our project. Create the new files NavBar.jsx, Logo.jsx, and Links.jsx.

$ touch components/NavBar.jsx components/Logo.jsx components/Links.jsx

Hey! What is JSX extension?
Simple, JSX is a notation that Reacts chose to identify a JavaScript’s eXtension. It’s recommended to use it with React to describe what the UI should look like.

Now, let’s create our files.
For the Links;

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Collapse = styled.div.attrs({
    className: 'collpase navbar-collapse',
})``

const List = styled.div.attrs({
    className: 'navbar-nav mr-auto',
})``

const Item = styled.div.attrs({
    className: 'collpase navbar-collapse',
})``

class Links extends Component {
    render() {
        return (
            <React.Fragment>
                <Link to="/" className="navbar-brand">
                    MERN Application
                </Link>
                <Collapse>
                    <List>
                        <Item>
                            <Link to="/rates/list" className="nav-link">
                                List Book Rates
                            </Link>
                        </Item>
                        <Item>
                            <Link to="/rates/create" className="nav-link">
                                Create Book Rate
                            </Link>
                        </Item>
                    </List>
                </Collapse>
            </React.Fragment>
        )
    }
}

export default Links

For the Logo;

import React, { Component } from 'react'
import styled from 'styled-components'

import logo from '../logo.svg'

const Wrapper = styled.a.attrs({
    className: 'navbar-brand',
})``

class Logo extends Component {
    render() {
        return (
            <Wrapper href="https://deoluoyinlola.netlify.app">
                <img src={logo} width="50" height="50" alt="deoluoyinlola.netlify.app" />
            </Wrapper>
        )
    }
}

export default Logo

For the NavBar;

import React, { Component } from 'react'
import styled from 'styled-components'

import Logo from './Logo'
import Links from './Links'

const Container = styled.div.attrs({
    className: 'container',
})``

const Nav = styled.nav.attrs({
    className: 'navbar navbar-expand-lg navbar-dark bg-dark',
})`
    margin-bottom: 20 px;
`

class NavBar extends Component {
    render() {
        return (
            <Container>
                <Nav>
                    <Logo />
                    <Links />
                </Nav>
            </Container>
        )
    }
}

export default NavBar

The components/index.js file will help to export our components, it will allow us to import them in other files using the notation; import { blabla } from './components'

import Links from './Links'
import Logo from './Logo'
import NavBar from './NavBar'

export { Links, Logo, NavBar }

Lastly, let's update app/index.js. Then, we able to see the development of the project.

import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'

import { NavBar } from '../components'

import 'bootstrap/dist/css/bootstrap.min.css'

function App() {
    return (
        <Router>
            <NavBar />
        </Router>
    )
}

export default App

3.0 INTEGRATING SERVER AND CLIENT SIDE
Now let's learn how to integrate the server with our client.
First of all, let’s update the file api/index.js.

import axios from 'axios'

const api = axios.create({
    baseURL: 'http://localhost:3000/api',
})

export const insertRate = payload => api.post(`/rate`, payload)
export const getAllRates = () => api.get(`/rates`)
export const updateRateById = (id, payload) => api.put(`/rate/${id}`, payload)
export const deleteRateById = id => api.delete(`/rate/${id}`)
export const getRateById = id => api.get(`/rate/${id}`)

const apis = {
    insertRate,
    getAllRates,
    updateRateById,
    deleteRateById,
    getRateById,
}

export default apis

Amazing! Now we can develop our routes. For this, we’ll need to update the file app/index.js adding the routes.

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

import { NavBar } from '../components'
import { RatesList, RatesInsert, RatesUpdate } from '../pages'

import 'bootstrap/dist/css/bootstrap.min.css'

function App() {
    return (
        <Router>
            <NavBar />
            <Switch>
                <Route path="/rates/list" exact component={RatesList} />
                <Route path="/rates/create" exact component={RatesInsert} />
                <Route
                    path="/rates/update/:id"
                    exact
                    component={RatesUpdate}
                />
            </Switch>
        </Router>
    )
}

export default App

On pages folder, let’s create the files that will do the role of each application’s page: RatesList.jsx, RatesInsert.jsx and RatesUpdate.jsx.

$ cd pages
$ touch RatesList.jsx RatesInsert.jsx RatesUpdate.jsx

For now, let’s create simples files where you can see the page’s transition when you click in each link of the NavBar.

For RateList;

import React, { Component } from 'react'

class RatesList extends Component {
    render() {
        return (
            <div>
                <p>In this page you'll see the list of rates</p>
            </div>
        )
    }
}

export default RatesList

For RateInsert;

import React, { Component } from 'react'

class RatesInsert extends Component {
    render() {
        return (
            <div>
                <p>In this page you'll see the form to add a book</p>
            </div>
        )
    }
}

export default RatesInsert

For RateUpdate;

import React, { Component } from 'react'

class RatesUpdate extends Component {
    render() {
        return (
            <div>
                <p>In this page you'll see the form to update the books</p>
            </div>
        )
    }
}

export default RatesUpdate

For index.js

import RatesList from './RatesList'
import RatesInsert from './RatesInsert'
import RatesUpdate from './RatesUpdate'

export { RatesList, RatesInsert, RatesUpdate }

OK, let’s edit our file to get the ratings from the database: RatesList.jsx.

import React, { Component } from 'react'
import ReactTable from 'react-table'
import api from '../api'

import styled from 'styled-components'

import 'react-table/react-table.css'

const Wrapper = styled.div`
    padding: 0 40px 40px 40px;
`

class RatesList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rates: [],
            columns: [],
            isLoading: false,
        }
    }

    componentDidMount = async () => {
        this.setState({ isLoading: true })

        await api.getAllRates().then(rates => {
            this.setState({
                rates: rates.data.data,
                isLoading: false,
            })
        })
    }

    render() {
        const { rates, isLoading } = this.state
        console.log('TCL: RatesList -> render -> rates', rates)

        const columns = [
            {
                Header: 'ID',
                accessor: '_id',
                filterable: true,
            },
            {
                Header: 'Name',
                accessor: 'name',
                filterable: true,
            },
            {
                Header: 'Author',
                accessor: 'author',
                filterable: true,
            },
            {
                Header: 'Rating',
                accessor: 'rating',
                filterable: true,
            },
            {
                Header: 'Time',
                accessor: 'time',
                Cell: props => <span>{props.value.join(' / ')}</span>,
            },
        ]

        let showTable = true
        if (!rates.length) {
            showTable = false
        }

        return (
            <Wrapper>
                {showTable && (
                    <ReactTable
                        data={rates}
                        columns={columns}
                        loading={isLoading}
                        defaultPageSize={10}
                        showPageSizeOptions={true}
                        minRows={0}
                    />
                )}
            </Wrapper>
        )
    }
}

export default RatesList

Awesome, in this list let’s include two more things, these things will be buttons. One button to delete another button to update.

import React, { Component } from 'react'
import ReactTable from "react-table-6"
import api from '../api'

import styled from 'styled-components'

import "react-table-6/react-table.css" 

const Wrapper = styled.div`
    padding: 0 40px 40px 40px;
`

const Update = styled.div`
    color: #ef9b0f;
    cursor: pointer;
`

const Delete = styled.div`
    color: #ff0000;
    cursor: pointer;
`

class UpdateRate extends Component {
    updateUser = event => {
        event.preventDefault()

        window.location.href = `/rates/update/${this.props.id}`
    }

    render() {
        return <Update onClick={this.updateUser}>Update</Update>
    }
}

class DeleteRate extends Component {
    deleteUser = event => {
        event.preventDefault()

        if (
            window.confirm(
                `Do you want to delete the movie ${this.props.id} permanently?`,
            )
        ) {
            api.deleteRateById(this.props.id)
            window.location.reload()
        }
    }

    render() {
        return <Delete onClick={this.deleteUser}>Delete</Delete>
    }
}

class RatesList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rates: [],
            columns: [],
            isLoading: false,
        }
    }

    componentDidMount = async () => {
        this.setState({ isLoading: true })

        await api.getAllRates().then(rates => {
            this.setState({
                rates: rates.data.data,
                isLoading: false,
            })
        })
    }

    render() {
        const { rates, isLoading } = this.state
        console.log('TCL: RatesList -> render -> rates', rates)

        const columns = [
            {
                Header: 'ID',
                accessor: '_id',
                filterable: true,
            },
            {
                Header: 'Name',
                accessor: 'name',
                filterable: true,
            },
            {
                Header: 'Author',
                accessor: 'author',
                filterable: true,
            },
            {
                Header: 'Rating',
                accessor: 'rating',
                filterable: true,
            },
            {
                Header: 'Time',
                accessor: 'time',
                Cell: props => <span>{props.value.join(' / ')}</span>,
            },
            {
                Header: '',
                accessor: '',
                Cell: function(props) {
                    return (
                        <span>
                            <DeleteRate id={props.original._id} />
                        </span>
                    )
                },
            },
            {
                Header: '',
                accessor: '',
                Cell: function(props) {
                    return (
                        <span>
                            <UpdateRate id={props.original._id} />
                        </span>
                    )
                },
            },
        ]

        let showTable = true
        if (!rates.length) {
            showTable = false
        }

        return (
            <Wrapper>
                {showTable && (
                    <ReactTable
                        data={rates}
                        columns={columns}
                        loading={isLoading}
                        defaultPageSize={10}
                        showPageSizeOptions={true}
                        minRows={0}
                    />
                )}
            </Wrapper>
        )
    }
}

export default RatesList

As you can see, now we’re able to delete a book rate, but we still not able to update it, because we haven’t finished the component yet.
Before, to develop the update page, let’s create the insertion page.

import React, { Component } from 'react'
import api from '../api'

import styled from 'styled-components'

const Title = styled.h1.attrs({
    className: 'h1',
})``

const Wrapper = styled.div.attrs({
    className: 'form-group',
})`
    margin: 0 30px;
`

const Label = styled.label`
    margin: 5px;
`

const InputText = styled.input.attrs({
    className: 'form-control',
})`
    margin: 5px;
`

const Button = styled.button.attrs({
    className: `btn btn-primary`,
})`
    margin: 15px 15px 15px 5px;
`

const CancelButton = styled.a.attrs({
    className: `btn btn-danger`,
})`
    margin: 15px 15px 15px 5px;
`

class RatesInsert extends Component {
    constructor(props) {
        super(props)

        this.state = {
            name: '',
            author: '',
            rating: '',
            time: '',
        }
    }

    handleChangeInputName = async event => {
        const name = event.target.value
        this.setState({ name })
    }
    handleChangeInputAuthor = async event => {
        const author = event.target.value
        this.setState({ author })
    }

    handleChangeInputRating = async event => {
        const rating = event.target.validity.valid
            ? event.target.value
            : this.state.rating

        this.setState({ rating })
    }

    handleChangeInputTime = async event => {
        const time = event.target.value
        this.setState({ time })
    }

    handleIncludeRate = async () => {
        const { name, rating, time } = this.state
        const arrayTime = time.split('/')
        const payload = { name, rating, time: arrayTime }

        await api.insertRate(payload).then(res => {
            window.alert(`Book inserted successfully`)
            this.setState({
                name: '',
                author: '',
                rating: '',
                time: '',
            })
        })
    }

    render() {
        const { name, author, rating, time } = this.state
        return (
            <Wrapper>
                <Title>Create Book</Title>

                <Label>Name: </Label>
                <InputText
                    type="text"
                    value={name}
                    onChange={this.handleChangeInputName}
                />

                <Label>Author: </Label>
                <InputText
                    type="text"
                    value={author}
                    onChange={this.handleChangeInputAuthor}
                />

                <Label>Rating: </Label>
                <InputText
                    type="number"
                    step="0.1"
                    lang="en-US"
                    min="0"
                    max="10"
                    pattern="[0-9]+([,\.][0-9]+)?"
                    value={rating}
                    onChange={this.handleChangeInputRating}
                />

                <Label>Time: </Label>
                <InputText
                    type="text"
                    value={time}
                    onChange={this.handleChangeInputTime}
                />

                <Button onClick={this.handleIncludeMovie}>Add Book</Button>
                <CancelButton href={'/rates/list'}>Cancel</CancelButton>
            </Wrapper>
        )
    }
}

export default RatesInsert

And finally, let’s create the update file.

Friend, we have come to the end of this tutorial. In this article, you have seen the structure to build a MERN application using diverse libraries provided by an amazing community around the world.
In this article, my intuit was to keep things simple for your understanding. This is a project that you can do many enhancements.
Maybe you can try, for instance, create a better structure to include the year of the book or you can improve the code to put the update and insertion book in the same file, what about to create a new entity called the customer and create the same RESTful operation for it? You can add a lot of new features to this. If you prefer, tell me in the comments.

You can find the complete github repo Here

Also, is advised to follow up this tutorial up with the next part - How Dockerize MERN App on AWS EC2, Link here
I hope that I have contributed to your knowledge. Feel free to tell me what I should improve on to write better articles.

I love to see you in the next part.