Helmify your React App on EKS
Tags: kubernetes, helm, aws
Published: 2023-03-30 11:40:05

## Introduction
This article gives a step-by-step explanation of how to deploy a react app using Helm charts on EKS. The react app is a simple app that prints the current date and time. 

[Helm Chart](https://helm.sh/) is an open-source project owned by Kubernetes. It is Package Manager, Template Engine and Release engine for Kubernetes.

### Prerequisites
- An AWS Account and IAM User with necessary role or Admin
- Have docker installed
- Have [eksctl](https://docs.aws.amazon.com/eks/latest/userguide/eksctl.html) installed. Eksctl is the official command line for EKS
- Have [Helm](https://helm.sh/docs/intro/install/) installed.


### Getting the Application Source Code

Clone the repository for the tutorial.
```
git clone https://github.com/ToluwalopeAyo/demo-react-app.git
```
To run the app locally, switch to the directory, install dependencies and start the app.

```
cd reactapp
npm install
npm start
```
A new tab should open on your browser with the app running.

### Containerize the App
In the working directory, create a Dockerfile and paste the following. 

```
FROM node:16-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

```
To build the docker image, run the command below. Replace 'name' with a preferable name tag for your docker image.

```
docker build -t <name> .
```

### Push Docker Image to a Container Registry
In this tutorial, we'd use Elastic Container Registry to publish the docker image.

First, log in to AWS console and search for the Elastic Container Registry Service.
Click on 'Create Repository' to create a repository for the docker image. The repository is to be private and give the repository a name.

Then, authenticate your docker client with ECR with this command:

```
aws ecr get-login-password --region region | docker login --username AWS --password-stdin aws_account_id.dkr.ecr.region.amazonaws.com
```
Replace 'region' and 'aws_account_id' with your AWS region and AWS account id respectively.
You should get a response with the message "Login Succeeded".

Tag the docker image that was created earlier with the uri of the ecr repository and a verison tag.

```
docker tag <name> aws_account_id.dkr.ecr.region.amazonaws.com/repository-name
```

Push the docker image to ECR

```
docker push aws_account_id.dkr.ecr.region.amazonaws.com/repository-name
```

### Create the EKS Cluster
Using the Eksctl command, create a kubernetes cluster. Replace 'region' with your appropriate region. 

```
eksctl create cluster --name helm-test --region <region> --nodegroup-name linux-nodes --node-type t2.micro --nodes 2
```
The cluster should take about 20 mins to create completely.

### Create the Helm Chart
To create a new chart, run the helm create command in the react-app directory, where 'helm-test' is the name of the chart. This command creates a directory containing the common chart files and directories.

```
helm create helm-test
```
The file structure should look like this:

![Helm create command output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bj3ppz6sl1ggjquja6q.png)

In the helm-test folder, delete all the files in the templates folder except the _helpers.tpl file. Also clear the values.yaml file. You can copy the files in a seperate directory for reference.

In the templates folder, create a deployment.yaml file and paste the code below.

```
apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ include "helm-test.fullname" . }}
  labels: 
    # replaces this value with the chart name
    app: {{ include "helm-test.name" . }}
spec:
  # this gets the value of replicas from the values.yaml file
  replicas: {{ .Values.replicaCount }}
  selector:
    matchLabels:
      app: {{ include "helm-test.name" . }}
  template:
    metadata:
      labels:
        app: {{ include "helm-test.name" . }}
    spec:
      containers:
      - name: {{ .Chart.Name }}
        # gets the image repository value from the values.yaml file
        image: {{ .Values.image.repository }}
        imagePullPolicy: {{ .Values.image.pullPolicy}}
        ports:
        - containerPort: 3000

```

In the templates folder, create a svc.yaml file and paste the code below.

```
apiVersion: v1
kind: Service
metadata:
  labels:
    app: {{ include "helm-test.name" . }}
  name: {{ include "helm-test.name" .}}
spec:
  type: {{ .Values.service.type }}
  selector:
    app: {{ include "helm-test.name" .}}
  ports:
  - port: {{ .Values.service.port }}
    targetPort: {{ .Values.service.targetPort }}
```

In the values.yml file, paste the code below. Make sure to replace 'aws_account_id', 'region' and 'repository-name' with the appropriate value.

```
replicaCount: 1

image:
  repository: <aws_account_id>.dkr.ecr.<region>.amazonaws.com/<repository-name>:latest
  pullPolicy: IfNotPresent

service: 
  port: 80
  targetPort: 3000
  # The service type is a LoadBalancer so that we can access it from the browser
  type: LoadBalancer
```

Run the `helm lint .` command to be sure that the charts are well formatted. The output should look like this:

![Helm lint output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7jnk67ckrsg41iuaje5.png)

### Deploying the Helm Charts to Kubernetes
To deploy the helm chart to kubernetes, run the 'helm install' command

```
helm install helm-test .
```
The output should look like this:

![helm install output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh8nma2ff287qftaki1q.png)

To confirm that the app was successfully deployed, run the kubectl get pods and get svc command.
```
kubectl get pods
```
The pod should be running
![kubectl get pods output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jic61ofpvfape5xmgzxx.png)

```
kubectl get svc
```

![kubectl get svc output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcbk6nf3xs7ly7jdprns.png)

Copy the endpoint in the External IP and paste on your browser using http and you should see that the app is running.

![App running on the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pf3z0iy4wwvi4v9l0j2.png)


### Conclusion

In this article, we learnt how to use Helm Charts to deploy a react app to Kubernetes. 

In order not to incur charges on AWS, please make sure to delete the EKS cluster. 
First delete the helm chart.
```
helm uninstall helm-test
```
Then delete the cluster.
```
eksctl delete cluster --name helm-test --region <region>
```

Thank you