How to Deploy React.js and Node.js Dockerized Containers to a Kubernetes Cluster

1061 VIEWS

· · · ·

In this tutorial we will deploy Dockerized containers to a Kubernetes cluster. We’ll start by using the Node.js framework to create an Express backend server. We will use React.js to create a front-end web application and connect the two applications. The React.js application will make API calls to the Express server.

React.js is an open-source Javascript framework for building single-page web applications and interactive user interfaces. You can use a few lines of code to create a React.js application. Node.js is an open-source Javascript runtime framework for building scalable network applications.

After creating the Node.js Express server and React.js web application, we will use Docker to containerize the two applications. Docker allows us to run the applications as stand-alone containers. Each container will have all the libraries, code, and packages needed to run an application. Finally, we will deploy the two containerized applications to the Kubernetes Cluster.

Prerequisites

To follow along easily and implement the concepts in this tutorial, you need to be familiar with React.js, Node.js, and Docker. You will need the following already setup on your computer:

VS Code text editor.

Node.js

Docker Desktop installed onto your machine

What is Kubernetes

Kubernetes is open-source software that assists in container orchestration. Kubernetes automates the deployment and management of multiple containerized applications in a Kubernetes Cluster. You can create a Kubernetes Cluster on cloud-based service providers such as AWS, Microsoft Azure, and Google Cloud. You can also create a Kubernetes cluster on your local machine using Minikube

The cloud-based service providers are best suited for large applications that require powerful computing resources. These providers are also best when running applications in production.

Minikube allows us to create and run a Kubernetes Cluster on your local machine. It is best suited for testing simple and small applications. Most applications that run on the Minikube require little computing resources. For this tutorial, we will deploy the two Docker containers to a Minikube Kubernetes Cluster. Let’s start working on our two applications.

Creating the Node.js Application

To create the Node.js application, apply the following steps below:

Step 1: Create a project working directory named `react-node-app` and open it with VS Code. 

In the project working directory, create a new folder named `backend` and `cd` into the created folder. This folder will contain all the code and dependencies for the Express server. 

Step 2: Initialize the Node.js application as follows:

npm init --y

The command will initialize the Node.js application and generate the `package.json` file. Next, let’s install all the dependencies required to run the Node.js application:

npm i express
npm i -g nodemon

The command will install `express` and `nodemon`. We will use the `express` to create the back-end server. 

We will use `nodemon` to monitor the Node.js application scripts and detect any changes. When any changes are detected, it automatically restarts the Node.js application during development.

Step 3:  Next, open the `package.json` and the following script for `nodemon` to become effective:

"dev": "nodemon -L app.js"

Step 4:  In the `backend` folder, create a new file named `app.js`

Step 5:  Add the following code in the `app.js`:

const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())

app.get('/', (req, res) => {
  res.json([
    {
      "id":"1",
      "title":"Movie Review: The Perk of Being a Wallflower"
    },
    {
      "id":"2",
      "title":"Game Review: Need for Speed"
    },
    {
      "id":"3",
      "title":"Show Review: Looking for Alaska"
    }
  ])
})

app.listen(4000, () => {
  console.log('listening for requests on port 4000')
})

The code above will create an Express `get` route. The backend will be listening for requests on port 4000. Let’s run the Node.js application.

Running the Node.js Application

To run the Node.js application, use the following command:

npm run dev

The command will start our application as shown below:

We can access the Node.js application on `http://localhost:4000/` as shown below:

Creating the React.js Application

To create the React.js application, apply the following steps below:

Step 1: While in the project working directory, run the following command to create a React.js application

npx create-react-app frontend

The command will create a new folder named `frontend` in the project working directory. Now, `cd` into the `frontend` folder.

Step 2: Go to the `frontend` folder, and open the `src` folder as shown below:

Step 3: In the `src` folder, open the `App.js` file, delete everything from it and paste the following code:

import { useEffect, useState } from 'react'
import './App.css';

function App() {
  const [blogs, setBlogs] = useState([])
  useEffect(() => {
    fetch('http://localhost:4000/')
      .then(res => res.json())
      .then(data => setBlogs(data))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <h1>all blogs</h1>
        {blogs && blogs.map(blog => (
          <div key={blog.id}>{blog.title}</div>
        ))}
      </header>
    </div>
  );
}

export default App;

The code will create a simple react application that will make API requests to the Express server. It will fetch the results from http://localhost:4000/ where our backend is running.

Running the React.js Application

Before you run the React.js application, ensure the Node.js application is running on http://localhost:4000/. To run the React.js application, run the following code:

npm start

The command will start our application. We can access it on http://localhost:3000/ as shown below:

We have connected the two applications, and the front end can now communicate with the back end. Let’s now containerize the two applications using Docker.

Containerizing the Node.js Application

To containerize the Node.js using Docker, follow the steps below:

Step 1: Create a file named `Dockerfile` in the `backend` folder

The `Dockerfile` will have the commands required to build a Docker image for the Node.js application. Add the following code in the created `Dockerfile`:

# Requires node:18-alpine as the base image for Dockerizing the Node.js application
FROM node:18-alpine

# It installs the nodemon package for monitoring the Express server
RUN npm install -g nodemon

# Creating the working directory
WORKDIR /app

# Copying the dependencies in the package.json file
COPY package.json .

#Installing all the dependencies
RUN npm install

#Copying all the files to the working directory
COPY . .

#Container will run on this port
EXPOSE 4000

#Command to start the Docker container Node.js application
CMD ["npm", "run", "dev"]

Step 2: Building the Docker image

To build the Docker image for the Node.js application, first `cd` into the `backend` folder. You will then run the following command:

docker build -t bravinwasike/node-js .

The command will build the Docker image and give the following output in your terminal:

Pushing the Node.js Docker Image to Docker Hub

To push the Docker image to Docker Hub, run the following command:

docker push bravinwasike/node-js
Starting the Containerized Node.js Application

To start the containerized Node.js application, run the following command:

docker run -p 4000:4000 bravinwasike/node-js

The command will start the containerized Node.js application as shown below:

We can also access the containerized Node.js application on `http://localhost:4000/` as shown below:

Containerizing the React.js Application

To containerize the React.js using Docker, follow the steps below:

Step 1: Create a file `Dockerfile` in the `frontend` folder and add the following code in the created Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Step 2: Building the Docker image

To build the Docker image for the React.js application, first `cd` into the `frontend` folder. You will then run the following command:

docker build -t bravinwasike/react-js .

The command will build the Docker image and give the following output in your terminal:

Pushing the React.js Docker Image to Docker Hub

To push the Docker image to Docker Hub, run the following command:

docker push bravinwasike/react-js
Starting the Containerized React.js Application

Before you run the containerized React.js application, ensure the containerized Node.js application is running on http://localhost:4000/. To start the containerized React.js application, run the following command:

docker run -p 3000:3000 bravinwasike/react-js

The command will start the containerized React.js application. We can also access the containerized React.js application on `http://localhost:3000/` as shown below:

Our containerized React.js application is also running and connected to the back end. Let’s now deploy the two containerized applications to the Kubernetes Cluster.

Creating the Kubernetes Cluster

We will create and run Kubernetes Cluster locally using Minikube. We will deploy the two containerized applications to the Minikube Kubernetes Cluster. Minikube comes together with Docker during the installation process. To check the installed Minikube version, run the following command:

minikube version

Minikube depends on the Docker driver to run. To create and run a Kubernetes Cluster using Minikube, execute the following command:

minikube start --driver=docker

Deploying the Containerized applications to the Minikube Kubernetes Cluster

We will deploy the containerized applications to the Minikube Kubernetes Cluster using the Kubernetes CLI. Kubernetes CLI (`kubectl`) is a powerful command line interface tool that assists in the deployment of any containerized applications to a created Kubernetes Cluster. You can interact with the containerized applications using the `kubectl` commands and access their resources.

You need to install the Kubernetes CLI using the following command:

choco install kubernetes-cli

To check the installed version, use the following command:

Kubectl --version

To deploy the containerized applications, we need to create a `node-js-deployment.yaml` and `react-js-deployment.yaml` files. Kubernetes CLI will use these two files and deploy the two containerized applications.

Creating the `node-js-deployment.yaml` File

In the project working directory, create a file named `node-js-deployment.yaml` and paste the following code:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: node-js-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: node-js
  template:
    metadata:
      labels:
        app: node-js
    spec:
      containers:
      - name: node-js
        image: bravinwasike/node-js
        resources:
          limits:
            memory: "356Mi"
            cpu: "500m"
        ports:
        - containerPort: 4000

---

apiVersion: v1
kind: Service
metadata:
  name: node-js-service
spec:
  type: LoadBalancer
  selector:
    app: node-js
  ports:
  - port: 4000
    targetPort: 4000
    protocol: TCP

The file consists of two parts: Deployment and Service.

  • Deployment

This part of the file specifies the number of application pods that will run after the deployment. Pods are multiple instances or replicas of the same containerized application. It also shows the port the container will be running and resource limits for each application pod. It also shows the Docker image that will create the containers during deployment. We will use `bravinwasike/node-js` image from Docker Hub.

  • Service

The service distributes the containerized application’s traffic to the running pods equally. Additionally, it exposes the running application to be accessed outside the Kubernetes cluster. Furthermore, the service assigns an External IP address to the containerized application. We can use it to access the application in a web browser.

Creating the `react-js-deployment.yaml` File

In the project working directory, create a file named `react-js-deployment.yaml` and paste the following code:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-js-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: react-js
  template:
    metadata:
      labels:
        app: react-js
    spec:
      containers:
      - name: react-js
        image: bravinwasike/react-js
        resources:
          limits:
            memory: "356Mi"
            cpu: "500m"
        ports:
        - containerPort: 3000

---

apiVersion: v1
kind: Service
metadata:
  name: react-js-service
spec:
  type: LoadBalancer
  selector:
    app: react-js
  ports:
  - protocol: TCP
    port: 3000
    targetPort: 3000

To deploy the two containerized applications to the Minikube Kubernetes cluster, apply the following commands:

kubectl apply -f node-js-deployment.yaml
kubectl apply -f react-js-deployment.yaml

To see the deployments, run this command:

kubectl get deployments

We can see the two deployments described in the two `.yaml` files:

Getting the containerized application pods

To get the running pods, run this command:

kubectl get pods

The running pods output:

Getting the containerized applications service

To get the containerized applications service run this command:

kubectl get service

The application services output:

We have two application services described in the two `.yaml` files. The two services are running, but the `EXTERNAL-IP` is `pending`. We will expose the two services to access the applications outside the Kubernetes cluster in a web browser.

Exposing the two services

For Minikube to assign an `EXTERNAL-IP` and expose the two services, run these commands for each of the services:

1. `node-js-service`

For the `node-js-service`, run the following command:

minikube command node-js-service

The code will expose the service and assign http://127.0.0.1:3215/ as the `EXTERNAL-IP` as shown below:

You can access the application in the web browser using http://127.0.0.1:3215/:

 

2. `react-js-service`

For the `react-js-service`, run the following command:

minikube service react-js-service

The Minikube command will expose the service and assign http://127.0.0.1:2910 as the `EXTERNAL-IP` as shown below:

Before you access the `react-js-service`, ensure the exposed `node-js-service` is still running in your browser. To access the `react-js-service` in the web browser, click on this URL http://127.0.0.1:2910:

Conclusion

In this tutorial, we have learned how to deploy React.js and Node.js Dockerized containers to a Kubernetes Cluster. We started with an Express backend server using Node.js. We then created a front-end web application using React.js and connected the two applications. After setting up the Node.js Express server and React.js web application, we then used Docker to containerize the two applications. 

We created two stand-alone Docker containers, and we also created a Kubernetes Cluster that runs on our local machine using Minikube. We finally deployed the two containerized applications to the Kubernetes Cluster and accessed the application services. You can access the complete code here. Happy Deployment!


Bravin Wasike holds an undergraduate degree in Software Engineering. He is currently a freelance data scientist and machine learning engineer. He is passionate about machine learning and deploying models to production using Docker and Kubernetes. Bravin also loves writing articles on machine learning and various advances in the technological industry. He spends most of his time doing research and learning new skills in order to solve different problems.


Discussion

Click on a tab to select how you'd like to leave your comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Menu
Skip to toolbar