Deploying a React Application in Kubernetes

Kubernetes is an open-source free manager for your computer program. These programs can be in the containers. Each container holds a program and everything it needs to run. To Keep track of all these containers that contain your application this is where the Kubernetes role comes in. Kubernetes does this for us. It can automate, scale, and manage the deployment of our application. Some Terms are there you need to go through it. So during deployment, you can understand how it helps.

So, if you have built your awesome React app, and now you want to share it with the world. With the help of Kubernetes you can easily deploy it. In this guide we will break down how to take your react app and deploy it into Kubernetes, making it accessible to anyone with an internet connection.

Deployment in Kubernetes

Let's see the following terms what they are and how they help us to deploy our app on Kubernetes.

• Docker: Think of docker as a special container. It helps us to put our app and all its stuff in this container. This makes easy to move our app from one place to another. We need docker to containerize our application with all the dependencies needed to run our app. so that it will be easily run on any machine.
• Docker Desktop: It is a user-friendly tool that provides us an environment for building and maintaining containerized apps using Docker Desktop. this tool makes it easy for containerization as well as for creating a cluster in Kubernetes.
• Kubernetes(K8s): Kubernetes is an open-source application manager. It is like a boos that organizes apps, keeps them safe and makes sure that they are always available. It is designed to work with containers. Creates a cluster for deployment and makes it accessible to others.
• Kubectl: It is a kubectl command line tool used to interact with Kubernetes clusters.
• Kubernetes Cluster: Think of a Kubernetes cluster as a team of computers (nodes) that work together to manage your applications. It's like a group of specialized workers who take care of your apps.
• Deployment : A resource that manages the desired state of container, ensures specific no of replica running at all times.
• Service File : A resource that provides a stable network endpoint to access a set of pods. Services enable load balancing and service discovery.
• Pod: Smallest unit in kubernetes a pod can contain one or more containers that share the same network and storage usage.

Steps To Build & Deploy React App on Kubernetes

Lets begin deploying it locally on kubernetes using docker desktop. Follow each steps carefully.

Step 1: Create a simple react application by following command. if you have yours then you can skip this step.This will create our simple react app and lets try to run it whether it is running successfully.

npx create-react-app react-kubernetes

cd react-kubernetes # change your directory

npm install

npm start

Step 2: Create a Dockerfile inside projects root directory and add below content to it.

FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Step 3: Open Docker Desktop in background. and hit following command to build the docker image using above created Dockerfile.

docker build -t my-simple-app <space> .

You can check if the docker image has created successfully or not . by entering docker images command in the terminal.At this stage, we have dockerized our application, and you can check if it running by hitting this command . this will run the created docker image specified port.

docker run -d -p 3000:3000 my-simple-app .

Step 4: Deploying docker image to kubernetes:

Now, we have containerized our application with required dependencies itself. At this step, we have to provide details about deployment such as on which port our application should listen? how many containers should run? which docker image to deploy ? and some other configuration data that needed for more complex applications.

Create Deployment.yaml file in root directory with following content.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
        - name: react-app-container
          image: my-simple-app  # Use the image name and tag you built earlier
          ports:
            - containerPort: 3000  # Adjust the port as needed

Create a service.yaml file in projects root directory.

apiVersion: v1
kind: Service
metadata:
  name: react-app-service
spec:
  selector:
    app: react-app
  ports:
    - protocol: TCP
      port: 80  
      targetPort: 8080
  type: LoadBalancer 

Enable Kubernetes from Docker Desktop.

Enter Following commands in the terminal to start cluster and apply the configuration. it will deploy and run our application in that cluster with the configuration specified in deployment.yaml and service.yaml files.

• Open another separte terminal and start the kubectl.

kubectl start

• Switch Context to Docker Desktop

kubectl config use-context docker-desktop

• Apply this configuration to kubernetes cluseter.

kubectl apply -f deployment.yaml

kubectl apply -f service.yaml

• From the configuration, kubernates understands and start running the pods. you check them running by hitting kubectl get pods.

• To run our application, you can hit this command kubectl service my-simple-app-service (name specified in service file).

• Visit the urls to check if our application runs successfully in kubernetes.

This is how you can deploy the React application on kubernetes cluster. Some doubts about react deployment have been covered in below questions.