React and Kubernetes: Step-by-Step Deployment Workflow with Docker and Helm Charts

Deploying a React application to a Kubernetes cluster can seem complex, but by following a structured workflow using Docker and Helm Charts, you can streamline the process. This guide walks you through each step to help you deploy your React app efficiently and reliably.

Prerequisites

Node.js and npm installed
Docker installed and running
Kubernetes cluster (local or cloud-based)
Helm installed
kubectl configured to access your cluster

Step 1: Build Your React Application

Start by creating or preparing your React app. Make sure it is working locally before deployment.

Build the production-ready static files:

npm run build

This generates a build directory containing static assets.

Step 2: Create a Docker Image

Write a Dockerfile to containerize your React app:

FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and tag your Docker image:

docker build -t your-username/react-app:latest .

Push the image to a container registry (Docker Hub, GitHub Container Registry, etc.):

docker push your-username/react-app:latest

Step 3: Create Kubernetes Deployment and Service

Define a deployment YAML file (react-deployment.yaml):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react
  template:
    metadata:
      labels:
        app: react
    spec:
      containers:
      - name: react
        image: your-username/react-app:latest
        ports:
        - containerPort: 80

And a service YAML (react-service.yaml) to expose the deployment:

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

Apply these configurations:

kubectl apply -f react-deployment.yaml
kubectl apply -f react-service.yaml

Step 4: Configure Helm Chart

Create a Helm chart to manage your deployment more efficiently. Use helm create react-chart to generate a scaffold.

Modify values.yaml to set your image:

image:
  repository: your-username/react-app
  tag: latest
  pullPolicy: IfNotPresent
service:
  type: LoadBalancer
  port: 80

Update deployment.yaml template as needed, then install the chart:

helm install react-release ./react-chart

Step 5: Access Your Application

Once deployed, retrieve the external IP address:

kubectl get services react-service
# or if using Helm
kubectl get svc -l app.kubernetes.io/name=react-chart

Open your browser and navigate to the provided IP to see your React app live on Kubernetes.

Conclusion

This workflow covers building a React app, containerizing it with Docker, deploying it to Kubernetes, and managing it with Helm. Following these steps ensures a scalable and maintainable deployment process for your React applications.

Table of Contents