---
# System prepended metadata

title: 'Scaling React Applications Seamlessly with Kubernetes: A DevOps Guide'

---

# Scaling React Applications Seamlessly with Kubernetes: A DevOps Guide

## Overview

Scaling React projects involves several challenges, from speed optimization to effective state management. Also, teams must adopt strong DevOps processes for efficient deployment and management. This article will examine the challenges in scaling React projects. It will also cover the need for effective DevOps practices.

![Challenges-in-Scaling-React-apps-2024-05-06-2142](https://hackmd.io/_uploads/SkQj0YvGA.png)

The above graphic illustrates the main challenges in scaling React apps. These difficulties include performance bottlenecks, complex state management, and poor deployment. As the user base grows, these problems may limit the app's growth and reliability. Kubernetes solves these issues, as the guide shows. It automates the orchestration and deployment of containerized apps, ensuring efficient, controllable scaling.

This lesson will cover Kubernetes concepts. It will also show how to use Docker to containerize, scale, and deploy React apps on Kubernetes. We will also explore Kubernetes. It can help ensure React apps are reliable and effective in production.

This article will teach readers how to scale React apps with Kubernetes. They will learn to keep them efficient and reliable.

### Challenges of Scaling React Applications and the Importance of DevOps Practices

Scaling React apps has challenges, especially as they grow in complexity and popularity. Efficient DevOps practices are key to fixing these issues.

As React apps grow, we must improve performance. We need to ensure a consistent user experience. DevOps, like CI/CD pipelines, can automate performance testing and tuning. Using monitoring tech in the DevOps toolchain will help find performance bottlenecks early. This allows for proactive adjustments.

![Performance improvement Schematic Diagram 2024-08-20 at 1.51.14 PM](https://hackmd.io/_uploads/rJ1OWMMoR.png)

The graphic outlines steps to optimize React app performance. It includes using CI/CD pipelines and monitoring tools for automated testing. This helps find bottlenecks early.

Managing state across many components gets more difficult as a React application expands. Good DevOps methods boost collaboration between development and operations teams. This helps create scalable state management solutions. Automating testing and deployment ensures state management changes are smooth and consistent.

  ![State Management 2024-08-20 at 1.45.58 PM](https://hackmd.io/_uploads/SkBVlMGsA.png)

The image shows the challenges of managing the state in a growing React app. It recommends automated testing, better state management, and DevOps for teamwork.

Maintaining a growing codebase and designing for scalability are critical. DevOps solutions include CI, automated testing, version control, and IaC. They ensure code consistency, quality, and efficient resource management. Kubernetes offers the required flexibility and scalability for containerized applications.

For more details, see [ultimate-guide-to-devops-15-best-practices.](https://sunscrapers.com/blog/ultimate-guide-to-devops-15-best-practices/)

In summary, we must use effective DevOps techniques. They are key to scaling React applications. Automating, collaborating, and monitoring at every stage of the dev and ops lifecycles ensure scalability, performance, and maintainability.

### Introducing Kubernetes as a solution for scaling React applications 

Kubernetes, or K8s, is an open-source tool. It manages containerized apps. It is a great way to handle them. It has many features that help fix scaling issues. They also speed up deployment and management tasks.

Kubernetes streamlines the scaling, management, and deployment of containerized applications. It abstracts the underlying infrastructure. This creates a single API for container management. It enables the smooth orchestration of complex application architectures.

A big problem for developing React apps is managing rising user traffic and demand. Kubernetes solves this problem with its intrinsic scalability. Kubernetes can auto-adjust your app's instance count based on resource use or metrics. This ensures your React app can handle varying loads with high efficiency.

To learn more about Kubernetes, [check out this site.](https://konghq.com/blog/learning-center/what-is-kubernetes)

## Understanding Kubernetes Basics

Kubernetes is an open-source tool. It makes it easier to deploy, scale, and manage containerized apps. Let's examine its main features and building blocks. Also, its aspects that are pertinent to scaling React apps.

###  Core Architecture and Key Components

Kubernetes uses a master-worker architecture. It has several components that work together to manage containerized apps. To learn more about Kubernetes architecture, [check out this guide.](https://www.vmware.com/topics/kubernetes-architecture).

![Performance improvement Schematic Diagram 2024-08-20 at 2.08.31 PM](https://hackmd.io/_uploads/rJAFBGGjC.png)

The figure above shows an example of a scalable Kubernetes architecture. It highlights the key elements—like `Pods` and `Kube Proxy`. They work together to keep the environment stable and scalable. The smallest deployable components, `Pods`, enclose containers. They ensure the containers can connect via `Kube Proxy` to each other and the cluster's services. This design provides a smooth way to handle growing needs. It is vital for deploying and managing applications at scale.

###  Kubernetes Features Relevant to Scaling React Application

Kubernetes' Horizontal Pod Autoscaler (HPA) adjusts Pod replicas based on demand. It uses CPU or custom metrics for this. This functionality ensures that React apps can tolerate variable loads while remaining performant.

The Deployment Controller makes it easy to manage updates. It also lets you describe your application's desired state. Use rolling updates and rollbacks to update React apps without downtime.

For more on Kubernetes features, [check out this resource.](https://kubernetes.io/)

## Setting Up Your Development Environment

Install Homebrew (macOS only):

Homebrew is a package manager for macOS that simplifies the installation of software.

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

Install Node.js and npm:

Node.js is a JavaScript runtime, while npm serves as its package manager.

For macOS:

```bash
brew install node
```

![Using brew to download nodejs 2024-06-05 at 11.48.19 PM](https://hackmd.io/_uploads/BJfRsvCEC.png)

Run the instructions below to check for `Node.js`. You should see results like those in the image.

```bash
node --version
```

![Checking version of nodejs 2024-06-06 at 12.07.58 AM](https://hackmd.io/_uploads/HkAigdREC.png)

For Windows:

Download the installer from the [Node.js official website](https://nodejs.org/en). Then, follow the installation instructions.

For Linux:

Use the package manager that corresponds to your distribution. For instance, in `Debian-based` systems.

```bash
sudo apt update

sudo apt install nodejs npm
```

Install Docker:

Docker is key for containerizing React apps. It ensures consistent performance across dev, test, and prod environments. It speeds deployment, simplifies dependency management, and enhances scalability, improving development workflow efficiency.

For macOS:

Download and install [Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/) from Docker's website. 

The image below will show you how to check if Docker is installed on your macOS.

```bash
docker --version
```

![Checking docker version  2024-07-30 at 11.19.48 AM](https://hackmd.io/_uploads/r1brKrLKC.png)

Next, run the command below to install `hyperkit`. It will ensure that your minikube starts.

```bash
brew install hyperkit
```
The term `hyperkit` refers to a hypervisor framework. Users use it to create and manage virtual machines when running Minikube on macOS. 

Hyperkit is for macOS. It uses its virtualization framework for fast VMs. It integrates with macOS, using its native features for virtual machine management. It does so without disruption. Minikube uses Hyperkit as a driver to manage its VMs. It's a recommended, well-supported choice for macOS users.

Alternatives to Hyperkit:

If you can't or don't want to use Hyperkit, there are other options for running Minikube on macOS. You can use VirtualBox, VMware Fusion, or Parallels Desktop.

### Using an Alternative Driver with Minikube:

To use an alternative driver with Minikube, specify it when starting Minikube.

For VirtualBox:

```bash
minikube start --driver=virtualbox
```

For VMware Fusion:

```bash
minikube start --driver=vmware
```

For Parallels Desktop:

```bash
minikube start --driver=parallels
```

Choose the driver based on your needs and preferences. Hyperkit is a top choice for macOS users. It has great performance and native support. 

![Installing hyperkit with brew 2024-06-06 at 12.03.16 AM](https://hackmd.io/_uploads/SyLA0wCV0.png)

If you set up Docker Desktop correctly on macOS, an image like the one below should appear.

![Front Page of Docker Desktop at 11.51.48 PM](https://hackmd.io/_uploads/B1Wm2PCNR.png)

For Windows and Linux:

Download and install Docker Desktop for Windows from [Docker's website.](https://docs.docker.com/desktop/install/windows-install/) For Linux, follow the instructions in the docker [official documentation](https://docs.docker.com/desktop/install/linux-install/) for your specific distribution.

Start Docker:

Ensure Docker is running. You should start Docker Desktop on macOS and Windows.

        

To Start Docker On Linux, and Check Docker Service:

```bash
sudo systemctl start docker
```
Install kubectl :

`kubectl` is the command-line tool for interacting with Kubernetes clusters.

For macOS:

```bash
brew install kubectl
```

![Kubectl successful download using brew at 11.57.27 PM](https://hackmd.io/_uploads/B1G_6vCEA.png)

For Windows:

Download the kubectl binary from the [Kubernetes release page](https://kubernetes.io/releases/download/). Then, follow the installation instructions.

    

For Linux:

```bash
curl -LO "https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl"

chmod +x ./kubectl

sudo mv ./kubectl /usr/local/bin/kubectl
```

Installation of Minikube :

Minikube is a powerful tool. It makes it easy to install a local Kubernetes cluster on your machine. It lets developers create and manage a Kubernetes environment on their local machines. This lets them test and develop their apps in a real Kubernetes environment, not a cloud cluster. Minikube supports many virtualization drivers. It lets you run Kubernetes on your local machine for testing, development, and learning. It's a simple way to do this.

For macOS:

```bash
brew install minikube
``` 

For Windows:

Download the Windows minikube executable file [here.](https://minikube.sigs.k8s.io/docs/start/?arch=%2Fwindows%2Fx86-64%2Fstable%2F.exe+download)

For Linux:

```bash
curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64

sudo install minikube-linux-amd64/usr/local/bin/minikube
```
Start Minikube:

Ensure Docker is running before starting Minikube.

```bash
minikube start
```

![Minikube successful installation at 12.00.08 AM](https://hackmd.io/_uploads/BJIGRvANA.png)

## Step-by-Step Guide to Set up a React Application.

Set Up a Basic React Application:

Ensure to have `Nodejs` installed, or else the commands below won't work.

    

In your terminal, create a new directory. Then, change into it. In our case, it is `my-react-app`.

```bash
mkdir my-react-app

cd my-react-app/
```

This app will be a simple React app. It will have a view that changes color like an eclipse. I will title it `EclipseView`. It depicts the concept of changing backgrounds and dark modes, like an eclipse.

Clone the repository using the command below:

```bash
git clone https://github.com/Alpheus-godswill1/scaling-a-react-app-kubectl.git
```

After cloning the repo, install all the project's libraries.

```bash
npm install 
```

To launch the project from the terminal:

```bash
npm start 
```

![npm start successfull message 2024-07-30 at 12.51.46 PM](https://hackmd.io/_uploads/SkfZN88FR.png)

The figure above shows your project is operational and reachable. The port and IP address vary by the device you are using to follow this instruction.

This involves `localhost` and `3000`. You can access it via your browser (Chrome is my favorite). Open a search tab and enter `localhost:3000`. If you run into trouble, go back to the section on cloning repositories. Then, try again with a new directory that you must make.

Clicking the `CHANGE BACKGROUND COLOR` button changes the background to the colors in the images below.

![EclipseView React App changed to a green background at 12.19.36 PM](https://hackmd.io/_uploads/S10nnSIK0.png)

![EclipseView React App changed to a Lime color background at 12.19.50 PM](https://hackmd.io/_uploads/rypTnSIFA.png)

![EclipseView React App changed to a Light Blue color background at 12.20.05 PM](https://hackmd.io/_uploads/B1rbaBUY0.png)

The code snippet below was used to create the features of the image above.

```jsx
import React, { useState } from "react";

import "./App.css";

import {
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
} from "@mui/material";

const characters = [
  "A",

  "B",

  "C",

  "D",

  "E",

  "F",

  "0",

  "1",

  "2",

  "3",

  "4",

  "5",

  "6",

  "7",

  "8",

  "9",
];

function App() {
  const [bgColor, setBgColor] = useState("#FFFFFF");

  const generateColor = () => {
    let color = "#";

    for (let i = 0; i < 6; i++) {
      color += characters[Math.floor(Math.random() * characters.length)];
    }

    setBgColor(color);
  };

  return (
    <div
      style={{
        backgroundColor: bgColor,

        minHeight: "100vh",

        transition: "background 0.5s",
      }}
    >
      <Container>
        {/* Hero Section */}

        <header style={{ padding: "50px 0", textAlign: "center" }}>
          <Typography variant="h2" gutterBottom>
            Welcome to My Fancy App
          </Typography>

          <Typography variant="h5" paragraph>
            Discover amazing features seamlessly.
          </Typography>

          <Button variant="contained" color="primary" onClick={generateColor}>
            Change Background Color
          </Button>
        </header>

        {/* Features Section */}

        <Grid container spacing={4} style={{ marginTop: "40px" }}>
          {["Feature One", "Feature Two", "Feature Three"].map(
            (feature, index) => (
              <Grid item xs={12} md={4} key={index}>
                <Card>
                  <CardContent>
                    <Typography variant="h5">{feature}</Typography>

                    <Typography>
                      Explore the {feature.toLowerCase()} of our app.
                    </Typography>
                  </CardContent>
                </Card>
              </Grid>
            ),
          )}
        </Grid>

        {/* Footer */}

        <footer
          style={{ padding: "20px 0", textAlign: "center", marginTop: "40px" }}
        >
          <Typography variant="body2">© 2024 My Fancy App</Typography>
        </footer>
      </Container>
    </div>
  );
}

export default App;
```

The above code starts with `imports`. It imports `React` and the `useState` hook to manage the app's state. The app includes `./App.css` for styling. It imports UI components from Material-UI, like `Container`, `Typography`, and `Button`. This improves the interface.

Next, we define `constants`. In particular, the `characters` array. It holds hexadecimal characters for generating random color codes.

The core of the application lies in the `App` component. It has a `bgColor` state that stores the current background color. The system initializes it to white (`#FFFFFF`). The `generateColor` function is crucial. It generates a random six-character hex color code from the `characters` array. Then, it updates the `bgColor` state.

In the `return` block, the code styles a main `div`. It applies the generated background color with a smooth transition effect (`0.5s`). It also ensures a small height of 100% of the viewport (`minHeight: '100vh'`). The `header` tag is the Hero Section. It shows a title, a subtitle, and a button. The button changes the background color. Also, the Features Section uses a `Grid` component. It renders three feature cards, each with a title and description. Finally, we include a footer to display a simple copyright notice.

In conclusion, we export the `App` component with `export default App;`. It makes it usable elsewhere in the app. This ensures smooth integration and functionality.

Our React app has a dynamic background color and a responsive layout. It uses Material-UI components for styling.

```css
body {
margin : 0;
font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
code {
font-family : source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
```

The `margin: 0;` rule in the CSS code above the `body` styling removes the webpage's default margin. This results in a smooth layout. The `font-family` attribute specifies a list of preferred fonts for the webpage text. It starts with system fonts and includes fallbacks to common web fonts. To improve text appearance on several platforms, use `-webkit-font-smoothing: antialiased;` and `-moz-osx-font-smoothing: grayscale;`. They make fonts look smoother.

The `font-family` property in `code` styling defines a list of monospaced typefaces. This makes the code snippets use a typewriter-like style. It's good for readability. This thorough stylistic approach significantly enhances the application's user experience.

## Build the React Application With Docker (Stage 1)

Create a Dockerfile:

In your React app directory, `my-react-app`, create a file named `Dockerfile`. This file will containerize the app we created with React. The `Dockerfile` below shows a multi-stage build for a React app. It uses both Node.js and `Nginx`.

```Docker
# Stage 1: Build the React application

FROM node:22-alpine3.19 AS build 

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

RUN npm run build

# Stage 2: Serve the React application with Nginx

FROM nginx:alpine

COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80

EXPOSE 80

# Start Nginx when the container starts

CMD ["nginx", "-g", "daemon off;"]
```

The Dockerfile above shows a way to build your React app in a container.

The statement `FROM node:22-alpine3.19 AS build` sets the base image for this stage. It uses a Node.js image that runs on Alpine Linux, tagged as `22-alpine3.19`. The alias `AS build` allows you to reference this build stage later in the Dockerfile.

Next, `WORKDIR /app` sets the working directory inside the container to `/app`, where all subsequent commands will be executed.

The command `COPY package.json package-lock.json ./` transfers the `package.json` and `package-lock.json` files from your host machine to the `/app` directory within the container. These files are crucial for installing the necessary dependencies.

Next, `RUN npm install` installs the Node.js dependencies in `package.json` using npm. This ensures all required libraries are available for your application.

The `COPY . .` command copies all the files from the current directory on your host machine to the `/app` directory in the container, including your React application's source code.

Finally, `RUN npm run build` executes the `build` script specified in `package.json`. This script builds your React app into static files (HTML, CSS, JS) optimized for production. It usually puts the output in a `build` directory. This process encapsulates your app in a container, making it ready for deployment.

### Serve the React Application with Nginx (Stage 2)

In this stage of the Dockerfile, we set up Nginx. It will serve the static files from the previous build stage.

The instruction `FROM nginx:alpine` sets the base image for this stage. It is an Nginx image running on Alpine Linux. Alpine is lightweight and optimized for serving static content.

The command `COPY --from=build /app/build /usr/share/nginx/html` transfers the contents of the `/app/build` directory from the earlier `build` stage to the Nginx container's `/usr/share/nginx/html` directory, the default for serving static files in Nginx.

The `EXPOSE 80` command documents that the container will listen on port 80 at runtime. This is important for HTTP traffic. It tells users and apps which port to use.

Finally, `CMD ["nginx", "-g", "daemon off;"]` specifies the command that runs when the container starts. Running `nginx -g 'daemon off;'` starts Nginx in the foreground. This keeps the container active while the Nginx service runs. This setup consistently serves the static files of your React app to users.

Use the command  to containerize the react application using the docker file: 

```bash
docker build -t my-react-app:latest .
```

![Screenshot 2024-07-30 at 1.51.37 PM](https://hackmd.io/_uploads/S1yHMvLtA.png)

After building the image without errors, you should have a view like the one above. To confirm our image exists in Docker image storage, we will use the command below.

```bash
docker images 
```

![Docker images currently in docker image storage at 1.56.33 PM](https://hackmd.io/_uploads/B1g-HPUtC.png)

You will need to log in first to ensure you are logged in from the terminal to proceed with this guide.

```bash
docker login 
```

![Docker login message on the terminal 2024-07-31 at 4.33.31 PM](https://hackmd.io/_uploads/HJ8wY0DY0.png)

Now we will tag the image we built with the name `my-react-app`, which has the tag `latest`, with our remote Docker hub repo. Mine is `alpheusgodwill1`. Yours will be different, so change it before tagging the image.

We will also push our tagged image to our repository.

![Docker hub repository with username highlighted 2024-07-31 at 4.42.15 PM](https://hackmd.io/_uploads/BkP6s0Dt0.png)

Once you tag and push the image you should have an image like the one below.

Command to tag the image:

```bash
docker tag my-react-app:latest alpheusgodswill1/react-app:latest
```

Command to push the image: 

```bash
docker push alpheusgodswill1/react-app:latest
```

![Tagging and pushing an image to docker repo 2024-07-31 at 4.38.01 PM](https://hackmd.io/_uploads/SkPwh0PY0.png)

Now let's run the container we built and list the running container.

Command to run container and bind container port to local system port:

```bash
docker run -d -p 80:80 alpheusgodswill1/react-app:latest
```

To see the content of the container using your browser access the port using the URL`http://localhost:80`.

![Accessing the container using the binded port 2024-08-01 at 4.08.34 PM](https://hackmd.io/_uploads/B1MzHmYKR.png)

Command to list running containers:

```bash
docker ps
```

![Running docker container and listing container 2024-07-31 at 4.51.44 PM](https://hackmd.io/_uploads/S1xGQ1y_KR.png)

Now we want to deploy this container to our `Kubernetes` cluster. First, check the status of Minikube. Minikube is a tool that simplifies the process of running Kubernetes clusters locally. It is a standard tool for development and testing purposes. 

Command to check minikube status:

```bash
minikube status
```

![Minikube status 2024-07-31 at 5.03.50 PM](https://hackmd.io/_uploads/ByZKek_FC.png)

Command to start minikube:

```bash
minikube start
```

![Minikube start successful message 2024-08-01 at 4.03.20 PM](https://hackmd.io/_uploads/rJurB7FYC.png)

We will deploy this project, which we have containerized, to a Kubernetes cluster. So, we have ensured that Minikube is running for smooth work with Kubernetes. We must write a Kubernetes manifest. It will deploy our React Docker container to our Kubernetes cluster.

This script will be in `YAML` (YAML Ain't Markup Language). It is a human-readable data format. Developers use it for config files and for data exchange between languages with different data structures. It is often used in conjunction with other tools and systems due to its readability and ease of use.

### Explanation of Our YAML Configuration Script

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app-deployment
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
        - name: react-app
          image: alpheusgodswill1/react-app:latest
          ports:
            - containerPort: 5059
          resources:
            requests:
              cpu: 100m
              memory: 128Mi
            limits:
              cpu: 500m
              memory: 512Mi
```

The YAML configuration above is for deploying a React application in Kubernetes. It uses the `apps/v1` API version, which is the stable version for deployments. The resource type is `Deployment`. It manages a set of pod replicas to ensure the desired number of pods are running. The `metadata` section has details about the deployment. It includes its name (`react-app-deployment`) and the namespace (`default`).

The `spec` section defines how the deployment should behave. It specifies that there should be one replica of the pod running. It also includes a selector. It finds the pods managed by this deployment by looking for the label `app: react-app`. The `template` section describes the pods created by this deployment. It includes metadata with labels and the pod specification. The pod will run a container named `react-app`. It will use the Docker image `alpheusgodswill1/react-app:latest`. 

The container will listen on `port` 5059. The resources section sets limits and requests for the container. It requires a minimum of 100 `milliCPU` units and 128 `MiB` of memory, and it can use up to 500 `milliCPU` units and 512 `MiB` of memory.

Checking Kubernetes cluster info and ensuring it's running:

Command to check cluster info:

```bash
kubectl cluster-info
```

![Kubernetes cluster-info 2024-08-02 at 9.50.15 AM](https://hackmd.io/_uploads/H1dhAGqKR.png)

Applying our YAML configuration to Kubernetes: 

Command to apply the configuration:

```bash
kubectl apply -f k8s-deployment.yaml
```

![Kubernetes cluster info 2024-08-02 at 10.05.50 AM](https://hackmd.io/_uploads/BJx3HmqFC.png)

Checking our cluster for our successful deployment:

```bash
kubectl get deployments 
```

![Kubernetes cluster deployment 2024-08-02 at 12.31.32 PM](https://hackmd.io/_uploads/Hkm2QScYR.png)

### Scaling the react application in our Kubernetes cluster

Command to scale replicas are shown below:

```bash
kubectl scale deployment/react-app-deployment --replicas=6
```

Command to get current running replicas:

![Checking number of running replicas 2024-08-02 at 1.08.49 PM](https://hackmd.io/_uploads/HJys2rqFA.png)

The command `kubectl scale deployment/react-app-deployment --replicas=7` changes the number of replicas for a Kubernetes deployment. Here’s a breakdown of what this command does:

### Breakdown of the Command

The `kubectl` command-line tool is essential for interacting with the Kubernetes cluster. It lets you deploy apps, scale deployments, and retrieve info.

The `scale` sub-command of `kubectl` lets users change the number of replicas of a deployment, stateful set, or other scalable resources. 

`deployment/react-app-deployment` specifies a resource type (deployment) and its name (react-app-deployment) to scale. In this case, `react-app-deployment` is the name of your deployment.

The `--replicas=7` flag tells Kubernetes to run 7 replicas of the app. This makes sure that the replicas keep your app in the desired state.

### What Happens When You Run This Command

To scale the deployment, set the `react-app-deployment` pods to 7, the desired replicas. If there are fewer than 7 replicas, Kubernetes will create pods to meet the desired count. If there are more than 7 replicas, Kubernetes will stop the extra pods to achieve the desired state.

Kubernetes manages pods. It ensures the number of running pods matches the desired count. Kubernetes manages pods to maintain the desired number of replicas. It creates and terminates them as needed. This ensures the deployment proceeds without issues.

Resource allocation changes with the number of replicas. More replicas will use more resources in your Kubernetes cluster. More pods will be running. Fewer replicas will conserve resources. So, resource allocation is vital when managing deployments.

## Monitoring and Logging Using Kubernetes Metric Server

The Kubernetes Metrics Server collects CPU and memory usage metrics from all nodes and pods in the cluster. It then combines them. The Horizontal Pod Autoscaler (`HPA`) needs it for auto-scaling and monitoring.

To set up the Kubernetes Metrics Server, you must first install the Metrics Server. You can do this by straightforwardly applying the Metrics Server manifest.

Using Kubernetes Manifest:

This step is for those using a cloud-based Kubernetes cluster, not Minikube.

```bash
kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml
```

![Installation of Metrics Server 2024-08-07 at 4.20.35 PM](https://hackmd.io/_uploads/ryyMbfWcC.png)

If your minikube cluster is not a cloud-based Kubernetes cluster, enable minikube addons. This will let the Metrics Server run without failures or crashes.

```bash
minikube addons enable metrics-server
```

![Enabling Minikube addons 2024-08-07 at 4.28.52 PM](https://hackmd.io/_uploads/rkvAGzZ5R.png)

Use these commands to check the Metrics Server. Ensure it is running:

```bash
kubectl get pods -n kube-system | grep metrics-server
```

![Metrics Server Status 2024-08-07 at 3.32.38 PM](https://hackmd.io/_uploads/rythBWZcR.png)

Make sure metrics are being gathered and confirm that they are being collected:

```bash
kubectl top nodes

kubectl top pods
```

![Checking Metrics collection 2024-08-07 at 3.34.04 PM](https://hackmd.io/_uploads/BkMZUW-cR.png)

## Configuring Horizontal Pod Autoscaler (HPA)

Create HPA Resource:

Define an HPA for your deployment to automatically scale based on `CPU` or memory usage. Below is an example `YAML` file for an `HPA` that scales a React application deployment based on `CPU` usage. The `HPA` scales by comparing the pod's current `CPU` usage to the `CPU` request in the pod's config. If usage is above or below the target, it adjusts the number of pod replicas to manage the load.

Our deployment manifest, the first in this article, specifies a CPU resource. It is crucial. If done wrong, the processes below will fail.

    

### Our deployment manifest's CPU resource specification is essential because:

Scaling Decisions use the Horizontal Pod Autoscaler (HPA). It uses the CPU request to decide whether to scale up or down. Accurate requests help the HPA make proper scaling decisions.

Resource Allocation is defined by the request value. It specifies how much CPU the pod is guaranteed. This directly affects the pod's performance and stability.

Effective Load Management requires setting appropriate CPU requests. If the request is too low, the HPA might not scale up enough under heavy load. Conversely, if the request is too high, resources might be wasted.

Setting appropriate CPU requests ensures efficient resource use and effective scaling.

## Horizontal Pod Autoscaler (HPA) Details

```yaml
apiVersion: autoscaling/v1
kind: HorizontalPodAutoscaler
metadata:
  name: react-app-hpa
  namespace: default
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: react-app-deployment
  minReplicas: 1
  maxReplicas: 10
  targetCPUUtilizationPercentage: 50   
```

Apply this YAML file:

```bash
kubectl apply -f hpa-configuration.yaml
```

![Screenshot 2024-08-07 at 4.02.15 PM](https://hackmd.io/_uploads/HJMq2bZ9A.png)

Verify HPA Configuration:

Check the status of your HPA, using the command below:

```bash
kubectl get hpa
```

This command will show the current CPU usage and scaling info for your react app.

![HPA status 2024-08-07 at 4.04.15 PM](https://hackmd.io/_uploads/HkFG6Z-cA.png)

This is from the `kubectl get hpa` command. It shows info about the Horizontal Pod Autoscaler (HPA) in Kubernetes. 

Here’s a breakdown of each part:

The `autoscaling` API group manages the HorizontalPodAutoscaler (HPA) resource. It is associated with the `react-app-deployment`. It specifies `Deployment/react-app-deployment` in its `Reference` section. The HPA monitors and scales the deployment based on metrics. The HPA's `Targets (Resource Request)` show `CPU: 0%/50%`. It shows the current CPU usage of the pods compared to the target. The `Minpods` setting indicates a minimum of 1 pod replica. The `Maxpods` setting indicates the maximum number of pod replicas the HPA can scale up to. The `Replicas` value is the current number of pod replicas in the deployment. The HPA adjusts it based on metrics and the scaling policy. The `Age` of the HPA resource is `5h48m`, indicating its active duration since its creation.

## Monitoring React Application Metrics

Check Resource Utilization:

You can use `kubectl top` to view the CPU and memory usage of your pods and nodes.

```bash
kubectl top pods

kubectl top nodes
```
![Monitoring Resource Utilization 2024-08-07 at 3.34.04 PM](https://hackmd.io/_uploads/BkMZUW-cR.png)

Access Metrics:

The HPA can access metrics from the Metrics Server. Use `kubectl get all` to access them.

```bash
kubectl get all
``` 

![Accessing all Resource of the cluster 2024-08-07 at 3.48.01 PM](https://hackmd.io/_uploads/H1gUYW-cC.png)

## Conclusion

React apps must scale to handle changing traffic and maintain performance. Kubernetes solves the scaling issues of React apps. It is a great platform for managing and scaling containerized apps. The HPA (Horizontal Pod Autoscaler), pods, and deployments are key Kubernetes parts. They let developers ensure high availability and easy scalability. Docker can containerize React apps. Using Kubernetes to deploy them helps control their lifecycle and performance. Also, data-driven scaling and app health depend on good monitoring and recording. Adopt these principles to make React app deployments scalable, reliable, and manageable.

## Further Reading

To learn about scaling React apps with Kubernetes, read this [guide on Scaling Applications with Kubernetes](https://zeet.co/blog/master-kubernetes-scaling-expert-tips-for-hpa-vpa-cluster-autoscaling-and-more). For more tips on containerizing your React apps, see this [link](https://www.docker.com/blog/8-top-docker-tips-tricks-for-2024/). Additionally, ensure effective monitoring for backend applications and logging by following the setup in [Setting Up Prometheus Monitoring on Kubernetes](https://devopscube.com/setup-prometheus-monitoring-on-kubernetes/). For advanced scaling techniques, explore [Autoscaling Kubernetes Workloads with KEDA](https://aws.amazon.com/blogs/mt/autoscaling-kubernetes-workloads-with-keda-using-amazon-managed-service-for-prometheus-metrics/) and adhere to Kubernetes Deployment Best Practices for efficient resource management. 

