How To Run Vue.js With NodeJS API on Minikube

Learn how to deploy and run it on Kubernetes on your local machine

Bhargav Bachina
Sep 4 · 7 min read
Image for post
Image for post
Photo by Sonnie Hiles on Unsplash

Most of the companies are adopting some kind of container orchestration and running all their modern apps on Kubernetes. It’s always convenient to run the apps on Minikube which is a single-node Kubernetes cluster that can be installed on your local machine. In this post, we can deploy and run Vue with nodeJS backend API on Minikube on our local machine.

Introduction

Minikube is a tool that runs a single-node Kubernetes cluster in a virtual machine on your personal computer. We are going to deploy and run the Vue app with NodeJS API on MInikube in this article. First, we create this project and run it normally, then we will run the same on the Docker and, finally, we create a deployment and service objects to deploy and run it on Kubernetes locally.

We are going to need some pre-requisites to complete this project or run it on your local machine.

Example Project

This is a simple project which demonstrates developing and running Vue application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Image for post
Image for post
Example Project

Since we are focusing on running the whole project on the Minikube we are not going to develop this project in this post. If you are not familiar with the whole process of developing a Vue app with the NodeJS backend you can go through the below post.

How To Develop and Build Vue.js App With NodeJS

Here is the GitHub link of this project. You can clone it and run on it your machine.

// clone the project
git clone https://github.com/bbachi/vuejs-nodejs-minikube.git
// strat the api
cd api
npm install
npm run dev
// start the react app
cd my-app
npm install
npm run serve

Run it On Docker

We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building a Vue app and put those static assets in the build folder is the first step. The second step involves taking those static build files and serve those with node server.

Let’s build an image with the Dockerfile. Here are the things we need for building an image.

Stage 1

  • Start from the base image node:10
  • There are two package.json files: one is for nodejs server and another is for VueUI. We need to copy these into the Docker file system and install all the dependencies.
  • We need this step first to build images faster in case there is a change in the source later. We don’t want to repeat installing dependencies every time we change any source files.
  • Copy all the source files.
  • Vue uses CLI Service to build the app. So, install CLI and install all the dependencies.
  • Run npm run build to build the Vue App and all the assets will be created under dist a folder within a my-app folder.

Stage 2

  • Start from the base image node:10
  • Take the build from stage 1 and copy all the files into ./my-app/dist folder.
  • Copy the nodejs package.json
  • Install all the dependencies
  • Finally, copy the server.js
  • Have this command node server.js with the CMD. This automatically runs when we run the image.
Dockerfile

Let’s build the image with the following command.

// build the image
docker build -t vue-node-image .
// check the images
docker images

Once the Docker image is built. You can run the image with the following command.

// run the image
docker run -d -it -p 3080:3080 --name vue-node-ui vue-node-image
// check the container
docker ps

Once you run the container you can the application on the port 3080.

Image for post
Image for post
Project Running on Docker

Publishing the Docker Image

Let’s publish the Docker image to Docker Hub with this command docker push <repo name> . Before that, you need to create a Docker Hub account if you dot have one. Here is the link for it.

Let’s create a repository and it’s bbachin1 in my case. We need to login, tag the image, and push it finally.

// login
docker login
// tag the image
docker tag vue-node-image bbachin1/vue-node-image
// push the image
docker push bbachin1/vue-node-image
Image for post
Image for post
docker hub

Create a Deployment and Service Objects

A pod is a group of one or more containers that share the storage and network and has the specification on how to run the container. You can check the pod documentation here.

Let’s create a pod with the below file. Before that, You need to start the Minikube on your local machine with this command minikube start and create a pod with this kubectl create -f pod.yml

pod.yml

It takes some time to pull the image from the Docker Hub if you are doing the first time or depending on the image size. Now you can see the pod is in the running status and exec into it to explore the file structure, etc.

// get the pod
kubectl get po
// exec into running pod
kubectl exec webapp -it -- /bin/sh
Image for post
Image for post
kubectl get pod

Deployment

Creating just one pod is not enough and what if you want to scale out the application and want to run 10 replicas at the same time. What if you want to change the number of replicas depending on the demand. That’s where the deployment comes into the picture. We specify the desired state in the deployment object such as how many replicas you want to run etc.

Kubernetes makes sure that it always meets the desired state. It creates replica sets which inturn creates pods in the background. Let’s create a Deployment for our project with this command kubectl create -f deployment.yml

deployment.yml

We have 5 replicas in the specification and the deployment creates 5 pods and 1 replica set.

Image for post
Image for post
Deployment

Service

Service is an abstract way to expose an application running on a set of Pods as a network service. Let’s create a service with type NodePort so that we can access the Vue app from the browser. Here is the service object YAML

service.yml

Create a service with this command kubectl create -f service.yml and you can list the service with this kubectl get svc

Image for post
Image for post
Service

You can create one file called manifest.yml to place all the Kubernetes objects in one place and create all of the objects with one command kubectl create -f manifest.yml

manifest.yml

How to access deployment from the browser

We have created deployment and services and now we need to access this deployment from the browser.

We need to get the public IP address of the Kubernetes with this command kubectl cluster-info

Image for post
Image for post
kubectl cluster-info

Let’s access a Vue app with this IP address 192.168.64.2 (where Kubernetes master is running)and port 32616 (where the service port is mapped)with the below URLs. Make sure that you use Http instead of Https.

// access the application herehttp://192.168.64.2:32616/

Accessing the application in the browser

Image for post
Image for post
Accessing the app in the browser

Summary

  • Minikube is a tool that runs a single-node Kubernetes cluster in a virtual machine on your personal computer.
  • We need to install nodejs, Docker for desktop and Minikube as prerequisites
  • We can build the project with docker docker build -t vue-node-image .and run the container with this command docker run -d --name vue-node-image -p 3080:3080 vue-node-ui
  • We need a container orchestration engine for auto-scaling of applications
  • A pod is a group of one or more containers that share the storage and network and has the specification on how to run the container.
  • We need to push the repository to the Docker Hub and pull the image from it with ImagePolicy Always.
  • A Deployment is a declarative approach to specify the number of instances of the application and makes it easier to scale up and down based on the need.
  • Service is an abstract way to expose an application running on a set of Pods as a network service.
  • You can access the local deployment with the public IP address of Kubernetes and the port of the service. We should use Nodeport in the service object.
  • You can place all the Kubernetes objects in one file called manifest.yml

Conclusion

It’s always convenient to use Minikube and own docker images for the local testing. We don’t even deploy in some kind of environment to test our workflow.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store