<h2>Background</h2><p>This blog focuses on creating a boiler app using kubernetes using yaml file manually.</p><p><br></p><h2>Prerequisite</h2><ol><li>Minikube</li><li>Kubectl</li><li>Npm</li><li>Docker Hub account</li></ol><p><br></p><h2>Procedures</h2><p>1. Create a react application. Create a root directory, then create sub-directory, one for react and another for kubernetes</p><pre># shell mkdir react-docker-k8s cd react-docker-k8s mkdir react-docker mkdir k8s</pre><pre># shell npx create-react-app react-docker npm start</pre><p>The script automatically open browser and you could get an access to the app by http://localhost:3000</p><p><img src="/media/django-summernote/2022-04-19/ffec7af2-0a38-4d93-a227-a20e94693b9c.png" style="width: 990px;"><br></p><p>Default port is 3000, but you can change the port by creating a <b>.env</b>&nbsp;file and manually setting the port inside it, something like:</p><pre># shell vim .env </pre><pre># .env file PORT=3002</pre><p>When you run <b>npm start</b> then the app will use the port 3002</p><p>At last, build the react app for production with the following command;</p><pre># shell npm run build</pre><p><br></p><p>2. Containerize react application</p><pre># shell docker login</pre><p>At react app directory (react-docker), create following files:</p><pre># shell cd react-docker touch Dockerfile touch .dockerignore</pre><p>Put script to both files</p><pre># Dockerfile FROM nginx:stable-alpine COPY build/ /usr/share/nginx/html/</pre><pre># .dockerignore npm-debug.log .dockerignore **/.git **/.DS_Store **/node_modules</pre><p>Then build docker image</p><pre>docker build -t &lt;docker user name&gt;/react-docker .</pre><p>Make sure that &lt;docker user name&gt; is from Docker Hub</p><p>Once docker build is completed, check if the image is created successfully but running the image:</p><pre>docker run -d -p 3000:80 &lt;docker user name&gt;/react-docker</pre><p>The commend aboce starts a docker container with the image in detached mode (-d), and maps your local machine <b>port 3000 </b>to the container <b>port 80</b> where our docker container is running.</p><p>You can open the app by <b>http://localhost:3000</b></p><p><img src="/media/django-summernote/2022-04-19/5c0c0e8f-b9d7-4d5e-b252-81285aeb71f6.png" style="width: 990px;"><br></p><p>Make sure to stop your app once you tested</p><pre>docker stop &lt;container ID/name&gt;</pre><p>Once you tested, push the image to Docker Hub which will be used for creating an apps in kubernetes later</p><pre>docker push &lt;docker user name&gt;/react-docker:latest</pre><p>You can check if your image at Docker Hub can run correctly by;</p><pre>docker run &lt;docker user name&gt;/react-docker</pre><p>Then go to http://localhost:3000</p><p><br></p><p>3. Deploy react app to kubernetes</p><p>Move to k8s directly</p><pre># shell cd ../k8s</pre><p>Start the local kubernetes/minikube by:</p><pre># shell minikube start</pre><p>Then create a name space and set the new name as default in kubectl operation</p><pre># shell kubectl create namespace react-docker kubectl config set-context --current --namespace=react-docker</pre><p>Create deployment.yaml file and put following scripts</p><pre># shell touch deployment.yaml</pre><pre># deployment.yaml file kind: Deployment apiVersion: apps/v1 metadata: name: react-docker spec: replicas: 2 selector: matchLabels: app: react-docker template: metadata: labels: app: react-docker spec: containers: - name: react-docker image: tak113/react-docker ports: - containerPort: 80 </pre><p>Deploy the app with the following:</p><pre># shell kubectl apply -f deployement.yaml</pre><p>Monitor the status</p><pre># shell kubectl get deployment -w</pre><p>You will get followings:</p><pre># shell NAME READY UP-TO-DATE AVAILABLE AGE react-docker 2/2 2 2 3d14h<br></pre><p><br></p><p>To access the app from outside of the cluster, you will need to create a service.yaml. This service will be a load balancer</p><pre># shell touch load-balancer.yaml</pre><pre># load-balancer.yaml file apiVersion: v1 kind: Service metadata: name: load-balancer labels: app: react-docker spec: type: LoadBalancer ports: - port: 80 targetPort: 80 protocol: TCP nodePort: 31000 selector: app: react-docker </pre><p>We specified the service type as LoadBalancer, made the service accessible on port 80, and set the nodePort to 31000. This nodePort is the port on which we will be able to access the application from outside.&nbsp;</p><p>Deploy the service and check service</p><pre># shell kubectl apply -f load-balancer.yaml kubectl get services -w</pre><p>You will see followings as a result:</p><pre># shell NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE load-balancer LoadBalancer 10.102.199.75 &lt;pending&gt; 80:31000/TCP 3d14h </pre><p>The application can be accessible on the URL of : <b>http://&lt;minikubeip&gt;:31000</b></p><p>Replace minikube ip with the IP address returned by the following command:</p><pre># shell minikube ip</pre><p><br></p><p>You can scale the application by:</p><pre># shell kubectl scale deployment react-docker --replicas=10</pre><p><br></p><p>Reference :&nbsp;<a href="https://blog.logrocket.com/deploy-react-app-kubernetes-using-docker/" target="_blank">https://blog.logrocket.com/deploy-react-app-kubernetes-using-docker/</a></p>