DEV Community

Cover image for Building and Deploying a React App on Kubernetes
Soumen Bhunia
Soumen Bhunia

Posted on

Building and Deploying a React App on Kubernetes

#devops #react #kubernetes #docker

In this blog, I’ll walk you through the complete process of creating a React app, containerizing it with Docker, and deploying it to a Kubernetes cluster using Minikube.

Step 1: Creating a New React App

First, I created a new React application using the create-react-app tool:

npx create-react-app testapp
Enter fullscreen mode Exit fullscreen mode

During the creation, I saw some deprecation warnings about certain Node modules. This is because create-react-app is deprecated, but it’s still usable for learning purposes.

After the installation, the app was created in the testapp folder. I confirmed this by checking that these scripts were available:

  • npm start – to start the development server.
  • npm run build – to create a production build.
  • npm test – to run tests.

Step 2: Running the App Locally

I switched to the project directory:

cd testapp
Enter fullscreen mode Exit fullscreen mode

Then, I started the development server:

npm start
Enter fullscreen mode Exit fullscreen mode

This successfully launched the React app locally at http://localhost:3000.

Step 3: Writing a Dockerfile

To containerize the app, I created a Dockerfile in the project root directory (testapp):

FROM node

WORKDIR /myapp

COPY . .

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]
Enter fullscreen mode Exit fullscreen mode

Here’s what’s happening:

✅ FROM node – Using the official Node.js image.
✅ WORKDIR /myapp – Setting the working directory inside the container.
✅ COPY . . – Copying project files to the container.
✅ RUN npm install – Installing dependencies.
✅ EXPOSE 3000 – Exposing port 3000 for the app.
✅ CMD ["npm", "start"] – Default command to run when the container starts.

Step 4: Building the Docker Image

I built the Docker image and tagged it:

docker build -t nextgensoumen/webapp-demo .
Enter fullscreen mode Exit fullscreen mode

After building, I confirmed the image was created:

docker images
Enter fullscreen mode Exit fullscreen mode

Step 5: Pushing the Image to Docker Hub

To make the image accessible to Kubernetes, I pushed it to my Docker Hub account:

docker login
docker push nextgensoumen/webapp-demo
Enter fullscreen mode Exit fullscreen mode

This ensures that Kubernetes can pull the image from the Docker registry.

Step 6: Deploying the App on Kubernetes

I used kubectl to create a deployment:

kubectl create deployment my-webapp --image=nextgensoumen/webapp-demo:latest
Enter fullscreen mode Exit fullscreen mode

Then, I checked the status:

kubectl get deployments
kubectl get pods
Enter fullscreen mode Exit fullscreen mode

Initially, the pod status showed ContainerCreating, which means it was pulling the image and setting up.

Step 7: Exposing the Deployment as a Service

To access the app from outside the cluster, I exposed the deployment as a LoadBalancer service:

kubectl expose deployment my-webapp --type=LoadBalancer --port=3000
Enter fullscreen mode Exit fullscreen mode

I verified the service:

kubectl get services
Enter fullscreen mode Exit fullscreen mode

Step 8: Accessing the App with Minikube

Since I was using Minikube, I used the minikube service command to get the service URL:

minikube service my-webapp
Enter fullscreen mode Exit fullscreen mode

Minikube provided a local URL, e.g., http://127.0.0.1:63339, that I could open in the browser to see my React app running in the cluster!

Optional: Rebuilding and Redeploying

After some updates, I built a new Docker image with a different tag:

docker build -t nextgensoumen/webapp-demo:01 .
docker push nextgensoumen/webapp-demo:01
Enter fullscreen mode Exit fullscreen mode

Then, I updated the deployment in Kubernetes to use the new image:

kubectl set image deployment/my-webapp my-webapp=nextgensoumen/webapp-demo:01
Enter fullscreen mode Exit fullscreen mode

Main points

Created a React app with create-react-app.
Containerized it using Docker with a simple Dockerfile.
Pushed the image to Docker Hub for accessibility.
Deployed it on Kubernetes using kubectl.
Exposed the service with a LoadBalancer for external access.
Used Minikube to tunnel and access the service locally.

Bonus Tips

  • Watch for Deprecated Packages: During npm install, there were many deprecation warnings. Consider using newer React frameworks like Vite or Next.js for future projects.
  • Keep Docker Images Lean: Use node:alpine or multi-stage builds to reduce image size.
  • Manage K8s Resources: Use kubectl delete to remove deployments and services when done.
  • Use kubectl rollout status: Helpful for checking deployment updates: 
  kubectl rollout status deployment/my-webapp
Enter fullscreen mode Exit fullscreen mode

Example: Rolling Back a Failed Deployment

Let’s imagine I tried to update my app’s image to a non-existent version:

kubectl set image deployment/my-webapp my-webapp=nextgensoumen/webapp-demo:08
Enter fullscreen mode Exit fullscreen mode

Since the nextgensoumen/webapp-demo:08 tag doesn’t exist in Docker Hub, Kubernetes couldn’t pull the image.

When I checked the pods:

kubectl get pods
Enter fullscreen mode Exit fullscreen mode

I saw something like:

NAME                          READY   STATUS             RESTARTS   AGE
my-webapp-85d74c444f-abcde   0/1     ImagePullBackOff   0          1m
Enter fullscreen mode Exit fullscreen mode

This means Kubernetes was unable to pull the image and couldn’t start the container.

I also checked the rollout status:

kubectl rollout status deployment/my-webapp
Enter fullscreen mode Exit fullscreen mode

It showed:

Waiting for deployment "my-webapp" rollout to finish: 1 old replicas are pending termination...
Enter fullscreen mode Exit fullscreen mode

Kubernetes was stuck because it couldn’t successfully start new pods.

Rolling Back to a Previous Working Version

To fix this, I rolled back the deployment to the previous known good version:

kubectl rollout undo deployment/my-webapp
Enter fullscreen mode Exit fullscreen mode

This command restored the previous working image automatically. After the rollback, I checked the rollout status again:

kubectl rollout status deployment/my-webapp
Enter fullscreen mode Exit fullscreen mode

It showed:

deployment "my-webapp" successfully rolled out
Enter fullscreen mode Exit fullscreen mode

The app was now back to its previous stable version and running smoothly!

Thanks for Reading!

Hope this gives you some perspective.

Coming Up Next:

More hands-on cloud projects and DevOps tips — stay tuned!

Let’s Connect:

Share your thoughts in the comments or reach out on LinkedIn. Your feedback means a lot!

GitHub Code

You can find the complete source code for this project on my GitHub:

GitHub Repository: testapp React Docker K8s Example

Top comments (0)