DEV Community: Soumen Bhunia

Building and Deploying a React App on Kubernetes

Soumen Bhunia — Wed, 28 May 2025 15:56:39 +0000

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

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

Then, I started the development server:

npm start

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"]

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 .

After building, I confirmed the image was created:

docker images

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

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

Then, I checked the status:

kubectl get deployments
kubectl get pods

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

I verified the service:

kubectl get services

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

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

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

kubectl set image deployment/my-webapp my-webapp=nextgensoumen/webapp-demo:01

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

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

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

I saw something like:

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

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

It showed:

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

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

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

kubectl rollout status deployment/my-webapp

It showed:

deployment "my-webapp" successfully rolled out

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

Deploy My First Node.js App on AWS: EC2 + Docker + RDS MySQL Explained

Soumen Bhunia — Tue, 20 May 2025 11:52:34 +0000

Hi everyone,
My name is Soumen Bhunia. This is my first blog. In this blog, I build and deploy my first Node.js app using Docker, hosted on an AWS EC2 instance, and connected to a MySQL database hosted via Amazon RDS

Technologies Used

Node.js – JavaScript runtime to build the server-side app
Docker – For containerizing the Node.js app
Amazon EC2 – Virtual server for running the Docker container
Amazon RDS (MySQL) – Managed MySQL database service
AWS Security Groups – For access control to EC2 and RDS

Step-by-Step Setup Guide

Step 1: Create an RDS MySQL Instance

Go to Amazon RDS Console.
Click Create Database.
Choose:
- Engine type: MySQL
- Use case: Free Tier
Under Settings:
- Set a DB instance identifier
- Master username: admin
- Master password: Set a secure password (avoid special characters like @, %, etc.)
In Connectivity:
- Enable Public access = Yes (for development purposes)
- Create a new VPC security group
- Add an inbound rule to allow MySQL/Aurora (port 3306) from Anywhere (0.0.0.0/0)

After RDS is created, copy the endpoint/hostname — you'll use it to connect your app to the database.

Step 2: Launch and Configure an EC2 Instance

Go to Amazon EC2 Console.
Launch a new instance:
- Amazon Linux 2 AMI (Free Tier eligible)
- Choose t2.micro (Free Tier)
In Security Group, allow:
- HTTP (port 80) – for web traffic
- SSH (port 22) – for connecting to the instance
- Optional: Restrict access by IP for SSH

Step 3: Install Docker on EC2

Once connected to EC2, run the following:

sudo yum update -y
sudo yum install -y docker
sudo service docker start
sudo usermod -aG docker ec2-user

Important: Log out and log back in to activate Docker permissions for ec2-user.

Step 4: Run the Dockerized Node.js App

Pull the Docker image:

sudo docker pull philippaul/node-mysql-app:02

Then run your container, replacing the values with your actual RDS credentials:

docker run --rm -p 80:3000 \
-e DB_HOST="your-db-endpoint.rds.amazonaws.com" \
-e DB_USER="admin" \
-e DB_PASSWORD="your-db-password" \
-d philippaul/node-mysql-app:02

Your app should now be accessible at your EC2 public IP on port 80.

Web interface screenshot

Optional: Test the MySQL Connection

You can test connecting to the database from inside EC2 using a MySQL Docker client:

docker run -it --rm mysql:8.0 mysql \
-h your-db-endpoint.rds.amazonaws.com \
-u admin -p

Enter your password when prompted. If you connect successfully — your EC2 can talk to your RDS instance.

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!