React Kubernetes Deployment Tutorial: Building Scalable React Apps with Helm and K8s

by

Deploying React applications on Kubernetes (K8s) has become a popular approach for building scalable and resilient web apps. This tutorial guides you through the process of deploying a React app using Helm, a package manager for Kubernetes, to streamline the deployment and management process.

Prerequisites

  • Basic knowledge of React.js
  • Understanding of Kubernetes concepts
  • Installed Docker, Kubernetes cluster (Minikube, Docker Desktop, or cloud provider)
  • Helm installed on your local machine
  • Access to a terminal or command prompt

Step 1: Create a React App

Start by creating a new React application if you haven’t already. Use Create React App for quick setup:

npx create-react-app my-react-app

Navigate into your project directory:

cd my-react-app

Step 2: Build the React App

Build your React app for production:

npm run build

Step 3: Create a Docker Image

Write a Dockerfile in your project root:

FROM node:14-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

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

Build the Docker image:

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

Step 4: Push the Docker Image to a Registry

Tag and push your image to Docker Hub or another container registry:

docker tag my-react-app:latest your-dockerhub-username/my-react-app:latest

docker push your-dockerhub-username/my-react-app:latest

Step 5: Create Helm Chart

Initialize a new Helm chart:

helm create react-app

Configure values.yaml

Edit react-app/values.yaml to set your image:

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

Step 6: Deploy with Helm

Install your Helm chart to deploy the React app:

helm install react-app ./react-app

Check the deployment status:

kubectl get svc

Step 7: Access Your React App

If your service type is LoadBalancer, retrieve the external IP:

kubectl get svc react-app

Open your browser and navigate to the external IP address to see your React app running on Kubernetes.

Conclusion

Using Helm to deploy React applications on Kubernetes simplifies management and scaling. With this setup, you can easily update your app, roll back changes, and scale horizontally as needed. This approach is ideal for production environments requiring high availability and performance.