How to Build and Deploy a React.js Application with Node.js Backend to Amazon EKS Cluster
Tags: kubernetes, aws, devops, docker
Published: 2023-05-19 08:35:48

In this tutorial, you will learn about how to build and deploy a React.js application with Node.js backend to Amazon EKS Cluster. You will deploy a two-container application that has a frontend connected to the backend. The frontend application container will send API requests to the backend and fetch blog titles.

[Amazon Elastic Kubernetes Service](https://aws.amazon.com/eks/) (Amazon EKS) is a cloud-based Kubernetes service. It allows Amazon Web Services (AWS) users to create and run Kubernetes clusters on the AWS cloud. It provides a fully dedicated service for automatically deploying, managing, and scaling Kubernetes application containers. You will containerize the two applications using Docker before deploying them to the Amazon EKS cluster.

### Prerequisites
Before you get started with this tutorial, your must:
- Understand [Docker](https://docs.docker.com/get-docker/). Before you start ensure you are familiar with Docker containers and have Docker Desktop installed on your computer. You can read this [post](https://sweetcode.io/writing-docker-files-for-different-technology-stacks/) for you to get started with Docker.

- Understand [Kubernetes](https://kubernetes.io/) deployment. This is an added advantage for you to easily get started with this tutorial. You can read this [post](https://sweetcode.io/how-to-deploy-a-flask-application-to-a-kubernetes-cluster/) for you to get started with [Kubernetes](https://kubernetes.io/) deployment.

- Have [Kubectl](https://kubernetes.io/docs/tasks/tools/) installed on your computer. You will use this tool to communicate with the Amazon EKS cluster. You will also apply Kubectl commands for deploying the multi-container application to the Amazon EKS Cluster. You can read this [post](https://sweetcode.io/how-to-deploy-docker-containers-to-the-kubernetes-cluster-using-kubernetes-cli/) for you to get started with [Kubectl](https://kubernetes.io/docs/tasks/tools/) deployment.

- Have some basic Knowdegle of [React.js](https://reactjs.org/) and [Node.js](https://nodejs.org/). You will use a React.js and Node.js application to explain the concept of multi-container application deployment to the Amazon EKs Cluster. You can read this [post](https://sweetcode.io/writing-docker-files-for-different-technology-stacks/) for you to get started with [React.js and Node. js](https://sweetcode.io/how-to-deploy-react-js-and-node-js-dockerized-containers-to-kubernetes-cluster/)

- Install [VS Code](https://code.visualstudio.com/Download) code editor. Most developers prefer to use VS Code as their code editor. 

### Multi-container Application Deployment to Amazon EKs Cluster
To deploy the multi-container application to Amazon EKs Cluster, we will follow these steps:

1. **Download the Project files for the Application**
2. **Run the Backend Node.js Application Locally**
3. **Run the frontend React.js application locally**
4. **Dockerize the backend Node.js application**
5. **Dockerize the frontend React.js application**
6. **Run the backend Node.js application as a Docker Container**
7. **Run the frontend React.js application as a Docker Container**
8. **Push the backend Docker Image to Docker Hub**
9. **Push the frontend Docker Image to Docker Hub**
10. **Create the Amazon EKS Cluster**
11. **Write Kubernetes Deployment and Service YAML files**
12. **Deploy the backend Node.js application**
13. **Accessing the backend Node.js application container**
14. **Deploy the frontend React.js application**
15. **Accessing the frontend React.js application container**

### Step 1: Download the Project files for the Application
To download the project files for the application use this [link](https://github.com/Bravinsimiyu/react-node-app). It will download all the Node.js backend (Node.js) and frontend (React.js) files:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb1jdcdhe3orq93qmhyy.png)

### Step 2: Run the Backend Node.js Application Locally
To run the backend Node.js application locally, run the following commands in your open terminal to initialize the Node.js application:

```npm
cd backend
npm i
```
After the application initialization, now run this command to start the application:

```npm
npm run dev
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuq9hnsdrst3bcolbfgp.png)

The Node.js application will then be launched on your default web browser as shown:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfvtdyci5muyn5impbm1.png)

### Step 3: Run the Frontend React.js Application Locally
To run the frontend React.js application locally, run the following commands in your open terminal to initialize the React.js application:

```npm
cd frontend
npm i
```
Now run this command to start the application:

```npm
npm start
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj6sn1kf4abztsqkx6rg.png)

The React.js application will then be launched on your default web browser as shown:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs4fciwdt6iz6ga1nxar.png)

### Step 4: Dockerize the Backend Node.js Application
To Dockerize the backend Node.js application, create a Dockerfile and add the following Docker commands:

```docker
# Base Image for the Backend Node.js Application Docker image
FROM node:18-alpine
# Nodememon for monitoring and watching the Backend Node.js Application container
RUN npm install -g nodemon
# The working directory (folder) for the Backend Node.js Application container
WORKDIR /app
# Copying the dependencies files for the Backend Node.js Application folder
COPY package.json .
#Installing all the dependencies/framework/libraries for the Backend Node.js Application
RUN npm install
#Copying all the Backend Node.js Application files to the container working directory
COPY . .
#Backend Node.js Application container will run on this port
EXPOSE 4000
#Command to start the Backend Node.js Application Docker container
CMD ["npm", "run", "dev"]
```
To build the Docker image for the Backend Node.js application, run this command:

```docker
docker build -t bravinwasike/backend .
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvr664nowbroqi3ewnze.png)

### Step 5: Dockerize the Frontend React.js Application
To Dockerize the frontend React.js application, create a Dockerfile and add the following Docker commands:

```docker
# Base Image for the Frontend React.js Application Docker image
FROM node:18-alpine
# The working directory (folder) for the Frontend React.js Application container
WORKDIR /app
# Copying the dependencies files for the Frontend React.js Application folder
COPY package.json .
#Installing all the dependencies/framework/libraries for the Frontend React.js Application
RUN npm install
#Copying all the Frontend React.js Application files to the container working directory
COPY . .
#Frontend React.js Application container will run on this port
EXPOSE 3000
#Command to start the Frontend React.js Application Docker container
CMD ["npm", "start"]
```
To build the Docker image for the Frontend React.js application, run this command:

```docker
docker build -t bravinwasike/frontend .
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8i8v1x7ryjksvz5tq4m.png)

### Step 6: Run the Backend Node.js Application as a Docker Container
To run the backend Node.js application as a Docker Container, run this command in your open terminal:

```docker
docker run -p 4000:4000 bravinwasike/backend
```
It will launch the Backend Node.js Application as a Docker Container:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfgxcyvqv40qqeg3j4vq.png)

### Step 7: Run the Frontend React.js Application as a Docker Container
To run the Frontend React.js application as a Docker Container, run this command in your open terminal:

```docker
docker run -p 3000:3000 bravinwasike/frontend
```
It will launch the Frontend React.js Application as a Docker Container:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uggg5tpg70owadoim5l.png)

### Step 8: Push the Backend Docker Image to Docker Hub
To push the backend Docker Image to Docker Hub, run these commands in your open terminal:

```docker
docker login
docker push bravinwasike/backend
```
### Step 9: Push the Frontend Docker Image to Docker Hub
To push the frontend Docker Image to Docker Hub, run these commands in your open terminal:

```docker
docker push bravinwasike/frontend
```
### Step 10: Create the Amazon EKS Cluster
To create the Amazon EKS cluster, follow these steps:

**Step One: Go to the [AWS site](https://aws.amazon.com/) and sign up for the [Amazon Web Service free tier account](https://portal.aws.amazon.com/billing/signup#/start/email).**

**Step Two: Download and install the [AWS CLI Tool](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) from the official [site](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html).** You will use this tool to configure your Amazon Web Service free tier account. You will use this tool to log in and authenticate to your Amazon Web Service free tier account from your terminal:

To configure the Amazon Web Service free tier account, run this command:

```aws
aws configure
```
You will then be prompted to input/provide the following AWS account details:
- "Access key ID",
- "Secret access key"
- "Output format"
-  "AWS Region"

You can get these account details in your Amazon Web Service free tier account portal. You can read this Sweet Code [post](https://sweetcode.io/how-to-deploy-a-machine-learning-app-to-amazon-eks-cluster/) that gives a detailed step-by-step of how to get these account details.

**Step Three: Download and Install the [Eksctl tool](https://docs.aws.amazon.com/eks/latest/userguide/eksctl.html).**
This is the official AWS tool for creating AWS EKS Clusters. You can download this tool on your specific operating system from this [Eksctl official site](https://docs.aws.amazon.com/eks/latest/userguide/eksctl.html).

**Step Four: Create the Amazon EKS Cluster using Eksctl**
To create the Amazon EKS Cluster using Eksctl, run this command:

```eksctl
eksctl create cluster --name sample-cluster
```
The command will create a basic EKS Cluster With all the default AWS cloud resources:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfcxfculndlhcp98pbr1.png)

### Step 11: Write Kubernetes Deployment and Service YAML files
You will need to write the Kubernetes Deployment and Service YAML files for each application. For both the backend Node.js application and frontend React.js application. Kubectl will use these YAML files to create the application pods and Kubernetes Loadbalancer. You will write four YAML files. Let's start by writing the Kubernetes Deployment YAML file for the backend Node.js application.

#### Writing the Kubernetes Deployment YAML file for the Backend Node.js Application
You will create a new Kubernetes Deployment YAML file named `backend-deployment.yaml`. In this file add the following YAML code and configurations:

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
      - name: backend
        image: bravinwasike/backend
        resources:
          limits:
            memory: "256Mi"
            cpu: "500m"
        ports:
        - containerPort: 4000
```
This file will create two pods for the Backend Node.js Application. It will create a Kubernetes Deployment named "backend-deployment". It will use the `bravinwasike/backend` Docker image to create the Kubernetes application container.

#### Writing the Kubernetes Service YAML file for the Backend Node.js Application
You will create a new Kubernetes Service YAML file named `backend-service.yaml`. In this file add the following YAML code and configurations:

```yaml
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  type: LoadBalancer
  selector:
    app: backend
  ports:
  - protocol: TCP
    port: 80
    targetPort: 4000
```
This file will create a Kubernetes LoadBalancer service named "backend-service". You will use this Kubernetes LoadBalancer service to access the backend Node.js Application.

Next, let's write the Kubernetes Deployment and Service YAML file for the frontend React.js application.

#### Writing the Kubernetes Deployment YAML file for the frontend React.js Application
You will create a new Kubernetes Deployment YAML file named `frontend-deployment.yaml`. In this file add the following YAML code and configurations:

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend
        image: bravinwasike/frontend
        resources:
          limits:
            memory: "256Mi"
            cpu: "500m"
        ports:
        - containerPort: 3000
```
This file will create two pods for the frontend React.js application. It will create a Kubernetes Deployment named "frontend-deployment". It will use the `bravinwasike/frontend` Docker image to create the Kubernetes application container.

#### Writing the Kubernetes Service YAML file for the Frontend React.js Application
You will create a new Kubernetes Service YAML file named `frontend-service.yaml`. In this file add the following YAML configurations:

```yaml
apiVersion: v1
kind: Service
metadata:
  name: frontend-service
spec:
  type: LoadBalancer
  selector:
    app: frontend
  ports:
  - protocol: TCP
    port: 80
    targetPort: 3000
```
This file will create a Kubernetes LoadBalancer service named "frontend-service". You will use this Kubernetes LoadBalancer service to access the frontend React.js Application.

### Step 12: Deploy the Backend Node.js Application 
To deploy the backend Node.js application, run these commands:

```kubectl
kubectl apply -f backend-deployment.yaml
kubectl apply -f backend-service.yaml
```
This command will create the pods and Kubernetes LoadBalancer Service in the Amazon EKS cluster. It will also deploy the Node.js container application. Now you have one container running in your Amazon EKS cluster.

### Step 13: Accessing the Backend Node.js Application Container
To access the backend Node.js Application Container, run this command to get the public IP address:

```kubectl
kubectl get service
```
Output:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ikhcd02wwru0ua68eje.png)

Copy the public IP address and paste it on your browser:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbn60dkt9g757xhcging.png)

### Step 12: Deploy the Frontend React.js Application 
To deploy the frontend React.js application, run these commands:

```kubectl
kubectl apply -f frontend-deployment.yaml
kubectl apply -f frontend-service.yaml
```
This command will create the pods and Kubernetes LoadBalancer Service in the Amazon EKS cluster. It will also deploy the React.js container application.

### Step 13: Accessing the frontend React.js Application Container
To access the frontend React.js Application Container, run this command to get the public IP address:

```kubectl
kubectl get service
```
Output:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85xcqwja36ft6izdnjqr.png)

Copy the public IP address and paste it on your browser:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajwcm57zsdz1u2a8k8z1.png)

Now you have two containers running in your Amazon EKS cluster. Hence, you have achieved multi-container application deployment to Amazon EKS Cluster.

### Conclusion
In this tutorial, you have learned about how to build and deploy a React.js application with Node.js backend to Amazon EKS Cluster. You downloaded the project files for the application before running the two applications locally.

You can easily follow these steps and dockerize the application. We used the Ekctl tool to create the Amazon EKS cluster. You can get the application and Kubernetes YAML files on my [GitHub account](https://github.com/Bravinsimiyu/react-node-app).

If you like this tutorial let's connect on [Twitter](https://twitter.com/wasike_bravin). Thanks for Reading and Happy Learning.