Deploying a React App on Kubernetes: A Quick Guide
Tags: react, kubernetes, docker, devops
Published: 2024-03-07 12:48:38

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
```

 
![docker image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nftcur2gf7ca0g9plb2.png)

**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](https://kubernetes.io/docs/tasks/tools/)

- To install minikube refer the following document : [Document Link](https://minikube.sigs.k8s.io/docs/start/)

**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
```

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

**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.

![k8s output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thdqyc1jfcszkayutoe0.png)