Deploying a React App on Kubernetes: A Quick Guide

Tadikonda Sai Manikanta — Thu, 07 Mar 2024 12:48:38 +0000

Have you ever wondered how applications transition from basic code to containers and then onto Kubernetes? In this blog, we will delve into how that process truly works!

Tech stack and Tools

React for building the front end
Docker for containerization
Kubernetes for orchestration
kubectl for Kubernetes command-line management
Minikube for local Kubernetes cluster setup

Setting Up the React App

Creating React App



 npx create-react-app client

Starting the React App



 cd client
 npm start

Containerizing with Docker

Navigate to the client directory where your React app resides.



cd client

Create a file named Dockerfile and open it for editing.



touch Dockerfile

vim Dockerfile

Dockerfile Content to Create a Docker Image



# Use an official Node runtime as a base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to 
# the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the app's source code to the working directory
COPY . .

# Expose the port that the app will run on
EXPOSE 3000

# Define the command to run your app
CMD ["npm", "start"]

Building the Docker Image



docker build -t k8s-react .

Testing the Docker Image Locally



docker run -p 3000:3000 k8s-react

Push Docker Image to Docker Hub

To push the Docker image to Docker Hub, tag it with your Docker Hub username and repository name, and then push it



docker tag k8s-react:latest saitadikonda99/my-react-app:latest



docker push saitadikonda99/my-react-app:latest

Deploying to Kubernetes

To install kubectl refer the following document : Document Link
To install minikube refer the following document : Document Link

Starting Minikube

Start Minikube using the following command



minikube start

Creating YAML files

Create a file named deploy.yaml and open it for editing. You can follow these commands



touch deploy.yaml



vim deploy.yaml

Deployment Configuration for React Application in Kubernetes



apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: react-app
  template:
    metadata:
      labels:
        app: react-app
    spec:
      containers:
        - name: react-app
          image: saitadikonda99/my-react-app:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 80

Expose the deployment using a Kubernetes service. Create a service YAML file. follow the below commands



touch service.yaml



vim service.yaml



apiVersion: v1
kind: Service
metadata:
  name: react-app
spec:
  type: NodePort
  selector:
    app: react-app
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
      nodePort: 31000

Apply the YAML file to deploy the React app to Kubernetes



kubectl apply -f deploy.yaml

kubectl apply -f service.yaml

To check pods and nodes in a Kubernetes cluster and to see a locally deployed service using Minikube, follow these steps

To list all the pods in the default namespace, you can use the command



kubectl get pods

To view information about nodes in the cluster, you can use



kubectl get nodes

Accessing Minikube Dashboard

To access the Minikube dashboard and check pods, run the following command



minikube dashboard

Viewing Locally Deployed Services

View the Deployment



kubectl get deployments

The output is similar to:



NAME        READY   UP-TO-DATE   AVAILABLE   AGE
react-app   2/2     2            2           5m25s

By default, the Pod is only accessible by its internal IP address within the Kubernetes cluster
Expose the Pod to the public internet using the kubectl expose command



kubectl expose deployment react-app --type=NodePort --port=3000



minikube service react-app

This opens up a browser window that serves your app and shows the app's response.

DEV Community: Tadikonda Sai Manikanta

Deploying a React App on Kubernetes: A Quick Guide