DEV Community

Cover image for Running a react app on Local Kubernetes cluster on Windows 10
Narendra Kumar Vadapalli
Narendra Kumar Vadapalli

Posted on

Running a react app on Local Kubernetes cluster on Windows 10

#kubernetes #react #windows #devops

Click here for Original Post

Prerequisites

Won't be covering the installation process of Docker Desktop and enabling the WSL2 backend here in this blog. Assumption is that readers can figure out the process from the given resources on their own. I might cover those topics in detail if there is enough demand in future blogs.

Make sure you are running Linux Containers Backend in Docker Desktop after installing it.

minikube start

minikube setups up a local kubernetes cluster for development on local host (in this case windows).

Since we will be using a local docker image and bypassing the need to push to a docker registry and then specifying the same during deployment on kubernetes, --insecure-registry=10.0.0.0/24 is used.

Why 10.0.0.0/24? Checkout

Run the following command to start the local kubernetes cluster in a powershell (preferably admin powershell)

minikube start --insecure-registry="10.0.0.0/24"
Enter fullscreen mode Exit fullscreen mode

Sample Output

❯ minikube start --insecure-registry="10.0.0.0/24"

* minikube v1.18.1 on Microsoft Windows 10 Pro 10.0.21332 Build 21332
* Using the docker driver based on existing profile
* Starting control plane node minikube in cluster minikube
* Restarting existing docker container for "minikube" ...
* Preparing Kubernetes v1.20.2 on Docker 20.10.3 ...
* Verifying Kubernetes components...
  - Using image kubernetesui/dashboard:v2.1.0
  - Using image kubernetesui/metrics-scraper:v1.0.4
  - Using image gcr.io/k8s-minikube/storage-provisioner:v4
* Enabled addons: storage-provisioner, dashboard, default-storageclass
* Done! kubectl is now configured to use "minikube" cluster and "default" namespace by default
Enter fullscreen mode Exit fullscreen mode

Create React app

Make sure that node and npm are installed in the windows environment

❯ node -v
v15.11.0

❯ npm -v
7.6.3
Enter fullscreen mode Exit fullscreen mode

Then use npx create-react-app test-react-app to create a test react application

❯ npx create-react-app test-react-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

Creating a new React app in D:\work\test-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
Enter fullscreen mode Exit fullscreen mode

Finally check to see that app is running as expected
Alt Text

Configure minikube docker local environment

Run the following command to set the local configuration for making the development iteration easier by using the local docker images.

NOTE
This stays local to your powershell terminal in which we run the following command

& minikube -p minikube docker-env | Invoke-Expression
Enter fullscreen mode Exit fullscreen mode

For anyone curious, Run minikube docker-env to see the actual commands that are getting run

❯ minikube docker-env
$Env:DOCKER_TLS_VERIFY = "1"
$Env:DOCKER_HOST = "tcp://127.0.0.1:52175"
$Env:DOCKER_CERT_PATH = "C:\Users\Naren\.minikube\certs"
$Env:MINIKUBE_ACTIVE_DOCKERD = "minikube"
# To point your shell to minikube's docker-daemon, run:
# & minikube -p minikube docker-env | Invoke-Expression
Enter fullscreen mode Exit fullscreen mode

Dockerize the react application

Simplest way to create a docker image of a react app is to add the following files to the root of the application folder (repository in case of git)

Alt Text

Dockerfile

FROM node:10-alpine as build-step

RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build

FROM nginx:1.17.1-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

.dockerignore

/node_modules
/build
.git
*.md
.gitignore
Enter fullscreen mode Exit fullscreen mode
Docker Build the image 
docker build -t test-react-app .
Enter fullscreen mode Exit fullscreen mode
Check for the built image 
❯ docker images test-react-app
REPOSITORY       TAG       IMAGE ID       CREATED              SIZE
test-react-app   latest    e81a494ead2b   About a minute ago   21.1MB
Enter fullscreen mode Exit fullscreen mode

Kubernetes deployment

A deployment and service resources are required for deploying the react app on to the kubernetes cluster. We can combine both specifications in to single yaml file by separating them with ---

  • Observe the imagePullPolicy attribute marked as Never indicating that don’t look at docker registry for pulling the image called test-react-app
  • Also we will be using the simplest service called NodePort to map the node’s port in kubernetes cluster to applications port

Alt Text

deployment.yaml

kind: Deployment
apiVersion: apps/v1
metadata:
  name: test-react-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: test-react-app
  template:
    metadata:
      labels:
        app: test-react-app
    spec:
      containers:
        - name: test-react-app
          image: test-react-app
          imagePullPolicy: Never
          ports:
            - containerPort: 80
      restartPolicy: Always

---

kind: Service
apiVersion: v1
metadata:
  name: test-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 32000
  selector:
    app: test-react-app
Enter fullscreen mode Exit fullscreen mode
Deploy

We use kubectl apply -f <yaml> to deploy both the deployment and service

kubectl apply -f .\deployment.yaml
Enter fullscreen mode Exit fullscreen mode

Sample Output

❯ kubectl apply -f .\deployment.yaml
deployment.apps/test-react-app created
service/test-react-app created
Enter fullscreen mode Exit fullscreen mode
Check the pods running

Verify that there are pods running using kubectl get pods

❯ kubectl get pods
NAME                             READY   STATUS    RESTARTS   AGE
test-react-app-9bf9cbcdb-h9zvj   1/1     Running   0          12s
Enter fullscreen mode Exit fullscreen mode

Access the react app

Finding the Service URL

We use minikube to find out the service URL for the deployed react application

minikube service test-react-app --url
Enter fullscreen mode Exit fullscreen mode

Sample Output

❯ minikube service test-react-app --url
🏃  Starting tunnel for service test-react-app.
|-----------|----------------|-------------|------------------------|
| NAMESPACE |      NAME      | TARGET PORT |          URL           |
|-----------|----------------|-------------|------------------------|
| default   | test-react-app |             | http://127.0.0.1:62352 |
|-----------|----------------|-------------|------------------------|
http://127.0.0.1:62352
❗  Because you are using a Docker driver on windows, the terminal needs to be open to run it.
Enter fullscreen mode Exit fullscreen mode
Open the app in Browser

Alt Text

Local Kubernetes Dashboard

All the while we can see the effects of running any kubectl commands in the kubernetes local dashboard

minikube dashboard
Enter fullscreen mode Exit fullscreen mode

Sample Output

❯ minikube dashboard
🔌  Enabling dashboard ...
    ▪ Using image kubernetesui/dashboard:v2.1.0
    ▪ Using image kubernetesui/metrics-scraper:v1.0.4
🤔  Verifying dashboard health ...
🚀  Launching proxy ...
🤔  Verifying proxy health ...
🎉  Opening http://127.0.0.1:56135/api/v1/namespaces/kubernetes-dashboard/services/http:kubernetes-dashboard:/proxy/ in your default browser...
Enter fullscreen mode Exit fullscreen mode

will open the dashboard in a new tab
Alt Text

Cleanup

Cleanup the deployment and service using the following command

kubectl delete -f .\deployment.yaml
Enter fullscreen mode Exit fullscreen mode

Close down minikube (local k8s cluster) and delete

minikube stop
minikube delete
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

pwd9000 profile image

Ignite 2024 - Book Of News - DevOps Edition

Marcel.L -

signadot profile image

Multitenancy Is Fundamental to Shift-Left Testing

Signadot -

javadibrahimli profile image

Possible to Do Panoramic Image Stitching in React Native?

Javad İbrahimli -

sharmaprash profile image

Top React Native Libraries for Production-Ready Applications

Prashant Sharma -